根据jquery datepicker中的选定日期更改下拉值

问题描述

我想基于日期更改下拉值，从29-08-2020到08-09-2020，下拉值将被更改。当用户单击从29-08-2020到08-09-2020时， datepicker的值必须更改。.用户单击下拉值时的剩余剩余日期将有所不同。.我该怎么做？这是代码。在下面的代码中，下拉列表根据日期更改。.我如何根据日期更改下拉列表。.仅从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,value) {
                        html += '<option value="' + value + '">' + value + '</option>'
                    });

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

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

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

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

                if (d[today.getDay()] == 'fri')
                    $.each(event,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>

解决方法

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

在此基础上，您将为下拉列表append添加新选项。如果您的dates是其他dates，那么您可以在下拉列表中附加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,value) {
          html += '<option value="' + value + '">' + value + '</option>'
        });
      } else {
        $.each(event,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>