26/12/2016 Development / java script

Depois de muito, muito, mas muito mesmo procurar na internet algo que fosse mais ou menos assim.

Queria deixar desabilitador ou readonly os campos de datetimepicker do kendo e deixar o usuario manipular apenas pelos icones de calendario e timer.

Nao encontrei nada :-(

A minha solucao foi a seguinte:

Eu inicializo os campos como readonly e dou um bind via js nos elementos

      var kendoDateTimePicker = element.find('#roc-datetimeinterval-start').data('kendoDateTimePicker');
      var kendoDateTimePickerEnd = element.find('#roc-datetimeinterval-end').data('kendoDateTimePicker');

      // abre o calendario do start date
      element.find('.startDatetime .k-link-date').on("click", function (e) {
        kendoDateTimePicker.close('time');
        kendoDateTimePicker.open('date');
      });

      // abre o calendario do end date
      element.find('.endDatetime .k-link-date').on("click", function (e) {
        kendoDateTimePickerEnd.close('time');
        kendoDateTimePickerEnd.open('date');
      });


      // abre o timer do start date
      element.find('.startDatetime .k-link-time').on("click", function (e) {
        kendoDateTimePicker.close('date');
        kendoDateTimePicker.open('time');
      });

      // abre o timer do end date
      element.find('.endDatetime .k-link-time').on("click", function (e) {
        kendoDateTimePickerEnd.close('date');
        kendoDateTimePickerEnd.open('time');
      });

Ficou supimba, Espero que funcione pra vc!