Set startDate based on another datepicker date selection (without date-range picker)

[Ioannis S]

Hello all,

I am creating some kind of reservation system for a hotel. I have 2 separate datepickers, one for selecting the arrival date and one for selecting the departure date of the guest.

When the user sets the arrival date via the first datepicker, I would like to set the startDate property of the departure date datepicker to the arrival date, so that the guest cannot select departure date prior to arrival date. I don't want to use date-range picker for this.

Thanks in advance!

[Antti Alho]

Hi!
Something like this:

var startDate = $("#startDate").datepicker();

var endDate = $("#endDate").datepicker();
           
startDate.on('show', function (e) {
   if ($("#endDate").datepicker("getDate") != null) {
      $("#startDate").data('datepicker').setEndDate($("#endDate").datepicker("getDate"));
   }
});

endDate.on('show', function (e) {
   if ($("#startDate").datepicker("getDate") != null) {
      $("#endDate").data('datepicker').setStartDate($("#startDate").datepicker("getDate"));
   }
});

[Bharat Dangar]

I solve this by
JS

<script type="text/javascript">
    $(document).ready(function () {
        var tmp_st_dt = '1999-01-01';
        $('#start_date').change(function()
        {
            tmp_st_dt = $('#start_date').val();

            if(tmp_st_dt != '')
            {
                $('#end_date').datepicker('destroy');
                $('#end_date').val('');
                $('#end_date').datepicker({
                    format: "yyyy-mm-dd",
                    startDate: "'"+tmp_st_dt+"'",
                    endDate: "today"
                });
            }
        });

        $('#start_date').datepicker({
            format: "yyyy-mm-dd",
            endDate: "today"
        });
        $('#end_date').datepicker({
            format: "yyyy-mm-dd",
            endDate: "today"
        });
    });
</script>

HTML

<input name="start_date" class="form-control" id="start_date" data-date-format="yyyy-mm-dd" required>
<input name="end_date" class="form-control" id="end_date" data-date-format="yyyy-mm-dd" required>