点击输入框切换kendo日期日历容器

时间:2015-01-30 10:25:21

标签: jquery angularjs kendo-ui kendo-datepicker

我有一个kendo日期选择器,它运行良好。

点击输入框旁边的图标,我可以打开日历的日期对话框,它正在工作。 但是我希望这个对话框也应该打开输入框的单击..

            <h4>Select date:</h4>
            <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject" />

我尝试过:

angular.element('#common_datePicker').on('click', function () {
                            var datePicker = angular.element('#common_datePicker').data('kendoDatePicker');
                            if ($('.k-calendar-container').css('display') == 'none'){
                                datePicker.open();
                            } else {
                                datePicker.close();
                            }
                        });

点击输入框后,我可以打开日历容器,但再点击它就应该关闭。它应该作为一个切换工作。 在此链接中,他们讨论了与kendo datepicker相关的API ..

http://demos.telerik.com/kendo-ui/datepicker/api

任何人都可以指导我吗?

3 个答案:

答案 0 :(得分:1)

以下是答案..

我做了一些R&amp; D并找到了这个解决方案..

                // On click of input box of date control open and close the calender control
                angular.element('#common_datePicker').on('click', function () {
                    var datePicker = angular.element('#common_datePicker').data('kendoDatePicker');
                    if ($('#common_datePicker_dateview').css('display') == 'none') {
                        datePicker.open();
                    } else {
                        datePicker.close();
                    }
                });

这对我来说很好。 谢谢!

答案 1 :(得分:0)

这是Javascript版本的Javascript Coder解决方案

limit=3

答案 2 :(得分:0)

我为此创建了一条指令...

myApp.directive('kendoDatePicker', [
  function () {
    return {
      link: function (scope, element, attr) {
        element.bind('click', function (event) {
          var datePicker = $(element).data("kendoDatePicker");
          datePicker.open();
        });
      }
    };
  }]);