添加复选框 jQuery UI 日期选择器的快速方法

Question

我想将复选框 "no end date" 添加到我的日期选择器小部件的末尾。我看到有人在 datepicker 下使用 "beforeshow" 方法，但它似乎不起作用。这是我的。

$("#to").datepicker({
    dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"],
    firstDay: 1,
    dateFormat: "d MM, yy",
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    },
    beforeShow: function (input, inst) {
        setTimeout(function () {
            var buttonPane = $(input)
                .datepicker("widget")
                .find(".ui-datepicker-buttonpane");
            var html = '<div class="noEndDate"><input type="checkbox"><label> No End Date </label></div>';
            buttonPane.append(html);
        }, 10);

    }
});

Answer 1

您必须设置日期选择器的按钮面板才能使用 var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");:

定位它

showButtonPanel: true,

但是正如您的图片所示，您不需要按钮面板，因此请改用：

var buttonPane = $(input).datepicker("widget");

添加复选框 jQuery UI 日期选择器的快速方法

quick way to add checkbox jQuery UI datepicker

jquery

jquery-ui

datepicker

DEMO