javascript - 在 JQuery Datepicker(文本字段)值选择上显示 Div

Question

当有人选择日期选择器时，我无法显示正确的 div。我注意到当我删除“只读”并禁用日期选择器，然后手动输入日期(在本例中为“2015 年 12 月 18 日，星期五”)时，它起作用了。但是当启用“只读”并且您使用日期选择器函数来选择日期时，没有任何反应。我需要 div 能够根据选择的日期来回更改。

奖金!我希望能够将多个日期添加到 java 代码中。但是，当我尝试 this.value == "Friday, 18 December, 2015", "Saturday, 19 December, 2015" 时，无论输入是什么，它都会触发 javascript。

链接 - http://jsfiddle.net/u893btef/2/

HTML

<label><strong>Delivery Date</strong></label>
<input type="text" id="datepicker" name="Datepicker1" style="border-radius:5px; font-family: 'PJFont', sans-serif; color:#333; font-size:14px; margin-bottom:-5px;">
<br>

<div id="Datepicker1_hidden_div1" style="display: block;">
  <label><strong>Delivery Time</strong></label>
  <select name="ChooseTime1" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px">
    <option selected="selected">Please Select</option>
    <option>All other options</option>
  </select>
</div>

<div id="Datepicker1_hidden_div2" style="display: none;">
  <label><strong>Delivery Time</strong></label>
  <select name="ChooseTime1" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px">
    <option selected="selected">Please Select</option>
    <option>Dec 18th Options</option>
  </select>
</div>

Java

 /* Time Select */
 document.getElementById('datepicker').addEventListener('change', function() {
   if (this.value == "Friday, 18 December, 2015") {
     document.getElementById("Datepicker1_hidden_div2").style.display = "block",
       document.getElementById("Datepicker1_hidden_div1").style.display = "none";
   } else {
     document.getElementById("Datepicker1_hidden_div1").style.display = "block",
       document.getElementById("Datepicker1_hidden_div2").style.display = "none";
   }
 });
 /* Datepicker 1 */
 $(function() {
   var array = ["Saturday, 12 December, 2015", "Saturday, 19 December, 2015"]
   $("#datepicker").datepicker({
     minDate: 3,
     maxDate: 180,
     dateFormat: "DD, d MM, yy",
     changeMonth: true,
     showButtonPanel: true,
     beforeShowDay: function(date) {
       var string = jQuery.datepicker.formatDate('DD, d MM, yy', date);
       return [array.indexOf(string) == -1]
     }
   });
 });

Answer 1

解决了

 /* Datepicker 1 */
 $(function() {
   var array = ["Saturday, 12 December, 2015", "Saturday, 19 December, 2015"]
   $("#datepicker").datepicker({
     minDate: 3,
     maxDate: 180,
     dateFormat: "DD, d MM, yy",
     changeMonth: true,
     showButtonPanel: true,
     beforeShowDay: function(date) {
       var string = jQuery.datepicker.formatDate('DD, d MM, yy', date);
       return [array.indexOf(string) == -1]
     }
   }).on("change", function() {
    if (this.value == "Friday, 18 December, 2015") {
     document.getElementById("Datepicker1_hidden_div2").style.display = "block",
       document.getElementById("Datepicker1_hidden_div1").style.display = "none";
   } else {
     document.getElementById("Datepicker1_hidden_div1").style.display = "block",
       document.getElementById("Datepicker1_hidden_div2").style.display = "none";
   };
  });
 });