BootStrap Year range

Question

I want to specify range between two datepicker. from and to which look like following

In above image I selected from year as 2011 and now I do not want to select to year is less than from year. How can achieve this.

Code

$('#from').datepicker({
        format: "yyyy",
        autoclose: true,
        minViewMode: "years"
});

$('#to').datepicker({
        format: "yyyy",
        autoclose: true,
        minViewMode: "years"
});

JS Fiddle

Answer 1

check Fiddle

Code

$('#from').datepicker({
        format: "yyyy",
        autoclose: true,
        minViewMode: "years"
})    .on('changeDate', function(selected){
        startDate =  $("#from").val();
        $('#to').datepicker('setStartDate', startDate);
    }); 
;


$('#to').datepicker({
        format: "yyyy",
        autoclose: true,
        minViewMode: "years"
});

See

 on('changeDate', function(selected){
     startDate =  $("#from").val();
     $('#to').datepicker('setStartDate', startDate);
}); 

Logic:

Here after i select From year ,I set its minimum Year set by From Datepicker using $('#to').datepicker('setStartDate', startDate); .

Answer 2

since this is a common problem there are many posts about this problem so far. Most of them are nearly exact the same as yours.

you can check this one for example its also written with ajax / jQuery jQuery Date Picker - disable past dates

this one is espacialy about disabling past dates on the datepicker: disable past dates on datepicker

so its more or less duplicated question where you can get a fix to this problem from already asked questions.

See the API for further information about the minDate: http://jqueryui.com/datepicker/#option-minDate

i guess a fix check would be to set the minDate something like this (credits to Dasun who wrote this piece of Code in the link given above)

minDate: dateToday Or minDate: '0' is the key here. Try to set the minDate property.

$(function() {
    $( "#datepicker" ).datepicker({
            numberOfMonths: 2,
            showButtonPanel: true,
            minDate: dateToday // minDate: '0' would work too
        });
});

Answer 3

Here is a demo

You just neet to specify your 'from' datepicker's onSelect propery:

onSelect: function(){
    $('#to').datepicker('option', 'minDate', new Date($(this).datepicker("getDate").getFullYear(),0,1));       
}