Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Start Date and End Date in Bootstrap

I am using Bootstrap DatePicker. I want to Validate From Date and To Date . Start Date correctly Pick todays date.I have a Problem " To Date does not Pick the start date(ie. from date value)" .How to solve it?

  $(document).ready(function() {
    $('#fromDate').datepicker({
        startDate: new Date(),
    });

    $('#toDate').datepicker({
        startDate: $('#fromDate').val(),
    });
 });
like image 804
Aravinthan K Avatar asked Feb 07 '15 10:02

Aravinthan K


People also ask

How do you validate start and end date?

Validating start and end datetimesThe start date must be earlier than the end one. And vice versa, the end date must be later the the start one. The next sections introduce the solutions for different usages. One is for comparing date, and one for comparing time.

Does bootstrap have a Datepicker?

If you already using Bootstrap library on your project then you can easily add date picker on the element. To initialize and customize the picker you can either use data attribute or datepicker() method.


1 Answers

At the time you set $('#toDate').datepicker() , the value of $('#fromDate') is empty.

You should set default startDate and endDate variables at the begining and add changeDate event listener to your datepickers.

Eg.:

// set default dates
var start = new Date();
// set end date to max one year period:
var end = new Date(new Date().setYear(start.getFullYear()+1));

$('#fromDate').datepicker({
    startDate : start,
    endDate   : end
// update "toDate" defaults whenever "fromDate" changes
}).on('changeDate', function(){
    // set the "toDate" start to not be later than "fromDate" ends:
    $('#toDate').datepicker('setStartDate', new Date($(this).val()));
}); 

$('#toDate').datepicker({
    startDate : start,
    endDate   : end
// update "fromDate" defaults whenever "toDate" changes
}).on('changeDate', function(){
    // set the "fromDate" end to not be later than "toDate" starts:
    $('#fromDate').datepicker('setEndDate', new Date($(this).val()));
});
like image 172
Artur Filipiak Avatar answered Oct 22 '22 22:10

Artur Filipiak