具有多个 altField 和 altFormat 的 jQuery UI 日期选择器

Question

我正在尝试使用两个替代日期显示字段定义一个日期输入字段，它们都具有不同的日期格式。在下面的示例中，如果我的日期输入是 013017，那么我希望我的替代日期显示字段显示

展示1：2017-01-30

显示 2：01-30-17

但是我得到了

显示 1: 2017-01-30, 01-30-17

展示2：2017-01-30, 01-30-17

这是我的标记：

<p>Date Input: <input type="text" id="datepicker1"> </p>
<p>Display 1: <input type="text" id="alternate1" size="30"> </p>
<p>Display 2: <input type="text" id="alternate2" size="30"> </p>

这是我的 js：

$( function() {    
    $( "#datepicker1" ).datepicker({
        dateFormat: "mmddy",
        altField:   "#alternate1, #alternate2",
        altFormat:  "yy-mm-dd, mm-dd-y"
    });    
});

这是一个 jsfiddle：https://jsfiddle.net/5rqtj056/

Answer 1

altFormat 属性接受一种格式的日期，用于表示由 altField 选择器检索到的元素。 这是一个来自 jQuery UI 官方文档的 sn-p

altFormat 

Type: String
Default: ""
The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function

为此，您需要在#alternate1 上绑定一个事件并填充该事件，您将转换日期然后填充#alternate2

这里是你的新 JS 代码：

$( function() {

  $( "#datepicker1" ).datepicker({
    dateFormat: "mmddy",
    altField: "#alternate1",
    altFormat: "yy-mm-dd",
    onSelect: function(dateText) {
      $('#alternate1').trigger("change");
    }
  });  

  $("#alternate1").change(elaborateDate);
  $("#datepicker1").keyup(elaborateDate);

  function elaborateDate() {
    var alt1Date = $('#alternate1').val();
    var newDate = $.datepicker.formatDate( "mm-dd-y", new Date(alt1Date) );
    $('#alternate2').val(alt1Date);
  }

});

https://jsfiddle.net/5rqtj056/8/