单击输入框切换剑道日期日历容器答案

【问题标题】：toggle kendo date calender container on click of input box单击输入框切换剑道日期日历容器
【发布时间】：2015-01-30 10:25:21
【问题描述】：

我有一个剑道日期选择器，它运行良好。

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

            <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

谁能指导我？

【问题讨论】：

您的演示链接没有显示任何内容（至少对我而言）。
这两个链接对我来说都很好。除了链接之外，您是否理解我的担忧。你能帮帮我吗？
尝试在“隐身”窗口中打开第一个链接，并且在 dojo 上没有会话，您就会明白我的意思。很高兴你解决了这个问题。
是的..你是正确的..我没有验证它..谢谢...

标签： jquery angularjs kendo-ui kendo-datepicker

【解决方案1】：

这就是答案..

我做了一些研发并找到了这个解决方案..

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

这对我来说很好用。谢谢！！

【讨论】：

【解决方案2】：

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

$("#yourDatePickerInputId").on('click', function () {
    var datePicker = $('#yourDatePickerInputId').data("kendoDatePicker");
    if ($('#yourDatePickerInputId_dateview').css('display') == 'none') {
        datePicker.open();
    } else {
        datePicker.close();
    }
});

【讨论】：

【解决方案3】：

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

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

【讨论】：