CODEWITHSUNDEEP
jqueryangularjskendo-uikendo-datepicker
FrontEnd Expert
FrontEnd Expert

Reputation: 5813

toggle kendo date calender container on click of input box

I have a kendo Date picker it is functioning well.

On click of icon beside to input box, I am able to open date dialog for calender and it is working. But I want this dialog should also open onclick of input box..

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

What I have tried :

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

On click of input box I am able to open the Calender container but again on clicking of this it should close. It should be working as a toggle. In this link they talk about API related to kendo datepicker..

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

Can anyone guide me ?

Upvotes: 0

Views: 2981

Answers (3)

Matej Krhin
Matej Krhin

Reputation: 47

I have created a directive for this...

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

Upvotes: 0

Chris Halcrow
Chris Halcrow

Reputation: 31990

Here's the JQuery version of Javascript Coder's solution

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

Upvotes: 1

FrontEnd Expert
FrontEnd Expert

Reputation: 5813

Here is the answer..

I did some R&D and find this solution..

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

And this is working fine for me. Thanks!!

Upvotes: 1

Related Questions