Question

我有一个弹出式菜单<div class="flyout">，其中包含我的日期选择器输入。当用户在其div外部单击时，弹出菜单将关闭。当jQuery UI创建日期选择器时，它会直接在<body>标记下创建。因此，当我尝试单击日期选择器上的上一个/下一个按钮时，我的弹出菜单关闭并将日期选择器留在正文中。我不想要内联日期选择器，但我想在我的flyout div下创建我的日期选择器。有没有办法实现这个目标？

我目前的html结构

<body>
<div class="main_pane"> </div>
    <div class="flyout">
      <label class="date">date:</label> <input class="start_date" id="from"/> 
    </div>
<body>

我的约会选择器

$("#from").datepicker({
          dayNamesMin: [ "S", "M", "T", "W", "T", "F", "S" ], 
          firstDay: 1,  
          dateFormat: "d MM, yy",
          autoclose: true,
          onClose: function( selectedDate ) {
          $( "#to" ).datepicker( "option", "minDate", selectedDate );

          }
});

Answer 1

看起来jQuery UI Datepicker窗口小部件有一个暴露的事件处理程序，你可以在它创建之后进行操作，但是因为它很快完成了任务，所以应该这样做：

$(function () {
    var datePicker = $("#from").datepicker({
        dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"],
        firstDay: 1,
        dateFormat: "d MM, yy",
        autoclose: true,
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        }
    });

    // Use .appendTo() to move the element to another element.
    datePicker.datepicker("widget").appendTo($(".flyout"));
});

Demo

jQuery UI Datepicker Widget API

我可以在某个div下创建一个jQuery UI日期选择器

1 个答案: