日付入力スピンボタンと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>
datespiner
上記コード、Gistに置いていますので、どうぞご自由にお使いください。