Change the dropdown value based on the selected date in jquery datepicker

Question

I want to change the dropdown value based on the date From 29-08-2020 to 08-09-2020 the dropdown values will be changed.. When user clicks on 29-08-2020 to 08-09-2020 from the datepicker the value of the dropdown has to to be changed.. Rest remaining dates when the user clicks the dropdown value will be different..How can I do it? Here is the code.In the below code the dropdown changes based on the day.. How I can change the dropdown based on the date.. Only from 29-08-2020 to 08-09-2020

<script type="text/javascript">
    $(function () {
        var date = new Date();
        var dayNo = date.getDay();
        var mindate = (5 - dayNo);
        var d = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
        var event = ['6.00 am : English', '7.00 am : Kannada', '8.00 am: Tamil'];
        var event1 = [' 7.00 am : Kannada', '9.00 am: English', '11.00 am: Tamil'];

        //Lest assume this is  event from database
        $("#datepicker").datepicker({
            dateFormat: 'yy-mm-dd',

            minDate: mindate,
            onSelect: function (dateText, inst) {
                var today = new Date(dateText);
                var a = (d[today.getDay()]);
                $('#slDay').val(d[today.getDay()]);
                var html = '';
                $('#slDay').html('');
                if (d[today.getDay()] == 'sun')
                    $.each(event1, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'

                    });

                if (d[today.getDay()] == 'mon')
                    $.each(event, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });

                if (d[today.getDay()] == 'tue')
                    $.each(event, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });

                if (d[today.getDay()] == 'wed')
                    $.each(event, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });

                if (d[today.getDay()] == 'thu')
                    $.each(event, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });

                if (d[today.getDay()] == 'sat')
                    $.each(event, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });

                if (d[today.getDay()] == 'fri')
                    $.each(event, function (index, value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });
                $('#slDay').append(html);
            }

        });
    });
</script>

<div class="form-group col-md-12 text">
    <label >Select Date<span style="color:red";> * </span></label>
    <input type="text" class="form-control" id="datepicker" name="date" min="<?php echo date('Y-m-d', strtotime("+2 days")); ?>" />
</div>
<div class="form-group col-md-12 text">
    <label>Select Mass<span style="color:red";> * </span></label>
    <select class="form-control" required="" id='slDay' name="day">
        <option value="">---SELECT---</option>
    </select>
</div>

Answer 1

You can simply store all your dates between 29-08-2020 to 08-09-2020 in an array and check that using includes method to see if the the selected date is between those date.

On that basis you will append new option to your drop-down. If your dates are other then those dates then you can append other value in the drop-down.

Live Demo:

 $(function() { var date = new Date(); var dayNo = date.getDay(); var mindate = (5 - dayNo); var d = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; var event = ['6.00 am: English', '7.00 am: Kannada', '8.00 am: Tamil']; var event1 = [' 7.00 am: Kannada', '9.00 am: English', '11.00 am: Tamil']; var event3 = [' 11.00 am: Kannada', '12.00 am: English', '13.00 am: Tamil']; var custDate = ['2020-08-29', '2020-08-30', '2020-08-31', '2020-09-01', '2020-09-02', '2020-09-03', '2020-09-04', '2020-09-05', '2020-09-06', '2020-09-07', '2020-09-08']; //Lest assume this is event from database $("#datepicker").datepicker({ changeMonth: true, dateFormat: 'yy-mm-dd', minDate: mindate, onSelect: function(dateText, inst) { var today = new Date(dateText); var a = (d[today.getDay()]); $('#slDay').val(d[today.getDay()]); var html = ''; $('#slDay').html(''); if (custDate.includes(dateText)) { $.each(event3, function(index, value) { html += '<option value="' + value + '">' + value + '</option>' }); } else if (d[today.getDay()] == 'sun') { $.each(event1, function(index, value) { html += '<option value="' + value + '">' + value + '</option>' }); } else { $.each(event, function(index, value) { html += '<option value="' + value + '">' + value + '</option>' }); } $('#slDay').append(html); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" integrity="sha512-cViKBZswH231Ui53apFnPzem4pvG8mlCDrSyZskDE9OK2gyUd/L08e1AC0wjJodXYZ1wmXEuNimN1d3MWG7jaQ==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css" integrity="sha512-YqF4f2cbm2jH7sEEu/iDJFjSQ/qUSzoiQIK2OQ3OFTsQQE5dxoCTYz1wZrTMv8ES8NYqOB5ChZU8jQdMaEv/yg==" crossorigin="anonymous" /> <div class="form-group col-md-12 text"> <label>Select Date<span style="color:red";> * </span></label> <input type="text" class="form-control" id="datepicker" name="date" min="" /> </div> <div class="form-group col-md-12 text"> <label>Select Mass<span style="color:red";> * </span></label> <select class="form-control" required="" id='slDay' name="day"> <option value="">---SELECT---</option> </select> </div>