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初始化，所以可能为时已晚。

由于传递给datepicker的值格式错误，因此会产生以下错误：

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

我也试图立即转换为jQuery，而不是在文档就绪事件，但这没有帮助。 jQuery文档没有提供有关如何实现datepicker的上下文的示例。

如何实施日期选择器？

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")">

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

1 个答案:

实施例