Question

当有人选择日期选择器时，我无法显示正确的div。我注意到当我删除'readonly'并禁用datepicker，然后手动键入日期（在这种情况下'2015年12月18日星期五'）它的工作原理。但是当启用“readonly”并使用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();
  });

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

2 个答案: