jQuery UI：datepicker - 如何在右上角添加关闭按钮（图片！）？答案

【问题标题】：jQuery UI: datepicker - How to add close Button (Image!) on the right top?jQuery UI：datepicker - 如何在右上角添加关闭按钮（图片！）？
【发布时间】：2012-04-23 12:09:17
【问题描述】：

我想在右上角添加一个关闭按钮。

我不想将底部的关闭按钮与按钮面板一起使用。

我该怎么做？

我想要类似“X”的东西：

【问题讨论】：

我想我的主要问题是你为什么要添加一个关闭按钮？当用户单击日历以外的页面上的任何位置时，日历将关闭。如果您想专门添加关闭按钮，则必须在运行时将 img/按钮“.append()”添加到控件，并操作日期选择器CSS 将其塞入标题中。
因为我有需要“X”关闭的老用户；）这很可悲，但如果这是唯一的方法，那么我会在运行时这样做。

标签： jquery jquery-ui datepicker

【解决方案1】：

您可以在标记中插入链接并根据需要设置其样式，并为其附加一个 onclick 处理程序，该处理程序将调用 .datepicker( "hide" )，即 datepicker 的 built-in method：

$( "#datepicker" ).datepicker({
    beforeShow: function( input ) {
        setTimeout(function() {
            var headerPane = $( input )
            .datepicker( "widget" )
            .find( ".ui-datepicker-header" );

            $( "<button>", {
                text: "Close",
                click: function() {
                  $.datepicker.hide();
                }
            }).appendTo( headerPane );
        }, 1 );
    }
});

另外，要为关闭按钮腾出空间，您可能需要调整这些样式，以便将“下个月”按钮移到左侧并为“关闭”按钮腾出空间：

.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }

注意：我已经从this proof of concept 中获取了上面的JS 代码并进行了相应的调整。不过还没有测试过。

【讨论】：

我已经添加了这段代码并且它有效。但是当我们下个月去的时候。关闭按钮隐藏。之后我们找不到关闭按钮。当然还有“$.datepicker.hide();”不工作。

【解决方案2】：

我一直收到这个错误：

$.datepicker.hide() is not a function

通过萤火虫使用@dalbaeb 的解决方案。这是正确的，但我不得不对其进行一些调整以使其关闭日期选择器。

这就是我调整它的方式，它对我有用：

$( "#datepicker" ).datepicker({
beforeShow: function( input ) {
    setTimeout(function() {
        var headerPane = $( input )
        .datepicker( "widget" )
        .find( ".ui-datepicker-header" );
        $( "<button>", {
            text: "Close",
            click: function() {

             $('#ui-datepicker-div').hide();         

            }
        }).appendTo( headerPane );
    }, 1 );
}
});

我刚换了：

$.datepicker.hide();

有了这个：

 $('#ui-datepicker-div').hide();

...它现在关闭日期选择器！希望对您有所帮助！

【讨论】：

【解决方案3】：

我通过设置 Done 按钮的样式来完成此操作

首先，启用showButtonPanel 选项，然后更改其文本：

$(".calendar").datepicker({
    showButtonPanel: true,
    closeText: '&times;'
});

然后隐藏Today按钮并设置关闭按钮的样式：

#ui-datepicker-div .ui-datepicker-current {
    display: none;
}
#ui-datepicker-div .ui-datepicker-close {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    font-size: 26px;
    line-height: 1;
    padding: 3px 8px;
    color: #cc6a6a;
    font-weight: 600;
    opacity: 0.8;
}
#ui-datepicker-div .ui-datepicker-close:focus {
    outline: none;
}
#ui-datepicker-div .ui-datepicker-close:hover {
    opacity: 1;
}

【讨论】：

【解决方案4】：

你可以这样改变按钮的位置：

    $("#id_from_date").datepicker({
        closeText: "X",
        showButtonPanel: true,
    });
    $('#id_from_date').click(function() {
        $(this).datepicker("show");
        var button = $(".ui-datepicker-close");
        $(".ui-datepicker-buttonpane").remove();
        $("#ui-datepicker-div").children().first().before(button);
        button.css("margin-left", button.parent().width() - 30 + "px");
    });

希望对您有所帮助。如果没有，请告诉我。 :)

【讨论】：

【解决方案5】：

我将按钮窗格移到顶部，然后在 CSS 中完成其余部分。

$( "[data-date-picker]" )
  .datepicker({
    showButtonPanel: true,
    closeText: "X"
  })
  .on('click', function() {
    var datepicker = $('#ui-datepicker-div')
    datepicker.prepend(datepicker.find(".ui-datepicker-buttonpane"));
  });

【讨论】：

【解决方案6】：

使用它来隐藏日期选择器：

$("#datepicker").datepicker('hide');

【讨论】：