使用具有各种日期格式的jQuery Datepicker，但始终使用val（）以ISO8601格式获取/设置

Question

我正在尝试编写一个jQuery插件来显示和输入日期，使用jQuery UI的datepicker作为起点。

调用它应该如下所示：

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">

使用这里描述的技术：Override jQuery .val() function?这是我尝试过的：

(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可以限制在mm / dd / yy和dd / mm / yy，不需要在那里发疯。
• 要标记附加了插件的每个元素，我添加一个类plugin-mydatepicker。不确定这是不是最好的方法。
• 我见过一些人在datepicker中使用altFormat选项。如果我可以避免它，对这种方法不感兴趣，因为它需要创建第二个隐藏的输入字段，以及两者之间的同步。
• 我有点担心压倒val()功能;我也愿意接受插件中的替代get / set函数，例如mydateVal()
• 我非常愿意使用其他一些已经存在的插件！我自己找不到一个......

救命？

Answer 1

我很确定我的答案不是你所期望的......我认为你在这里复杂化了这项任务。说到日期操作，我总是使用moment.js。我真的认为我的答案比你潜入的更简单。

瞬间可以轻松处理各种日期格式。这是一个简单的演示，你有3个输入实例化jQuery-ui datepicker和不同的格式。

现在格式定义在jQuery-UI datepicker和Moment之间略有不同......

所以我用2个data- attributes来存储它们。因此，很容易从HTML标记中设置datepicker格式。然后，在修改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。

---

If you want it as a function to call from anywhere (instead of a button):

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.