根据一个日期选择器的选定日期设置多个日期选择器的值 [英] Set multiple datepickers' value based on one datepicker's selected date
问题描述
我已经遵循jQuery UI Datepicker示例代码
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< title> jQuery UI Datepicker - 默认功能< / title>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script>
< link rel =stylesheethref =/ resources / demos / style.css>
< script>
$（function（）{
$（＃datepicker1）。datepicker（）;
$（＃datepicker1）。change（function（）{
alert $（this）.val（））;
var date = $（this）.datepicker（）;
$（＃datepicker2）。val（option，dd-mm-yy ，$（this）.val（））;
// alert（$（＃datepicker2）.val（））;
}）;
}）;
< / script>
< / head>
< body>
< p> Date1：< input type =textid =datepicker1>< / p>
< p> Date2：< input type =textid =datepicker2>< / p>
< p> Date3：< input type =textid =datepicker3>< / p>
< p> Date4：< input type =textid =datepicker4>< / p>
< / body>
< / html>
我想根据datepicker1中选择的值设置日期选择器2,3和4的值。 p>
如果＃datepicker1有valud 12/05/2013，那么我想为每个其他jQuery datepickers显示+1日期，如下所示
datepicker1 => 12/05/2013 then
datepicker2 => 12/06/2013
datepicker3 => 12/07/2013
datepicker4 => 12/08/2013
我试过上面。
你可以帮忙吗？
你可以使用 onSelect 事件并调用 setDate 方法：
$（＃datepicker1，＃datepicker2，＃datepicker3，＃datepicker4）。datepicker（）;
$（＃datepicker1）。datepicker（option，onSelect，function（dateText，inst）{
var date1 = $ .datepicker.parseDate（inst.settings.dateFormat || $ .datepicker._defaults.dateFormat，dateText，inst.settings）;
var date2 = new Date（date1.getTime（））;
date2.setDate（date2.getDate（）+ 1 ）;
$（＃datepicker2）。datepicker（setDate，date2）;
var date3 = new Date（date1.getTime（））;
date3。 setDate（date3.getDate（）+ 2）;
$（＃datepicker3）。datepicker（setDate，date3）;
var date4 = new Date（date1.getTime ））;
date4.setDate（date4.getDate（）+ 3）;
$（＃datepicker4）datepicker（setDate，date4）;
}）;
onSelect 将日期作为字符串传递，以便我们将其转换为 JavaScript Date对象，使用以下jQuery UI datepicker实用功能：
$。datepicker。 parseDate（format，value [，settings]）
表达式：
inst.settings.dateFormat || $ .datepicker._defaults.dateFormat
意味着使用 dateFormat 在datepicker上指定的值，如果有的话;否则，请使用datepicker defaults（mm / dd / yy）中的 dateFormat 。
I have follow jQuery UI Datepicker sample code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker1").datepicker();
$("#datepicker1").change(function () {
alert($(this).val());
var date = $(this).datepicker();
$("#datepicker2").val("option", "dd-mm-yy", $(this).val());
//alert($( "#datepicker2" ).val());
});
});
</script>
</head>
<body>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
<p>Date3: <input type="text" id="datepicker3"></p>
<p>Date4: <input type="text" id="datepicker4"></p>
</body>
</html>
I want to set date pickers 2,3 and 4's value based on value selected in datepicker1.
Let say if #datepicker1 have valud 12/05/2013 then I would like to show +1 date for each other jQuery datepickers like below
datepicker1 => 12/05/2013 then
datepicker2 => 12/06/2013
datepicker3 => 12/07/2013
datepicker4 => 12/08/2013
I tried above.
Can you please help?
You can use the onSelect event and call setDate method:
$("#datepicker1, #datepicker2, #datepicker3, #datepicker4").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 1);
$("#datepicker2").datepicker("setDate", date2);
var date3 = new Date(date1.getTime());
date3.setDate(date3.getDate() + 2);
$("#datepicker3").datepicker("setDate", date3);
var date4 = new Date(date1.getTime());
date4.setDate(date4.getDate() + 3);
$("#datepicker4").datepicker("setDate", date4);
});
The onSelect passes the date as a string so we convert it to JavaScript Date object for convenience, using the following jQuery UI datepicker utility function:
$.datepicker.parseDate( format, value[, settings] )
The expression:
inst.settings.dateFormat || $.datepicker._defaults.dateFormat
means use the dateFormat value specified on the datepicker, if there is one; otherwise use the dateFormat from datepicker defaults (which is "mm/dd/yy").
这篇关于根据一个日期选择器的选定日期设置多个日期选择器的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
