jQuery UI日期选择器 - 在选择日期时更新另一个日期选择器

时间:2011-12-23 17:35:49

标签: javascript jquery jquery-ui

我有两个使用Jquery UI的日期选择器。如果用户从日期选择器1中选择日期,如何在相同日期自动更新日期选择器2?

我认为这可能很简单,但我尝试了一些事情似乎没什么用。

提前致谢。

2 个答案:

答案 0 :(得分:3)

日期选择器本质上是一个文本输入元素。您可以在第一个输入元素上使用jquery更改处理程序在它们更改时获取其内容,然后只需选择第二个输入元素并使用jquery val更新该值。

http://api.jquery.com/change/ http://api.jquery.com/val/

类似的东西:

$("#firstdatepicker").change(  function() {
   $("#seconddatepicker").val($(this).val());
});

答案 1 :(得分:1)

您需要使用onClose事件来更新第二个文本字段。

我在这里创建this fiddle有效;由于某种原因,通常在日期选择器上的样式不会进入。

HTML:

<input type="text" name="date1" value="" />
<br>
<input type="text" name="date2" value="" />

使用Javascript:

$("input[name=date1]").datepicker({
    onClose: function(dateText, inst) {
        $("input[name=date2]").val(dateText);
    }
});
$("input[name=date2]").datepicker();