CODEWITHSUNDEEP
htmlbootstrap-datepicker
Jay
Jay

Reputation: 37

Bootstrap Datepicker startDate and endDate

This is a date range picker. This is already working and validating startDate and endDate input values. My question is how can I put a value to the endDate field?

Ex. if startDate is selected at 2020-2-27, the endDate field will be filled up with the value 2020-2-28.

<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="startDate">
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="endDate">

This is my code. I am using the bootstrap datepicker 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<script>
var start = new Date();
var end = new Date(new Date().setYear(start.getFullYear()+1));

$('#startDate').datepicker({
    endDate   : end
}).on('changeDate', function(){
    $('#endDate').datepicker('setStartDate', new Date($(this).val()));
}); 
$('#endDate').datepicker({
    startDate : start,
    endDate   : end
}).on('changeDate', function(){
    $('#startDate').datepicker('setEndDate', new Date($(this).val()));
});
</script>

Upvotes: 1

Views: 505

Answers (1)

Atul Mathew
Atul Mathew

Reputation: 455

You can set the enddate value on startDate change Like this

$('#startDate').on('change',function(){
var today=$('#startDate').val();
var myDate = new Date(today);
 myDate.setDate(myDate.getDate() + 1);
$("#endDate").datepicker("setDate", myDate);
})

To remove the datepicker selector 

$(function(){
$("#endDate").css('pointer-events', 'none');
})

Here is a updated fiddle:https://jsfiddle.net/athulmathew/x1n5acjL/7/

Upvotes: 1

Related Questions