【问题标题】:Kendo Scheduler DatePicker eventsKendo Scheduler DatePicker 事件
【发布时间】:2015-07-15 05:21:52
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript angularjs kendo-ui kendo-scheduler kendo-datepicker


    【解决方案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

      【讨论】:

        猜你喜欢
        • 2017-03-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-07-30
        • 1970-01-01
        • 1970-01-01
        • 2014-02-18
        • 2014-02-15
        相关资源
        最近更新 更多