jQueryUI Datepicker 不接受不同的日期格式

Question

我有两个这样的日期选择器：

<input id="periode_eind" type="date" class="datepicker" name="periode_eind" value="@Model.PeriodeTotEnMet.ToString("dd-MM-yyyy")">

然后将它们转换为jQueryUI datepickers，因为原生 HTML5 日期选择器不支持日期格式，并且必须始终采用这种格式：

// Transform native HTML datepickers to jQuery datepickers.
$(document).ready(function () {
    var datepicker = $(".datepicker");
    datepicker.datepicker();
    datepicker.datepicker('option', 'dateFormat', "dd-MM-yyyy");
});

我也尝试过将构造函数中的 dateFormat 作为属性传递，但这没有帮助，而且可能为时已晚，因为 HTML 已经初始化了日期选择器。

由于传递给日期选择器的值格式错误，因此会产生以下错误：

指定值“01-05-2016”不符合要求 格式，“yyyy-MM-dd”。

我也尝试过立即转换为 jQuery，而不是在文档就绪事件中，但这无济于事。 jQuery 文档没有提供有关如何实现日期选择器的上下文示例。

日期选择器如何实现？

Answer 1

将对datepicker() 的调用直接添加到class 选择器，然后使用dateFormat 选项指定您的日期格式。

---

示例

$( ".shortYear" ).datepicker({ 
    dateFormat: 'dd-MM-y'
});

$( ".longYear" ).datepicker({ 
    dateFormat: 'dd-MM-yy'
});

$( ".allNumbers" ).datepicker({ 
    dateFormat: 'dd-mm-yy'
});

$( ".yourRequiredFormat" ).datepicker({ 
    dateFormat: 'yy-MM-dd'
});

/*
  Simple utility classes for example styling
*/
.bordered{
  border: 1px solid black;
}

.padded{
  padding: 5px;
}

label span
{
  color: red;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<div class="bordered">
  <div class="padded">
    <label> Date (dd-MM-y)</label>
    <br />
    <input type="text" class="shortYear" size="30" >
  </div>
</div>
<br />
<div class="bordered">
  <div class="padded">
    <label> Date (dd-MM-yy)</label>
    <br />
    <input type="text" class="longYear" size="30" >
  </div>
</div>
<br />
<div class="bordered">
  <div class="padded">
    <label> Date (dd-mm-yy)</label>
    <br />
    <input type="text" class="allNumbers" size="30" >
  </div>
</div>
<br />
<div class="bordered">
  <div class="padded">
    <label><span>* Your Required Format</span><br /> Date (yy-MM-dd)</label>
    <br />
    <input type="text" class="yourRequiredFormat" size="30" >
  </div>
</div>

<input> 类型也应该是 "text" 而不是 "date"

<input id="periode_eind" type="text" class="datepicker" name="periode_eind" value="@Model.PeriodeTotEnMet.ToString("dd-MM-yyyy")">