シーポイント システム事業部のスタッフブログ

■jQuery UI - Datepicker の主なオプション
・closeText：閉じるボタンへのテキスト (showButtonPanel を trueにした場合に有効)
・prevText：前へ戻るボタンへのテキスト
・nextText：次へ進むボタンへのテキスト
・monthNames： 月テキスト ('[1月','2月','3月...]形式)
・dayNames：曜日テキスト ( ['日曜日','月曜日','火曜日'...]形式)
・dateFormat： 選択した日付の書式 ('yy/mm/dd'など)
・showMonthAfterYear： true にした場合、年・月の順で表記

■jQuery UI - Datepicker の主なイベント
・beforeShow：カレンダー表示前に発生するイベント
・onSelect：カレンダーより日付を選択した際に発生するイベント
・onClose：カレンダーを閉じる際に発生するイベント

■簡単なサンプル
年・月・日が分かれているテキストに対して、Datepicker を利用する場合

<!-- 年・月・日の各テキストへ id を設定します -->

<input name="year" type="text" style="ime-mode:disabled; width:3em;" maxlength="4" id="year"/>年

<input name="month" type="text" style="ime-mode:disabled; width:2em;" maxlength="2" id="month"/>月

<input name="day" type="text" style="ime-mode:disabled; width:2em;" maxlength="2" id="day"/>日



<!-- Datepicker表示用として -->

<input name="dummy" type="hidden" id="datepicker"/>



<!-- Datepicker設定-->

<script type="text/javascript">

    $(

      function() {

        $('#datepicker').datepicker( {

            showOn: 'button',

            buttonImage: '../share/images/calendar.gif',

            buttonImageOnly: true,

            beforeShow : function() {

              $('#ui-datepicker-div').css( 'font-size', '70%' );

            },



            <!-- Datepicker クローズ時に、年・月・日に分解してテキストへ設定 -->

            onClose : function(date) {

              if ( date.length > 0 ) {

                $('#year').val(date.split("/")[0]);

                $('#month').val(date.split("/")[1]);

                $('#day').val(date.split("/")[2]);

              }

            }





        });



      }

    );

</script>

次回は、jQuery 本体側の機能についてまとめてみたいと思います。