I need help in my kendo grid. During inline editing add or edit I'm using 4 kendoDatepicker. I want to do a date range validation, for example if I select date for Booking Date From/Until from -> 01/07/2020 until -> 30/07/2020, then when I select Promo Valid From/Until I need to make sure that promo valid date range must not exceed the booking date range from/until. Any idea how can I achieve this? And this validation also apply during Add New Record and Edit
#Correct
Booking Date From <----------------------------------------------> Booking Date Until
Promo Valid From <---------------------------> Promo Valid Until
#False
Booking Date From <--------------------------------> Booking Date Until
Promo Valid From <---------------------------> Promo Valid Until
Booking Date From <--------------------------------> Booking Date Until
Promo Valid From <---------------------------> Promo Valid Until
Use these parameters on your Booking date pickers:
min: (new Date(2020, 6, 1)),
max: (new Date(2020, 6, 30)),
change: function() {
window.setTimeout(() => {
let datePicker = $('#promoValidFrom').data('kendoDatePicker');
datePicker.max(this.value());
if (datePicker.value() > this.value()) {
datePicker.value(this.value());
}
});
}
Parameters min and max will set the Booking range from 2020-07-01 through 2020-07-30. Parameter change will make sure every change reflects on related PromoValid fields. The change event sets the max date of the PromoValid field and also checks if the current PromoValid date became greater than the related Booking date, it is set to the same Booking date.
Don't forget to use .data('kendoDatePicker').trigger('change'); right after the widget initialization. It run the change event the first time before user starts interaction with those fields.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script></head>
<body>
<div id="grid"></div>
<script>
var dataSource = [{
'name' : 'Special 50% Discount',
'bookingDateFrom' : '2020-07-01',
'bookingDateUntil': '2020-07-30',
'promoValidFrom' : '2020-07-01',
'promoValidUntil': '2020-07-29'
},{
'name' : '10% Member',
'bookingDateFrom' : '2020-06-01',
'bookingDateUntil': '2020-06-20',
'promoValidFrom' : '2020-06-02',
'promoValidUntil': '2020-06-10'
}];
var grid = $('#grid').kendoGrid({
dataSource: dataSource,
editable: "inline",
toolbar: [{ name: "create", text: "Add" }],
columns: [
{ field: "name", title: "Promo Name" },
{ field: "bookingDateFrom", title: "Booking Date From", format: "{0:MM/dd/yyyy}",
editor: BookingDateFrom},
{ field: "bookingDateUntil", title: "Booking Date Until", format: "{0:MM/dd/yyyy}",
editor: BookingDateUntil},
{ field: "promoValidFrom", title: "Promo Valid From", format: "{0:MM/dd/yyyy}",
editor: PromoValidFrom},
{ field: "promoValidUntil", title: "Promo Valid Until", format: "{0:MM/dd/yyyy}",
editor: PromoValidUntil},
{ command: ["edit", "destroy"], title: " " }
]
});
function BookingDateFrom(container, options){
$('<input type="text" name="' + options.field + '" id="' + options.field + '" />')
.appendTo(container)
.kendoDatePicker({
min: new Date(),
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
},
format: "MM/dd/yyyy",
min: (new Date(2020, 6, 1)),
max: (new Date(2020, 6, 30)),
change: function() {
window.setTimeout(() => {
let datePicker = $('#promoValidFrom').data('kendoDatePicker');
datePicker.max(this.value());
if (datePicker.value() > this.value()) {
datePicker.value(this.value());
}
});
}
}).data('kendoDatePicker').trigger('change');
$('<span class="k-invalid-msg" data-for="bookingDateFrom"></span>').appendTo(container);
}
function BookingDateUntil(container, options){
$('<input type="text" name="' + options.field + '" id="' + options.field + '" />')
.appendTo(container)
.kendoDatePicker({
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
},
format: "MM/dd/yyyy",
min: (new Date(2020, 6, 1)),
max: (new Date(2020, 6, 30)),
change: function() {
window.setTimeout(() => {
let datePicker = $('#promoValidUntil').data('kendoDatePicker');
datePicker.max(this.value());
if (datePicker.value() > this.value()) {
datePicker.value(this.value());
}
});
}
}).data('kendoDatePicker').trigger('change');
$('<span class="k-invalid-msg" data-for="bookingDateUntil"></span>').appendTo(container);
}
function PromoValidFrom(container, options){
$('<input type="text" name="' + options.field + '" id="' + options.field + '" />')
.appendTo(container)
.kendoDatePicker({
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
},
format: "MM/dd/yyyy"
});
$('<span class="k-invalid-msg" data-for="promoValidFrom"></span>').appendTo(container);
}
function PromoValidUntil(container, options){
$('<input type="text" name="' + options.field + '" id="' + options.field + '" />')
.appendTo(container)
.kendoDatePicker({
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
},
format: "MM/dd/yyyy"
});
$('<span class="k-invalid-msg" data-for="promoValidUntil"></span>').appendTo(container);
}
</script>
</body>
</html>