События Kendo Scheduler DatePicker

Question

Как установить событие для элемента управления датой начала и окончания Kendo Scheduler? Я хочу добавить некоторую логику, когда дата начала или окончания меняется с элемента управления DatePicker, но я не знаю, как это сделать.

Я пытался связать событие, как показано ниже, но оно не работает для меня:

start: { 
   type: "date",
   from: "StartDate",
   validation: { required: true },
   event: { change: "onStartDateChange('start')" }
 }

Answer 1

Как это:

<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>

Вот мое додзё: http://dojo.telerik.com/@svejdo1/AWoNU

Answer 2

Вы можете выбрать те DatePicker и добавьте новую функцию при запуске планировщика edit событие.

вот фрагмент кода, который нужно добавить

$("#scheduler").kendoScheduler({
  edit: scheduler_edit // add on scheduler edit events
  //remove for clarity
});

рядом нужно найти DatePicker компоненты с помощью jquery и связать его с новой функцией. В то время как Scheduler Во всплывающем окне редактирования укажите два типа даты, которые нужно выбрать DatePicker или же DateTimePicker

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());
}

для полного образца, вы можете посмотреть в этом додзе

Answer 3

Я думаю, ваш DatePicker не привязан в планировщике кендо. Если вы изменили какую-то дату и добавили эту дату в другой DatePicker, вы можете использовать, как в этом примере. Это моя функция редактирования, вы можете использовать функцию редактирования или другие функции, как вам нравится:

 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");
};

Это ваш контроллер. Тогда вы можете использовать HTML как этот

 <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>