根據 jquery datepicker 中選擇的日期更改下拉值

Question

我想根據日期從 29-08-2020 到 08-09-2020 更改下拉值，下拉值將被更改。當用戶從日期選擇器單擊 29-08-2020 到 08-09-2020 時必須更改下拉列表的值.. Rest 用戶單擊下拉列表值時的剩余日期將有所不同.. 我該怎么做？ 這是代碼。在下面的代碼中，下拉菜單會根據日期更改。我如何根據日期更改下拉菜單。僅從 29-08-2020 到 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

您可以簡單地將29-08-2020 to 08-09-2020之間的所有日期store在一個數組中，並檢查是否使用包含方法來查看所選日期是否在those日期之間。

在此基礎上，您將append新選項添加到您的下拉列表中。 如果您的dates不是那些dates ，那么您可以在下拉列表中使用 append other value 。

現場演示：

 $(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>