从替代字段填充 jquery ui datepicker datefield

Question

我一直想知道你是怎么做到的。我将 datepicker 的替代字段的值保存到数据库（以 MySQL 日期格式）。如果我从数据库中得到它，我可以用它填充 altField。但是实际的 datepicker 字段仍然是空的。我必须从数据库中对其进行格式化并填充该字段。但是日期选择器不应该这样做吗？有可能吗？

//html
// {$dbDate.expires} = '2016-01-01'
// {$dbDate.expires_formatted} = '01.01.2016'
<input type="hidden" name="expires" value="{$dbDate.expires}">
<input type="text" class="datepicker"> //should display the value "01.01.2016"
<input type="text" class="datepicker" value="{$dbDate.expires_formatted}"> //this is what I currently do instead

//js
.datepicker({
    altField : $(document).find('input[name="expires"]'),
    altFormat : "yy-mm-dd"
 }, $.datepicker.regional['someRegional']);

https://jsfiddle.net/mkxcqub6/ - 这个小提琴展示了它应该如何工作。除了这里，您会看到问题是日期最初的格式不正确（因为来自 db 的格式与显示的格式不同）。日期选择器中选定的日期也是当前日期，而不是来自数据库的日期。

https://jsfiddle.net/mkxcqub6/1/ - 这个小提琴展示了我现在正在做的事情。我从数据库中以两种格式获取日期。 MySQL 可以处理它并采用用户定义的格式。这样，日期选择器也会显示选定的日期。

Answer 1

我建议通过setDate 和defaultDate 执行此操作。请参阅工作示例：https://jsfiddle.net/Twisty/ht87Lvqv/

HTML

<input type="hidden" name="expires" value="2012-06-01">
<label for="startDate">Date :</label>
<input class="date-picker" />

JQuery

$(function() {
  var $inp = $("input[name='expires']").val();
  var YY = parseInt($inp.substring(0, 4));
  var MM = parseInt($inp.substring(5, 7)) - 1;
  var DD = parseInt($inp.substring(9,11));
  var myDate = $inp != "" ? new Date(YY, MM, DD) : new Date();
  $('.date-picker').datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: myDate
  }).datepicker("setDate", myDate);
});

请记住，Date 使用 0 - 11 个月的数组。

编辑

在您更新之后，仍然有点不清楚您想如何使用这些字段，但我希望这有助于使备用字​​段更加清晰：

https://jsfiddle.net/Twisty/ht87Lvqv/1/

HTML

Hidden: <input type="text" class="hidden" name="expires" value="2016-01-01">
Normal: <input type="text" class="datepicker" id="current">
Formatted: <input type="text" class="datepicker" id="formatted" value="01.01.2016">

JQuery

$(function() {
  var $inp = $("input[name='expires']").val();
  var YY = parseInt($inp.substring(0, 4));
  var MM = parseInt($inp.substring(5, 7)) - 1;
  var DD = parseInt($inp.substring(9,11));
  var myDate = $inp != "" ? new Date(YY, MM, DD) : new Date();
  $("#current").datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: myDate,
    altField : $("#formatted"),
    altFormat : "dd.mm.yy"
  }).datepicker("setDate", myDate);
});

当您现在选择一个日期时，它会在#formatted 字段中放置一个交替格式的日期。我强烈建议您在字段中使用 ID。