Как сделать редактирование даты выбора материала (на самом деле 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>