jQuery日期时间选择器设置动态minDate

Question

大家好，我正在使用trentrichardson.com提供的datetimepicker。

我有一个表单，其中包含两个输入字段：起始日期和结束日期，我希望能够动态设置“结束日期”字段的最小日期等于“起始日期”字段的值。

我知道应该使用beforeShow选项，但不知道如何实现该功能。

$('.from,.to').datetimepicker({

    beforeShow: customRange

});

编辑/解决方案

function customRange(input) {   
if (input.id == 'to') {     
var x=$('#from').datepicker("getDate");
$( ".to" ).datepicker( "option", "minDate",x ); 
} 
else if (input.id == 'from') {     
var x=$('#to').datepicker("getDate");
$( ".from" ).datepicker( "option", "maxDate",x ); 
} } 

- luca

Answer 1

你可以使用setter和getter动态地设置和获取minDate：

//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

这里有解释

- felixsigl

---

我需要确保输入框“to”中的日期值至少与“from”字段中的任何日期值相等。 - luca

Answer 2

如果您有两个带有对应ID的文本框from和to，并且您希望to的minDate是from的选定日期，则请执行以下操作：

$("#from").datepicker({
    minDate: 0, // to disable past dates (skip if not needed)
    onClose: function(selectedDate) {
        // Set the minDate of 'to' as the selectedDate of 'from'
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

$("#to").datepicker();

- Tanvir

Answer 3

您可以限制日期选择器的范围。

但是，您想在创建“从”日期选择器时设置此范围。我为您制作了一个演示（点此查看），如果我理解问题正确，它似乎可以正常工作。

- andyb

---

嗨@andyb，谢谢你的代码。但是在选择了“起始日期”和“结束日期”后，再回来重新选择“起始日期”，然后“结束日期”无法根据新选择的“起始日期”更新。你有什么解决办法吗？ - Héléna

@Elena，我在演示中没有看到这个问题。在设置了两个日期之后，将“从”日期更改为更久远的过去或在“至”日期之后，然后打开“至”日期选择器，会显示更多过去的日期或者它被设置为“从”日期。您能否详细说明问题，或者如果您可以创建一个演示，那么可以提出一个新问题吗？ - andyb

你好，在你的演示中它完美地运作了。但是当我将这些行插入到我的jQuery月份选择器（“to”日期选择部分）中时，就会出现我在第一部分中描述的问题。请看我在此链接中发布的代码：http://stackoverflow.com/questions/33411152/django-jquery-month-picker-the-to-date-not-always-updated-as-later-than-from。提前致谢。 - Héléna

Answer 4

luca: 对你的答案进行了小小的补充...

使用你建议的函数后，第一次显示datetimepicker时会忽略时间组件。如果你关闭datetimepicker并再次打开它，时间组件会神奇地重新出现。我不太确定是什么原因导致这种情况，但可以通过一些hack来解决：

function setMinMaxDate ( element )
{
    // Store current date - setting max/min date seems to destroy time component
    var val = $(element).val();

    if (element.id == 'endDate') 
    {     
        var x=$('#startDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "minDate",x ); 
    } 
    else if (element.id == 'startDate') 
    {     
        var x=$('#endDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "maxDate",x ); 
    }

    // Restore date
    $(element).val(val);
}

- Matt McDonald

Answer 5

请使用最新版本的bootstrap.min.js。

$("#from").datepicker( {
        format: "dd-mm-yyyy",
        endDate: '+0d',
        autoclose: true,
    }).on('changeDate', function(e) {
    
        var oldDate = $('.datepicker-current').val();
    
        $('#to').data('datepicker').setEndDate(oldDate);
    
    });

- manikandan

Answer 6

没有一个上面的答案对我有帮助。它们要么不起作用，要么出现了某种错误。

因此，我将它们全部合并在一起，制作了自己的答案。如上所述，我使用了moment.js，只需下载并将其包含在您的页面中即可。

$("#start_date").datetimepicker({
    format: 'Y-m-d H:00:00',
    onChangeDateTime: function(dp, $input){
        var dt2 = $('#end_date');
        var minDate = $('#start_date').val();
        var currentDate = new Date();
        var targetDate = moment(minDate).toDate();
        var dateDifference = currentDate - targetDate;
        var minLimitDate = moment(dateDifference).format('YYYY/MM/DD');
        var endDate = moment(dt2.val()).toDate();
        if((currentDate - endDate) >= (currentDate - targetDate))
            dt2.datetimepicker({
                'value': minDate
            });
        dt2.datetimepicker({
            'minDate': '-'+minLimitDate
        });
    }
});
$("#end_date").datetimepicker({
    format: 'Y-m-d H:00:00'
});

我相信有更好的方法来完成这个任务，但是我找不到。所以我希望这能对未来有所帮助。

- Chris

---

你的解决方案应该在顶部，以帮助其他人。 - Kvvaradha

Answer 7

在jQuery UI的datepicker中，有许多函数可帮助动态设置minDate或maxDate，例如onSelect和onClose。 onClose的演示已经在@Tanvir的答案中提供，请参见此处：datepicker onClose example 现在我将给您一个onSelect的例子。

在此之前，我将告诉您onSelect和onclose之间的区别。如其名称所示，onSelect在用户选择日期后立即触发，而onClose在日期选择后关闭日期选择器时触发。

这里我们有两个pickupdate1和pickupdate2，我们想将pickupdate1的选定日期设置为pickupdate2的minDate，并且它应该是动态的，因此这是代码：

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});

- Haritsinh Gohil

Answer 8

这个方法对我有效

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>

- Raghuram db

Answer 9

trentrichardson.com 上有一个示例。他们正在使用“onSelect”。对我来说，它并不完美地工作。当设置minDate或MaxDate时，时间组件被设置为0，只剩下日期。而且我还得解决一些本地化问题。

- uli78