Question

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

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

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/

带有多个altField和altFormat的{jQuery UI datepicker

1 个答案: