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

Question

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

Display 1: 2017-01-30

Display 2: 01-30-17

但是我却得到了

Display 1: 2017-01-30, 01-30-17

Display 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 官方文档的片段

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 上绑定(bind)一个事件并填充该事件，您将转换日期，然后填充 #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/