extend bootstrap datepicker function smartly

Question

I'm working on date picker based on Twitter Bootstrap which using a datepicker from https://github.com/eternicode/bootstrap-datepicker .

I wanted to extend do something like which allow users to select 2 dates and update the later calendar when on change

select departure date
return date: disabled selection of dates all before departure date so that return date always stays in front of the departure date.

currently using the following, but it only work once...


$("#depart_date").datepicker(dp)
    .on('changeDate',function(ev){


        $("#return_date").datepicker({
                format:defaultDateFormat,
                autoclose:true,
                startDate: $("#depart_date").val()

            });

    });

how am i able to achieve this?

David Spence David Spence · Accepted Answer · 2012-12-21T12:35:16

I've put this together for you in jsFiddle, hopefully it fulfils your requirement. The thing to note is that there is a function setStartDate which you should use on your datepicker if you want to update the minimum date after it's been initialized.

Html

<input type="text" class="span2" value="02-16-2012" id="depart-date">
<input type="text" class="span2" value="02-16-2012" id="return-date">

JavaScript

$(function() {

    // create the departure date
    $('#depart-date').datepicker({
        autoclose: true,
        format: 'mm-dd-yyyy',
    }).on('changeDate', function(ev) {
        ConfigureReturnDate();
    });


    $('#return-date').datepicker({
        autoclose: true,
        format: 'mm-dd-yyyy',
        startDate: $('#depart-date').val()
    });

    // Set the min date on page load
    ConfigureReturnDate();

    // Resets the min date of the return date
    function ConfigureReturnDate() {
         $('#return-date').datepicker('setStartDate', $('#depart-date').val());
    }

});

Alternatively, there is a date range picker somebody has made that can be found here.

extend bootstrap datepicker function smartly

1 Answers