更改jQuery UI的日期选择器的格式会中断与选择列表的同步 [英] Changing the format of jQuery UI's datepicker breaks synchronisation with a select list
问题描述
多亏了techfoobar,我有一个带同步输入字段和选择列表的日期选择器.
Thanks to techfoobar, I have a datepicker with a synchronised input field and a select list.
但是,当我将日期格式更改为"yy-mm-dd"时,它停止工作.选择列表中的更改会触发输入中的更改,但是单击日期选择器不会更新选择列表.
However, when I have changed the format of the date to "yy-mm-dd", it stopped working. A change in the select list triggers the change in the input, but clicking the datepicker won't update the select list.
这是脚本:
$(function() {
$('#selectedDatepicker').datepicker({
dateFormat: "yy-mm-dd",
beforeShow: readSelected, onSelect: updateSelected,
minDate: new Date(2013, 1 - 1, 1), maxDate: new Date(2013, 06 - 1, 31),
numberOfMonths: 3,
showButtonPanel: true,
showOn: 'both', buttonImageOnly: true, buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'});
// Prepare to show a date picker linked to three select controls
function readSelected() {
$('#selectedDatepicker').val($('#selectYear').val() + '-' +
$('#selectDay').val());
return {};
}
// Update three select controls to match a date picker selection
function updateSelected() {
var date1 = $(this).val();
console.log(date1.substring(3, 5));
console.log(date1.substring(6, 10));
$('#selectDay').val(date1.substring(3, 5));
$('#selectYear').val(date1.substring(6, 10));
}
$('select').change(readSelected);
});
这是HTML代码:
<select id="selectDay">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
...
</select>
<select id="selectYear">
<option value="2013-01">January 2013</option>
<option value="2013-02">February 2013</option>
<option value="2013-03">March 2013</option>
<option value="2013-04">April 2013</option>
<option value="2013-05">May 2013</option>
<option value="2013-06">June 2013</option>
</select>
<p>Date: <input type="text" id="selectedDatepicker" /></p>
您可以在此处查看小提琴:
You can check the fiddle here:
此问题来自何处?这两个字段的格式设置都相同.
Where does this problem come from? Both of the fields have the same format set.
推荐答案
您试图在select元素中选择的值不存在,因为子字符串产生的值与原始值不同.您需要相应地调整substr
.
The value you are trying to select in the select element does not exist, because the substring yields a different value than it originally did. You need to adjust your substr
accordingly.
function updateSelected() {
var date1 = $(this).val();
console.log(date1.substring(8));
console.log(date1.substring(0, 4));
$('#selectDay').val(date1.substring(8));
$('#selectYear').val(date1.substring(0, 7));
}
这篇关于更改jQuery UI的日期选择器的格式会中断与选择列表的同步的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!