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

更新日: 公開日:2015/09/14
jQueryでカレンダーを実装

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

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

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

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

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

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

オプション内容
firstDayカレンダーの開始の曜日を指定します。
0 : 日曜日 (初期値)
1 : 月曜日
2 : 火曜日
3 : 水曜日
4 : 木曜日
5 : 金曜日
6 : 土曜日

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

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

Datepicker カレンダーを月曜始まりに変更【HTML】
<input type="text" id="xxdate" />

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

Datepicker カレンダーを月曜始まりに変更【JavaScript】
$(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 でカレンダーを月曜始まりにする方法でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。