同时打开两个jquery日期选择器

时间:2012-05-21 13:39:32

标签: javascript jquery uidatepicker

我有两个输入字段,其中包含一个触发datepicker打开的类。两者都可以独立工作,即当我点击其中一个时,我想要在点击任一输入字段时打开两个日期选择器。

这是代码的脚本部分

    $(document).ready(function() {

                    $( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});        

这是html

<div id="quoteformcollection">
<h1>Collection</h1>

<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
    <input type="hidden" id="DepotStart" value=""/></td>

<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div> 

<div id="quoteformreturn">
<h1>Return</h1>

<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>

我自己也在尝试寻找答案,但我对jquery很陌生并且有点挣扎,所以任何帮助都会非常感激。

我还想在第一个日期选择器中选择任何值,因为第二个日期选择器中的默认日期会增加x天,这也是我不确定最好的方法。

非常感谢任何建议!

2 个答案:

答案 0 :(得分:0)

尝试使用此代码链接两个数据采集器:

$('#collectiondate').datepicker({
    dateFormat: "@",
    onSelect: function(dateText, inst) {
        var dateText = eval(dateText);
        var min = new Date();
        min.setTime(dateText);
        $('#end').datepicker('option', 'minDate', min);
    }
});

$('#returndate').datepicker({
    dateFormat: "@",
});

答案 1 :(得分:0)

我认为您必须使用日历'内联'并管理它是如何通过jQuery / Javascript弹出的。您需要将cal指向div标签以将其用于内联。

http://jqueryui.com/demos/datepicker/#inline