End date must be equal and greater than start selected date in boostrap

3
votes

Requirements - End date must be equal and greater then start selected start date in boostrap datepicker and before selected start date disable.

Problem - its possible in jquery date but I want to know how to make in boostrap date.

my boostrap code is 

 $('#start_date').datepicker({autoclose: true,startDate: new Date()});
 $('#end_date').datepicker({autoclose: true,startDate: new Date()});

for reference check jquery code Fiddle

Note - I want exact implemention of this picker in bootstrap Can anyone help me?

1
datepicker

1 Answers

12
votes

Please check out this JSFiddle demo. I have placed the code below that uses bootstrap datepicker.

$(".from_date").datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
}).on('changeDate', function (selected) {
    var startDate = new Date(selected.date.valueOf());
    $('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
    $('.to_date').datepicker('setStartDate', null);
});

$(".to_date").datepicker({
   format: 'yyyy-mm-dd',
   autoclose: true,
}).on('changeDate', function (selected) {
   var endDate = new Date(selected.date.valueOf());
   $('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
   $('.from_date').datepicker('setEndDate', null);
});