Как сделать редактирование даты выбора материала (на самом деле pickadate) доступным для редактирования?

Я пытаюсь сделать manize date picker доступным для редактирования. Вот цель, пользователь может напрямую написать дату в поле ввода или использовать виджет для выбора даты.

Я сделал что-то, что вот-вот заработает в этом jsfiddle. Но есть ошибка, которую я пытаюсь решить. Когда пользователь непосредственно пишет дату на входе, сборщику также нужно получить новое значение (потому что я использую другой формат для отправки даты, и есть обновленное скрытое поле ввода). Чтобы добиться этого, я попытался сделать

picker.set('select', $(this.val());

Но он создает бесконечный цикл, потому что метод set в материализации также запускает событие change на входе.

EDIT: О, я только что нашел issue об этом на github. Есть ли у вас идеи об обходном пути?

Ответ 1

Любая конкретная причина, по которой вы хотите сделать это в методе изменения?
Почему не что-то вроде этого?

this.change(function(event) {

});

this.bind('blur keypress',function(e){
  if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
      var inputFieldDate=getFmtDate($(this).val());
      picker.set('select',inputFieldDate);
  }

});

Это функция утилиты для анализа даты в формате DD/MM/YYY и получения объекта Date javascript

function getFmtDate(s){
  var valx=new Array();
  if(s!=null && s.length>0){
      valx = s.split('/');
  }
  var d = new Date(valx[2],valx[1]-1,valx[0]);
  return d;
}

Это работает для меня.

Обновление:

Как только вы присоедините виджет к элементу html, обычные функции обратного вызова событий работают не так, как вы ожидаете. Их функциональность переопределена виджетами. Вы не можете использовать функции так же, как вы привыкли, и должны найти обходное решение. Короче говоря, вы не можете использовать функцию change для установки или отмены даты, потому что задано триггером событие change.

В вашем случае вы хотите решить несколько проблем, которые являются очень распространенными проблемами. Вы должны быть в состоянии получить множество примеров в Интернете, чтобы достичь каждого из них. То, что я сделал, это всего лишь один из способов сделать это.

Заполнение формы нестандартным способом при загрузке страницы.
Инициализировать различные плагины со значениями из формы, когда страница загружается
Инициализировать содержимое из скрытых полей, когда форма загружает и обновляет скрытые поля при отправке формы.
Извлеките значения по имени (скрытых полей) и используйте их для инициализации виджетов.

Я использовал blur keypress, чтобы дать вам представление о том, что все ваши требования могут быть обработаны без использования change. Вы используете события, которые работают на вас. Вы можете установить дату привязки объекта picker to calendar с ключевым словом this и получить доступ к нему из своего экземпляра, как показано ниже.

    (function($) {

      $.fn.calendar = function(options) {

    // Options du datepicker
        var settings = $.extend({
            editable: true,
            format: 'dd/mm/yyyy',
            formatSubmit: 'ddmmyyyy'
        },
        options
      );

    this.pickadate(settings);
    //var picker = this.pickadate(''); will not work
    this.picker = this.pickadate('picker');

    this.change(function(event) {

    });
    this.bind('blur keypress',function(e){
      if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
            var inputFieldDate=getFmtDate($(this).val());
          picker.set('select',inputFieldDate);
      }

    });

    var $triggerIcon = $('<div class="col s2 center-align"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker">Date</a></div>');
    $triggerIcon.click(function(event) {
      event.stopPropagation();
      event.preventDefault();
      picker.open();
    });
    this.parent().after($triggerIcon);
    // Resolves picker opening for thing
    this.next().unbind("focus.toOpen");
    return this;
      };
    }(jQuery));

Чтобы установить дату:

//This is how you set a date
var cal = $('.datepicker').calendar();
//You can access picker because we changed
//var picker to
//this.picker above in fn.calendar
cal.picker.set('select', getFmtDate($("[name=hiddenDate]").val()));
// The syntax is 
//cal.picker.set('select', new Date());

$('#formulaireDate').validate();

Вам нужно преобразовать дату в Date(). Функция ниже должна дать вам представление. Вы также можете использовать плагины, например плагин jquery dateFormat.

function getFmtDate(s){
    var valx=new Array();
      if(s!=null && s.length>0){
                        valx = s.split('/');
              }
  var d = new Date(valx[2],valx[1]-1,valx[0]);
  return d;
}

Это ваш html.

<div class="row">
<div class="col s4">
  <input type="text" class="datepicker" />
  <input name="hiddenDate" type="hidden" value="12/12/2016">
</div>
</div>