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

日付入力用のspinnerです。例によってjQueryとjQuery 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>