Использование jQuery Datepicker с различными форматами даты, но всегда получать / устанавливать в формате ISO8601 с использованием val ()

Question

Я пытаюсь написать плагин jQuery для отображения и ввода дат, используя в качестве отправной точки DatePicker из пользовательского интерфейса jQuery.

Вызов должен выглядеть следующим образом:

jQuery(document).ready(function() {

  jQuery(document).find('input.mydatepicker').mydatepicker({
    myformat : 'mm/dd/yy'
  });

});

, так что любой ввод, имеющий class = "mydatepicker", будет иметь поведение mydatepicker.

Подвох в том, что я 'Мне бы хотелось, чтобы myformat поддерживал различные форматы даты, однако всякий раз, когда я использую функцию val() для получения / установки даты, я хочу, чтобы она была в формате iso8601 yyyy-mm-dd.

, хотя я указал формат mm/dd/yy выше для инициализации всех элементов, я хочу:

<input type="text" class="mydatepicker" id="myelement" value="02/23/2019">

var mydate = $('#myelement').val();   //mydate = '2019-02-23'

и

$('#myelement').val('2019-02-24');

<input type="text" class="mydatepicker" id="myelement" value="02/24/2019">

Используя методы, описанные здесь: Переопределить jQuery .val() функция? это то, что я пробовал:

(function($) {

  // options & defaults
  var defaultOptions = {
    myformat : 'mm/dd/yy'
  };

  // attach jQuery.UI datepicker with specified options
  $.fn.mydatepicker = function(options) {
    options = $.extend({}, defaultOptions, options || {});

    return this.each( function() {
      var jq = $(this);
      jq.addClass('plugin-mydatepicker').datepicker({
        dateFormat: options.myformat,
        prevText: '<i class="fa fa-angle-left"></i>',
        nextText: '<i class="fa fa-angle-right"></i>',
        constrainInput: true,
        onSelect: function(date) { 
        }
      });
    });

  }


  // override val() to get/set in ISO8601 regardless of format
  var _origVal = $.fn.val;

  $.fn.val = function(value) {
    if ( $(this).hasClass('plugin-mydatepicker') ) {
      if (arguments.length >= 1) {
        // setter
        return $(this).val('x' + value);
      } 
      else {
        // getter
        return 'x' + $(this).val();
      }
    }
    return _origVal.apply(this, arguments);
  };

})(jQuery);

Здесь происходит пара вещей:

• Я получаю ошибку "глубокая рекурсия"всякий раз, когда я вызываю val (), и я не знаю почему.Я неопытен в написании плагинов для jQuery.
• Я еще не выполнил преобразование myformat <-> iso8601, открыты для предложений о том, как это легко сделать.Практически говоря, myformat может быть ограничено мм / дд / гг и дд / мм / гг, там не нужно сходить с ума.
• Чтобы пометить каждый элемент, к которому подключен плагин, я добавляю классplugin-mydatepicker.Не уверен, что это лучший способ.
• Я видел, как некоторые люди используют опцию altFormat в DatePicker.Меня не интересует этот подход, если я могу избежать его, поскольку он требует создания второго скрытого поля ввода и синхронизации между ними.
• Я немного нервничаю по поводу переопределения функции val();Я также был бы открыт для альтернативной функции get / set в плагине, такой как mydateVal()
• Я очень открыт для использования другого плагина, который делает это, который уже существует!Просто сам не нашел ...

Помощь?

Answer 1

Я совершенно уверен, что мой ответ не тот, который вы ожидаете ... Я думаю, что вы слишком усложнили задачу здесь.Когда дело доходит до манипуляций с датами, я всегда использую moment.js .Я действительно думаю, что мой ответ намного проще, чем тот, в котором вы погрузились.

Момент действительно может легко обрабатывать различные форматы дат.Вот простая демонстрация, в которой у вас есть 3 входа, инстанцированные с помощью средства выбора даты jQuery-ui и различных форматов.

Теперь определение форматирования немного отличается между jQuery-UI datepicker и Moment ...

Поэтому я использовал 2 data-attribute , чтобы сохранить их оба.Таким образом, легко установить формат указателя даты из разметки HTML.Затем, чтобы получить дату ISO, она использует формат момента, чтобы правильно ее проанализировать и преобразовать в ISO.

$(document).ready(function() {

  // Instantiate all datepickers with their own format
  $('.mydatepicker').each(function(){
    var format = $(this).data("datepicker_format");
    console.log("Datepicker initialised with format: "+format);
    $(this).datepicker({
      dateFormat : format
    });
  });

  // A button to console log the date conversion to ISO
  $(".getDate").on("click",function(){
    var input = $(this).prev('.mydatepicker');
    
    var date = input.val();
    var format = input.data("moment_format");
    console.log("Date from the input: "+date);

    var iso_date = moment(date,format).format("YYYY-MM-DD");
    console.log("ISO date: "+iso_date);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input type="text" class="mydatepicker" id="myelement1" value="02/23/2019" data-datepicker_format="mm/dd/yy" data-moment_format="MM/DD/YYYY">
<button class="getDate">Console log the ISO date</button>
<br>
<br>

<input type="text" class="mydatepicker" id="myelement2" value="2019-02-02" data-datepicker_format="yy-mm-dd" data-moment_format="YYYY-MM-DD">
<button class="getDate">Console log the ISO date</button>
<br>
<br>

<input type="text" class="mydatepicker" id="myelement3" value="September 19, 2019" data-datepicker_format="MM dd, yy" data-moment_format="MMM Do, YYYY">
<button class="getDate">Console log the ISO date</button>
<br>
<br>

Пожалуйста, запустите приведенный выше фрагмент в режиме полной страницы .

CodePen .

---

Если вы хотите, чтобы она вызывалась как функция из любой точки (вместо кнопки):

function ISO_date(datepicker){
  return moment(datepicker.val(),datepicker.data("moment_format")).format("YYYY-MM-DD");
}

Затем вызывайте ее так:

var convertedDate = ISO_date( $("someSpecificDatePickerSelector") );  // Pass the datepicker element.