Kendo DatePicker Event Scheduler
How to set event for Kendo Scheduler Start and End Date of DatePicker? I want to add logic when start or end date changes are changed using the DatePicker, but I don't know how.
I tried to bind the event as below, but it doesn't work for me:
start: {
type: "date",
from: "StartDate",
validation: { required: true },
event: { change: "onStartDateChange('start')" }
}
source to share
You can select those DatePicker
and add a new function when you start the scheduler edit
.
here is the code snippet you need to add
$("#scheduler").kendoScheduler({
edit: scheduler_edit // add on scheduler edit events
//remove for clarity
});
Next, you need to find the components DatePicker
using jquery and link it to the new function. While the Scheduler
edit popup provides 2 types of different datepicker, you need to choose carefully how DatePicker
orDateTimePicker
function scheduler_edit(e) {
console.log("edit");
var startDatePicker = $("input[name=start][data-role=datepicker]").data().kendoDatePicker;
startDatePicker.bind("change", newFuncForDatePicker);
}
function newFuncForDatePicker(e) {
console.log(this.value());
}
for a complete sample, you can study this dojo
source to share
I think your datePicker is not related to the kendo planner. If you have some date and add that date to another datePicker you can use this example This is my edit function you can use edit function or other functions as you like:
edit: function (e) {
//get date from event
var getDateFromEvent = e.event.start;//or you can use different types of date like that
var datePicker = $("[name=signUpDueDate]").data("kendoDatePicker");
datePicker.value(getDateFromEvent).format("MM/DD/YYYY"));
datePicker.trigger("change");
};
This is your controller. Then you can use html like
<div class="col-xs-12 col-sm-3 form-group">
<div data-container-for="earlySignupDate">
<input id="signUpDueDate" name="signUpDueDate" class="pull-left" type="text" data-type="date" data-role="datepicker" data-bind="value: SignUpDueDate" />
</div>
</div>
source to share
Like this:
<script>
$("#scheduler").kendoScheduler({
edit: function(e)
{
// clone for input[name=end]
e.container.find("input[name=start]")
.data()
.kendoDateTimePicker.bind("change", function(e) {
var value = this.value();
// value has the new datetime
console.log(value);
});
}
});
</script>
Se my dojo: http://dojo.telerik.com/@svejdo1/AWoNU
source to share