読者です 読者をやめる 読者になる 読者になる

銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

日付入力スピンボタンとdatepickerとの併用

日付入力用のspinnerです。例によってjQueryjQuery UIが必要です。

datespinner:

以下のように、datepickerと同時に使えます。 datepickerだけではテキストボックスにテーマのスタイルが適用されないようですが、spinnerを使えばOKです。

datespinner(with datepicker):

ただし、この場合は、カレンダーのポップアップを、ボタンで行うようにしています。 datepickerの既定の動作では、テキストボックスがフォーカスを得た時にポップアップしますが、 これだと、spinnerのスピンボタンを押した時に、カレンダがポップアップして使い物になりません。テキストボックスにフォーカスが移ってしまうのですね。


サンプルHTML

<input type="text" name="currentDate" value='2014/10/30'/>
<input type="text" name="currentDateWithDatepicker" value='2014/10/30'/>
<script type="text/javascript">
$(function() {
    $( "[name='currentDate']" ).datespinner();
    $( "[name='currentDateWithDatepicker']" )
        .datepicker({
            showOn: "button",
             buttonText: "…",
             dateFormat: "yy/mm/dd"
         }).datespinner();

    //datepickerで追加したボタンにもテーマのスタイルを適用。
    $(".ui-datepicker-trigger").button();
});
</script>

datespiner

上記コード、Gistに置いていますので、どうぞご自由にお使いください。

広告を非表示にする