Bootstrap Datepicker startDate and endDate

Question

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>

Atul Mathew · Accepted Answer · 2020-02-29 04:33:24Z

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/

almost ok but. end date is filling up the values. But I can still select the startDate value on the endDate field. how to disable?
apologize for the late replay I have updated the code and fiddle as per your needs do check and consider making it answer if that is a solution

Collectives™ on Stack Overflow

Bootstrap Datepicker startDate and endDate

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related