How to disable date range date on twitter bootstrap date picker?

I want to disable the previous date. For example, if a start date is selected as 2015-04-01, the end date should start only from 2015-04-01. The 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');
});

thank

+4
source share
1 answer

As Ivan noted, there are several projects that fit the description.
Assuming you are using 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 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();
...

JSFiddle - , JSFiddle

, .

+3

All Articles