jQuery DatePicker - 2 个字段答案

【问题标题】：jQuery DatePicker - 2 FieldsjQuery DatePicker - 2 个字段
【发布时间】：2009-08-13 23:49:52
【问题描述】：

我目前正在使用 jQuery 并使用 datepicker。

我有两个输入字段：开始日期和结束日期。单击每个时，日期选择器会弹出。

对于“结束日期”字段，我希望 jQuery 日期选择器突出显示同一天。例如，如果用户选择 2009 年 8 月 12 日作为开始日期，那么对于结束日期，他们不能选择 8/12/09 之前的任何内容。

这是我目前拥有的：

$("#datepicker").datepicker({minDate: +5, maxDate: '+1M +10D', changeMonth: true});
var startDate = $("#datepicker").val();
var the_date = new Date(startDate);
$("#datepicker2").datepicker({ minDate: the_date });

不幸的是，这不起作用。

我发现如果我“硬编码”其中的值，例如：

$("#datepicker2").datepicker({ minDate: new Date("08/12/2009") });

它会正常工作的。关于如何将“开始日期”传递给“结束日期”选择器的任何想法？

谢谢！

【问题讨论】：

标签： php jquery jquery-ui datepicker

【解决方案1】：

这行不通

您需要一个来自日期选择器的回调函数来处理“picking”事件。在此事件之前，您的 startDate 将为空。

试试这个：

$("#datepicker").datepicker({
     minDate: +5, 
     maxDate: '+1M +10D', 
     changeMonth: true, 
     onSelect: function(dateText, inst){
               var the_date = new Date(dateText);
               $("#datepicker2").datepicker('option', 'minDate', the_date);
     }
 });
 $("#datepicker2").datepicker(); // add options if you want

【讨论】：

【解决方案2】：

开始日期结束日期 http://rowsandcolumns.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html

【讨论】：

【解决方案3】：

不同用户的日期时间文化会有所不同。 jquery ui minimum 不适用于上述代码。最初，如果我选择结束日期，则不会为结束日期设置最短日期。

<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#tbStartDate").datepicker({
            //minDate: +5, 
            //maxDate: '+1M +10D', 
            //changeMonth: true,
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate')));
            },
            onClose: function (dateText, inst) {
                //$("#StartDate").val($("#tbStartDate").val());
            }
        });

        $("#tbEndDate").datepicker({
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onClose: function (dateText, inst) {
                //$("#EndDate").val($("#tbEndDate").val());
            }
        });

        $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate')));
    });
</script>

【讨论】：