选择特定日期时，日期选择器在下拉列表中显示不同的值答案

【问题标题】：Datepicker to show different value in dropdown when a specific day is chosen选择特定日期时，日期选择器在下拉列表中显示不同的值
【发布时间】：2017-01-06 09:01:12
【问题描述】：

我有一个日期选择器和一个包含不同交货时间的下拉菜单。基本上，当用户在周一到周五的任何一天点击时，下拉时间菜单有 4 个值。但是当用户点击 Sat 时，下拉计时菜单将有 3 个值。

以下是我的代码。（请注意，我已经进行了更改，例如禁用星期日和过去的日期）

<script>
$( function() {
    $("#datepicker").datepicker({
        minDate: new Date(),
        beforeShowDay: function(date) {
            var day = date.getDay();
            return [(day != 0), ''];
        }
    });
    } );
</script>

<form name="checkout">
<input type="text" name="datepicker" id="datepicker" placeholder="Date of Delivery" onBlur="getWeekday();">

<div id="weekday">
    <select name="time">
        <option value="slot1">9am - 11am</option>
        <option value="slot2">11am - 2pm</option>
        <option value="slot3">2pm - 5pm</option>
        <option value="slot4">7pm - 10pm</option>
    </select>
</div>

<script>
function getWeekday() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("weekday").innerHTML = xhttp.responseText;

    }
  };
  xhttp.open("GET", "_weekday.php", true);
  xhttp.send();
}
</script>


</form>

如您所见，在我的代码中，我有 3 个东西，即日期选择器、表单和 ajax 代码。

这正是 _weekday.php 中的内容

<select name="time">
    <option value="slot1">9am - 11am</option>
    <option value="slot2">11am - 2pm</option>
    <option value="slot3">2pm - 5pm</option>
</select>

所以基本上，现在它的作用是默认情况下，下拉菜单中有 4 个时隙，但是当用户点击日期选择器时，它将有 3 个时隙。

所以我的问题或者更确切地说是我需要的帮助是，我该如何做到这一点，只有当在日期选择器上单击任何星期六时，ajax 才会激活并显示 3 个时隙而不是默认的 4 个. 但是，如果是其他任何一天，那么它仍然是 4 个时间段。

谢谢。

【问题讨论】：

你能分享一下小提琴吗

标签： javascript jquery ajax datepicker

【解决方案1】：

<script>
function getWeekday() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var pickedDate = new Date($('#datepicker').val());
   if(pickedDate.getDay() == 6){
//Write code for 3 option in select
   }
    else{
//Write code for 4 option in select
}

    }
  };
  xhttp.open("GET", "_weekday.php", true);
  xhttp.send();
}
</script>

您只需要使用 new Date().getDay() 来查看 datetimepicker 中的哪一天，如果当天是 6，即星期六，则仅附加 3 个选项，否则对于所有工作日所有其他 4 个选项

或最好的方法是将请求中的星期几传递到您的 php 页面，您可以在 php 中编写相应的日期逻辑，也可以在查询参数中传递日期并检查 php 中的每个条件，这将有利于安全观点还有

【讨论】：