Question

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

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

我该怎么做？

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

enter image description here

Answer 1

您可以在标记中插入链接并根据需要设置样式，为其添加一个onclick处理程序，它将调用.datepicker( "hide" )，built-in method的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 );
    }
});

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

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

注意：我已从this proof of concept获取上述JS代码并相应地进行了调整。虽然没有测试过。

Answer 2

我一直收到这个错误：

$.datepicker.hide() is not a function

使用@dalbaeb解决方案通过firebug。这是对的，但我不得不稍微调整它以关闭datepicker。

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

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

...它现在关闭了datepicker！希望它有所帮助！

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

Answer 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");
    });

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

Answer 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"));
  });

Answer 6

使用此隐藏日期选择器：

<? php 

function connectDB() {
    $hostname = 'xxxxxxxx';
    $db = 'xxxxxxx';
    $user = 'xxxxxxxx';
    $pass = 'xxxxxxx';

    $dbh = new PDO("mysql:host=$hostname; dbname=$db; charset=utf8", $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)); 

    $sql = "//my query";

    $query = $dbh->prepare($sql);
    $query->execute(array('//value','//value'));            
    $query->setFetchMode(PDO::FETCH_ASSOC);

    while ($r = $query->fetch()):

        $GLOBALS['var1'] = $r['column1']; 
        $GLOBALS['var2'] = $r['column2'];
        $GLOBALS['var3'] = $r['column3'];
        $GLOBALS['var4'] = $r['column4'];
        $GLOBALS['var5'] = $r['column5'];

    endwhile;                                                       

}

?>

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

6 个答案: