如何在Twitter引导日期选择器中禁用结束日期范围?

时间:2022-09-26 11:26:53

I want to disable the previous date. For example, If selected the start date as 2015-04-01, end date should start from 2015-04-01 only. Previous date should be disabled.

我想禁用上一个日期。例如,如果选择开始日期为2015-04-01,则结束日期应仅从2015-04-01开始。应禁用上一个日期。

$(document).ready(function () {
    var nowdate = new Date();
    var now = new Date(nowdate.getFullYear(), nowdate.getMonth(), nowdate.getDate(), 0, 0, 0, 0);
    var startdate = $("#start_date").datepicker({
        format: 'yyyy-mm-dd',
        onRender: function (date) {
            return date.valueOf() > now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        startdate.hide();
    }).data('datepicker');
    var enddate = $("#end_date").datepicker({
        format: 'yyyy-mm-dd',
        onRender: function (date) {
            return date.valueOf() > now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        enddate.hide();
    }).data('datepicker');
});

Thanks

1 个解决方案

#1


As Aivan mentioned, there are several projects that match the description.
Assuming that you are using the bootstrap-datepicker here. You can use the "changeDate" event to capture the selected date and set it as the 'start date' for the second datepicker on the page (using the 'setStartDate' method).

正如Aivan所说,有几个项目符合描述。假设您在这里使用bootstrap-datepicker。您可以使用“changeDate”事件捕获所选日期,并将其设置为页面上第二个日期选择器的“开始日期”(使用“setStartDate”方法)。

Something like in the snippet below:

类似下面的代码段:

...
$(".dateStart").datepicker().on("changeDate",function(){
    // Get the selected date
    var startDt = $(".dateStart").datepicker("getDate");
    // Set the 'start date' for the second datepicker 
    $(".dateEnd").datepicker("setStartDate",startDt);
});

$(".dateEnd").datepicker();
...

I have created a JSFiddle for this - you can see it working here JSFiddle

我为此创建了一个JSFiddle - 你可以看到它在这里工作JSFiddle

Hope this helps.

希望这可以帮助。

#1


As Aivan mentioned, there are several projects that match the description.
Assuming that you are using the bootstrap-datepicker here. You can use the "changeDate" event to capture the selected date and set it as the 'start date' for the second datepicker on the page (using the 'setStartDate' method).

正如Aivan所说,有几个项目符合描述。假设您在这里使用bootstrap-datepicker。您可以使用“changeDate”事件捕获所选日期,并将其设置为页面上第二个日期选择器的“开始日期”(使用“setStartDate”方法)。

Something like in the snippet below:

类似下面的代码段:

...
$(".dateStart").datepicker().on("changeDate",function(){
    // Get the selected date
    var startDt = $(".dateStart").datepicker("getDate");
    // Set the 'start date' for the second datepicker 
    $(".dateEnd").datepicker("setStartDate",startDt);
});

$(".dateEnd").datepicker();
...

I have created a JSFiddle for this - you can see it working here JSFiddle

我为此创建了一个JSFiddle - 你可以看到它在这里工作JSFiddle

Hope this helps.

希望这可以帮助。