CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-datepicker
Sadikhasan
Sadikhasan

Reputation: 18600

BootStrap Year range

I want to specify range between two datepicker. from and to which look like following enter image description here

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

Upvotes: 2

Views: 9924

Answers (3)

Pratik Joshi
Pratik Joshi

Reputation: 11693

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

Upvotes: 5

aleha_84
aleha_84

Reputation: 8539

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

Upvotes: 0

Ferdinand Fatal
Ferdinand Fatal

Reputation: 384

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

Upvotes: 0

Related Questions