28

伙计们，我正在使用 trentrichardson.com 的 datetimepicker。

我有一个带有两个输入字段的表单：from和to，我希望能够动态地将 minDate 设置为我的“to”字段，等于我的“from”字段的值。

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

$('.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 ); 
} }
4

9 回答 9

34

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

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

在这里解释

于 2011-03-21T08:45:46.547 回答
19

如果您有两个具有相应 ID 的文本框，from并且to您希望minDateofto成为选定的日期，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();
于 2013-11-15T20:53:25.377 回答
3

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

但是您想在“从”上创建日期选择器时设置此范围。我给你做了一个演示，就我理解的问题而言，它似乎工作正常。

于 2011-03-21T09:05:53.733 回答
2

卢卡：你的答案的一个小补充......

使用您建议的功能，第一次显示日期时间选择器时会忽略时间组件。如果您关闭 datetimepicker 并再次重新打开它，时间组件会神秘地重新出现。我不太确定是什么原因造成的，但可以通过一些技巧来修复它：

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);
}
于 2012-02-17T05:14:22.840 回答
2

请使用最新版本的 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);
    
    });
于 2020-09-02T11:07:09.903 回答
1

在 jQuery UIdatepicker中，有许多有助于设置minDate或maxDate动态设置的函数onSelect，如onClose.

onClose@Tanvir 的答案中已经提供了演示，请参见此处：datepicker onClose 示例

所以我会给你举个例子onSelect。

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

这里我们有两个 datepickerpickupdate1和pickupdate2，我们想将选定的日期设置pickupdate1为 minDatepickupdate2并且它应该是 dynamic，所以这里是代码：

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});
于 2019-03-18T12:28:06.290 回答
1

以上答案都没有帮助我。它要么不起作用，要么出现某种错误。

所以我把它们合并在一起，做了我自己的。如上所述，我使用了 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'
});

我确信有更好的方法可以做到这一点，但我找不到。所以我希望这对未来的人有所帮助。

于 2015-09-30T12:40:25.333 回答
0

trentrichardson.com 上有一个例子。他们正在使用“onSelect”。对我来说，它不完美。设置 minDate 或 MaxDate 时，时间组件设置为 0，仅保留日期。我必须解决一些本地化问题。

于 2012-01-23T10:10:35.483 回答
0

这对我有用

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>
于 2018-06-28T05:05:45.233 回答