根据 jquery 日期选择器中的所选日期更改下拉值

Question

我想根据日期从 29-08-2020 到 08-09-2020 更改下拉值，下拉值将更改。当用户点击 29-08-2020 到 08-09- 2020 从日期选择器开始，必须更改下拉列表的值。当用户单击下拉列表值时，其余剩余日期将不同。我该怎么做？这是 code.In 下面的代码，下拉列表根据日期更改。我如何根据日期更改下拉列表。仅从 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

您可以简单地 store 数组中 29-08-2020 to 08-09-2020 之间的所有日期，并使用 includes 方法检查所选日期是否在 those 日期之间.

在此基础上，您将为 drop-down append 新选项。如果您的 dates 与那些 dates 不同，那么您可以在 drop-down.

中附加 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>

根据 jquery 日期选择器中的所选日期更改下拉值

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

javascript

jquery

jquery-ui-datepicker