9

右上に閉じるボタンを追加したい。

ボタンパネルの下部にある閉じるボタンは使いたくありません。

どうやってやるの？

「X」のようなものが欲しい：

ここに画像の説明を入力してください

4

6 に答える 6

9

マークアップにリンクを挿入して、必要に応じてスタイルを設定し、datepicker の組み込みメソッド.datepicker( "hide" )であるを呼び出す onclick ハンドラーをそれにアタッチできます。

$( "#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 に答える
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 に答える