jQuery UI の Datepicker でカレンダーを月曜始まりにする方法

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。基本となる実装方法、ならびに日本語対応の手順については、次のページを参照ください。

jQuery UI でカレンダーを表示する Datepicker の使い方！テキストボックスの日付入力が簡単になる？！

テキストボックスの日付入力をカレンダーから選択できるようにしたい！そんな要望を叶えてくれるのが JavaScript の拡張ライブラリ jQuery UI の Dat...

Datepicker で表示されるカレンダーは初期設定で「日曜始まり」になっています。一般向けであればこのままで何も問題ありませんが、企業向けシステムの場合「月曜始まり」にして欲しいと要望を受けることがあります。

そんな場合でも Datepicker のプラグインであれば、オプション設定により開始曜日を変更することができます。更に月曜だけでなく、特定の曜日から開始するカレンダーを表示させることも可能です。

では、具体的なオプション設定の方法について解説していきましょう。

Datepicker でカレンダーを月曜始まりにする

開始曜日を変更するオプション設定

オプション項目は Datepicker 呼び出し時の引数として設定します。 {} カッコでくくり「オプション名 : 設定値」のフォーマットで書きます。今回の例では１つしか設定しませんが、複数オプションを設定する場合はカンマ区切りで指定します。

では月曜始まりカレンダーを表示させるサンプルプログラムをご覧ください。

<input type="text" id="xxdate" />

テキストボックスの属性は id ではなく class でも大丈夫です。同一画面上に複数のカレンダー入力項目がある場合は、class で指定したほうが便利です。

$(function() {
  $("#xxdate").datepicker( {
    firstDay: 1     // 月曜始まり
  } );

  // 日本語化
  $.datepicker.regional['ja'] = {
    closeText: '閉じる',
    prevText: '<前',
    nextText: '次>',
    currentText: '今日',
    monthNames: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    dayNamesShort: ['日','月','火','水','木','金','土'],
    dayNamesMin: ['日','月','火','水','木','金','土'],
    weekHeader: '週',
    dateFormat: 'yy/mm/dd',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'};
  $.datepicker.setDefaults($.datepicker.regional['ja']);
});

日本語化のソース（6～25行目）は不要であれば削除してください。

月曜始まりのカレンダーを表示するサンプル

前述の通り、オプション設定値に応じて他の曜日から開始することも可能です。ただ、他の曜日から始まるカレンダーを見かける機会がないため、利用者の混乱を避けるために「日曜始まり」もしくは「月曜始まり」のどちらかを利用するようにしましょう。

以上、jQuery UI の Datepicker でカレンダーを月曜始まりにする方法でした。