9

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

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

我怎样才能做到这一点？

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

在此处输入图像描述

4

6 回答 6

9

您可以在标记中插入链接并根据需要为其设置样式，将 onclick 处理程序附加到它将调用datepicker.datepicker( "hide" )的内置方法：

$( "#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; }

注意：我从这个概念证明中获取了上面的 JS 代码并相应地进行了调整。虽然没有测试过。

于 2012-04-23T15:54:50.700 回答
3

我不断收到此错误：

$.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();

...它现在关闭日期选择器！希望能帮助到你！

于 2014-03-25T13:57:20.047 回答
2

我通过设置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;
}
于 2017-10-25T09:04:42.660 回答
0

您可以通过以下方式更改按钮的位置：

    $("#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");
    });

希望能帮助到你。如果没有，请告诉我。:)

于 2012-04-23T16:04:39.697 回答
0

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

$( "[data-date-picker]" )
  .datepicker({
    showButtonPanel: true,
    closeText: "X"
  })
  .on('click', function() {
    var datepicker = $('#ui-datepicker-div')
    datepicker.prepend(datepicker.find(".ui-datepicker-buttonpane"));
  });
于 2015-06-02T19:15:20.813 回答
0

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

$("#datepicker").datepicker('hide');
于 2016-01-25T10:37:40.760 回答