Datepicker在选择特定日期时在下拉列表中显示不同的值

时间:2016-08-30 07:28:53

标签: javascript jquery ajax datepicker

我有一个日期选择器和一个具有不同投放时间的下拉菜单。基本上,当用户点击从周一到周五的任何一天时,下拉计时菜单有4个值。但是当用户点击星期六时,下拉计时菜单将有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个内容,即datepicker,form和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个时段。

谢谢。

1 个答案:

答案 0 :(得分: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>

你只需要使用新的Date()。getDay()来确定哪一天是在datetimepicker,如果当天是6,那就是星期六,那么只附加3个选项,否则为所有工作日所有其他4个选项

或 最好的方法是将请求中的一周传递到你的php页面,在那里你可以在php中写出相应的日期逻辑,也可以在查询参数中传递日期并检查php中的每个条件,这对于安全性观点是有益的还