Javascript 在JQuery日期选择器（文本字段）值选择上显示Div

当有人选择日期选择器时，我很难找到正确的div来显示。我注意到，当我删除“readonly”并禁用日期选择器，然后手动键入日期（在本例中为“2015年12月18日，星期五”）时，它可以工作。但当启用“只读”并使用datepicker函数选择日期时，不会发生任何事情。我需要div能够根据选择的日期来回更改

奖金！我希望能够在java代码中添加多个日期。但是，当我尝试

this.value==“2015年12月18日星期五”、“2015年12月19日星期六”

时，无论输入是什么，它都会触发javascript

链接-

HTML

---

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

您可以在这里找到相同的JSFIDLE：

这是代码

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();
  });

解决了

 /* 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";
   };
  });
 });

---

你好感谢您的回复：-）但是，我无法获得您提供的代码，以便在JSFIDLE或其他应用程序中工作。唯一可行的方法是手动输入日期（即2015年12月18日星期五）。这似乎与天气无关，我在输入标签上附加了“readonly”选项。无论出于何种原因，当我使用日期选择器选择日期时，它无法启动“更改”功能。以下是我目前正在处理的问题--您会注意到，当您选择“2015年12月18日，星期五”时，它无法启动。

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();
  });

 /* 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";
   };
  });
 });