Question

我在JSP中有以下代码，并使用knockout js绑定变量。

我的js是

 calender: function () {
     console.log("in calender");
     var dates = $("#from1, #to1").datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onSelect: function (selectedDate) {
         var option = this.id == "from" ? "minDate" : "maxDate",
             instance = $(this).data("datepicker"),
             date = $.datepicker.parseDate(
             instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
         dates.not(this).datepicker("option", option, date);
     }
 });
 },

，jsp

 <div class="DateRange">
 <label for="from">From</label>
 <input type="text" id="from" name="from" data-bind="click: calender, value:    starDate"/>
 <label for="to">to</label>
 <input type="text" id="to" name="to" data-bind="click: calender, value: endDate"/>
 </div>

当我点击开始或结束日期时，会调用日历方法，但问题是fisrt组件上第一次没有显示单击日期选择器（只是单独调用方法），无论其id是否为。从下一次单击第二个组件开始，只有datepicker正常。我在这里缺少什么东西？

Answer 1

用几句话说 1.将数据贴纸初始化移出日历方法。 2.为每个字段创建两个单独的方法，显示适当的日期标记，即：

    $("#from1, #to1").datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onSelect: function (selectedDate) {
         var option = this.id == "from" ? "minDate" : "maxDate",
             instance = $(this).data("datepicker"),
             date = $.datepicker.parseDate(
             instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
         dates.not(this).datepicker("option", option, date);

      }
    });    

    ........

    calenderFrom: function () {
     $("#from1").datepicker("show");
    }
    calenderTo: function () {
     $("#to1").datepicker("show");
    }

<input type="text" id="from" name="from" data-bind="click: calenderFrom, value:    starDate"/>
<input type="text" id="to" name="to" data-bind="click: calenderTo, value: endDate"/>

<强> UPD 我假设你使用jQueryUI datepicker。如果是这样，你真的不需要手动显示它;只是初始化它

Answer 2

它没有触发，因为输入实际上不是datapicker（），直到它第一次通过日历方法。第二次单击输入是数据选择器，因为它是在日历方法的第一次传递时设置的。

为什么不这样做而不是使用日历方法：

$("#from1, #to1").datepicker({...});

第一个组件单击时未显示日期选择器

2 个答案: