jQueryUI:datepicker-如何在右上方添加关闭按钮（图！）？

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

我不想使用按钮面板底部的关闭按钮

我该怎么做

我想要像“X”这样的东西：

---

您可以在标记中插入链接，并根据需要设置其样式，在链接上附加一个onclick处理程序，该处理程序将调用

。datepicker（“隐藏”）

，datepicker的一个名称：

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

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

---

注意：我已经从上面的JS代码中提取并相应地调整了它。但尚未对其进行测试。

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

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

---

希望能有帮助。如果没有，请告诉我。：）

我一直收到这个错误：

$.datepicker.hide() is not a function

通过firebug使用@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 );
}
});

为此：

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

---

…它现在关闭日期选择器！希望有帮助

我将按钮平面移动到顶部，然后在CSS中完成其余部分

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

---

使用此选项隐藏日期选择器：

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

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

---

我通过设置

done

按钮的样式来实现这一点

首先，启用

showButtonPanel

选项，然后更改其文本：

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

然后隐藏

今日

按钮并设置关闭按钮的样式：

#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;
}

---

我想我的主要问题是为什么要添加关闭按钮？当用户单击页面上除日历以外的任何位置时，日历将关闭。如果要特别添加关闭按钮，则必须在运行时将img/按钮“.append（）”添加到控件中，并操纵datepicker CSS将其填充到标题中。因为我有一些老用户需要“X”来关闭；）这很悲哀，但如果这是唯一的方法，那么我会在运行时执行。我添加了这段代码，它成功了。但是当我们下个月去的时候。关闭按钮隐藏。在那之后我们找不到关闭按钮。当然“$.datepicker.hide（）；”也不起作用。