Question

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

我有一个包含两个输入字段的表单：从和到，我希望能够将minDate动态设置为我的“to”字段等于该值我的“来自”领域。

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

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

    beforeShow: customRange

});

EDITED /溶液

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 ); 
} }

Answer 1

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

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

explained here

Answer 2

如果您有两个文本框，其中包含相应的ID from和to，并且您希望minDate to为所选日期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();

Answer 3

你可以restrict the datepicker range。

但是你想在“from”上创建datepicker时设置这个范围。我 made you a demo 就我理解这个问题而言似乎行得正常。

Answer 4

luca：你答案的一小部分......

使用您建议的功能，第一次显示datetimepicker时，将忽略时间组件。如果关闭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);
}

Answer 5

trentrichardson.com上有一个example。他们正在使用“onSelect”。对我而言，这不是完美的。设置minDate或MaxDate时，时间组件设置为0并且仅保留日期。我不得不解决一些本地化问题。

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'
});

我确信有更好的方法可以做到这一点，但我无法找到它。所以我希望这有助于将来的某个人。

Answer 7

这对我有用

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

Answer 8

在jQuery UI datepicker中，有许多函数可以像minDate，maxDate一样动态设置onSelect或onClose。

@Tanvir的答案中已经提供了onClose的

demo，请参见此处：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",
});

Answer 9

请使用最新版本的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);
    
    });

jquery datetime picker设置minDate动态

9 个答案: