Kendo Scheduler DatePicker 事件

Posted 2023-05-07

【中文标题】Kendo Scheduler DatePicker 事件

【英文标题】：Kendo Scheduler DatePicker events

【发布时间】：2015-07-15 05:21:52

【问题描述】：

如何为 Kendo Scheduler 开始和结束日期 DatePicker 控件设置事件？ 当开始或结束日期从 DatePicker 控件发生更改时，我想添加一些逻辑，但我不知道该怎么做。

我尝试像下面这样绑定事件，但它不适合我：

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

【参考方案1】：

您可以选择那些DatePicker 并在调度程序触发edit 事件时添加您的新功能。

这里有一些你需要添加的代码sn-p

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

接下来，您需要使用 jquery 找到 DatePicker 组件并将其与新功能绑定。虽然Scheduler 编辑弹出窗口提供了 2 种不同的日期选择器，但您需要仔细选择是 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());

完整示例，您可以查看此dojo

【讨论】：

你的道场没有加载。

道场未找到Snippet not found The snippet may have been deleted by the author, or the URL might be incorrect.

【参考方案2】：

我认为您的 datePicker 未绑定在 kendo 调度程序中。如果您更改了某个日期并将此日期附加到另一个 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>

【参考方案3】：

像这样：

<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