在 JQuery Datepicker（文本字段）值选择上显示 Div

Question

当有人选择日期选择器时，我无法显示正确的 div。我注意到当我删除“只读”并禁用日期选择器，然后手动输入日期（在本例中为“2015 年 12 月 18 日星期五”）时，它可以工作。但是，当启用“只读”并且您使用 datepicker 函数选择日期时，什么也不会发生。我需要 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";
   };
  });
 });

Answer 2

启用 readonly true 时，不能将其用作选择。所以我给出了一个备用选项，如果你不喜欢任何用户可以输入，只需通过 datepicker 输入。

你可以在这里找到相同的 jsfiddle：https://jsfiddle.net/rg659f4a/

这里是代码。

window.onload = function () {
        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";
            }
        });
    }
    $(document).ready(function(){
        alert('hi');
        $('#datepicker').keyup(function(e){
                $(this).val('');
        });
    });
    $(function() {
    $( "#datepicker" ).datepicker();
  });