how to disable end date range in Twitter bootstrap date picker?

Question

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.

$(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

Seems similar: http://stackoverflow.com/questions/8356358/jquery-date-picker-disable-past-dates — swinkler, May 06 '15 at 06:38
there are a lot of projects named bootstrap datepicker. which project are you using. Is this it? https://github.com/eternicode/bootstrap-datepicker/ — Aivan Monceller, May 12 '15 at 01:41

Vini · Accepted Answer · 2015-05-19T08:30:50.443

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).

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

Hope this helps.

how to disable end date range in Twitter bootstrap date picker?

1 Answers1