当用作日期范围时，防止jQuery UI datepicker更新2位数年份到4位数年份

Question

我遇到了与jQuery UI datepicker相关的奇怪的UX问题。我使用jQuery UI datepicker作为具有开始日期和结束日期文本字段的日期范围。

一切都很好。我们有严格的格式，只接受m / d / yyyy格式或mm / dd / yyyy格式的日期，而不是m / d / yy或mm / dd / yy。

所以基本上它只接受4位数年份的日期。

我们的一位设计师注意到，如果您输入am / d / yy或mm / dd / yy并点击提交按钮，表单会显示无效的日期格式错误，但它似乎是jQuery UI＆＃39; s datepicker将用户输入的2位数年份的日期转换为4位数的日期（m / d / yy变为m / d / yyyy）但低于该值是告知用户输入正确格式等的错误消息，因为用户最初输入的日期为m / d / yy或mm / dd / yy。

这会引起一些混乱。当jQuery UI datepicker用作日期范围时，我才发现这个问题。使用日期选择器作为单个字段时，当用户提交表单时，它不会将从mm / dd / yy输入的日期重新格式化为mm / dd / yyyy。

我认为在我如何编码可能导致这种情况的日期范围时必须有一些逻辑，但我不确定是什么。

下面是我的代码设置。

(function() {

// Settting up default options for all datepicker instances
$.datepicker.setDefaults({
  changeMonth: true,
  changeYear: true,
  prevText: 'Previous month',
  nextText: 'Next month',
  showOtherMonths: true,
  selectOtherMonths: true,
  showOn: 'button',
  buttonText: '<span class="visuallyhidden">Launch Date Picker</span>',
  dateFormat: "m/d/yy"
});

// Selector for text inputs which will be enhanced with a datepicker pop-up calendar
var datepickerInput = $('[data-toggle="datepicker"] input[type="text"]');

// In Chrome, if you are using the arrow keys and activate a date which causes
// Chrome to autocomplete a date, the up and down arrow keys stop working.
// The code below prevents browsers from autocompleting dates in date pickers
// when javascript is enabled
datepickerInput.attr("autocomplete", "off");

// Inits datepicker on inputs
datepickerInput.datepicker();

// Loop through all date ranges on the page
$('.js-daterange').each(function(){


// Grab all the inputs in a daterange
var dateRangeInputs = $(this).find('[data-toggle="datepicker"] input[type="text"]'),
    // Set up var for first text input (Start date)
    dateRangeInput0 = dateRangeInputs[0],
    // Set up var for second text input (End date)
    dateRangeInput1 = dateRangeInputs[1];

// Sets up restricted dates on date range field
$( dateRangeInput0 ).datepicker("option", {
  onClose: function( selectedDate ) {
    $( dateRangeInput1 ).datepicker( "option", "minDate", selectedDate );
  }
});

$( dateRangeInput1 ).datepicker("option", {
  onClose: function( selectedDate ) {
    $( dateRangeInput0 ).datepicker( "option", "maxDate", selectedDate );
  }
});

});