Custom date time picker

Webix JS
#1

Добрый день.

Понадобилось сделать дататаймпикер у которого можно по отдельности выбрать дату и время http://webix.com/snippet/7e1a3b48 Вроде всё хорошо и он работает, но когда он “встраивается” в интерфейс начинают лезть не понятные ошибки (по крайне мере для меня) подскажите куда в какую сторону смотреть? http://webix.com/snippet/ffa5c856

#2

Поползли вверх!

#3

Здравствуйте!

Вот рабочий пример вашего вью: http://webix.com/snippet/20bf5e62

Хочу обратить внимание на следующие вещи, из-за которых компонент был нерабочим:

(1) В создании timepicker вы несколько раз использовали приватные методы и свойства (this.s.popup, this.s.suggets, common.Fe() в template). Этот подход в корне не правильный, потому что в следующей версии минифицированные приватные свойства могут получить абсолютно другие значения.

Нужно обходиться без них. Например this.s.popup (он же this._settings.popup имеет доступный аналог this.config.popup). Если какая-то кастомизация не получается паблик методами, спрашивайте на форуме.

Мой совет - при разработке подключайте webix_debug.js вместо webix.js. Это непожатый исходник, работать с которым намного проще.

(2) При создании cuteDatePicker вы задаёте rows базового layout. Правильно это делать не через addView (ему нужна отрисованная компонента, поэтому возникает ошибка в случае с popup), а задавая их в обработчике $oninit:

$init: function (config) {
    config.rows = [
      { view: 'datepicker' },
      { view: 'timepicker'}
    ];  
 },

Там же, для проверки начального значения лучше использовать соответствующий сеттер. Плюс такого подхода, в отличие от вашего - он срабатывает каждый раз, когда значения устанавливается, в том числе и через define().

//установит значение, только если оно проходит проверку
 value_setter:function(value){
    if (typeof value != 'undefined' && !isNaN(new Date(value)))
      return value; 
 }
#4

Спасибо большое за советы.

#5

Но вот есть один момент. Когда вы убрали template из timepicker то поле стало редактируемым. А хотелось бы чтобы этого не было. Но если сделать как это реализовано в datepicker то вываливается ошибка про attachEvent

#6

можете в инициализации указать

this.attachEvent("onKeyPress",function(code,e){
      return webix.html.preventEvent(e);
    });

не спасет от ввода мышью, но все же…

#7

Проще всего будет блокировать событие keypress, задав ему обработчик в $ready:

this.attachEvent("onKeyPress", function(code, e){
     return false;
});

http://webix.com/snippet/2dd4c935

А правильнее будет упростить timepicker - наследовать его не от text, от datepicker с типом time и кастомизировать только suggest:

webix.protoUI({
  name: 'timepicker',
  defaults:{ type:"time" },
  $init: function(config){
    config.suggest = { ... };
  }
}, webix.ui.datepicker);

http://webix.com/snippet/83e7f961

#8

Спасибо за помощь. Ошибка оказалась в том что не был переопределен метод getInputNode для получения дива а не инпута