5つの方法で日付形式を変更 - jQuery UI Datepicker

2024-04-02

jQuery UI DatePicker - 日付形式の変更

方法

dateFormat オプションを使用して、日付形式を指定することができます。以下の表は、書式文字と出力例を示しています。

書式文字	出力例
yy	24
yyyy	2024
mm	03
M	3
dd	30
d	30
DD	土曜日
D	土

これらの書式文字を組み合わせて、希望する日付形式を指定することができます。例えば、以下のように記述すると、日付は "yyyy年mm月dd日" 形式で表示されます。

$('#datepicker').datepicker({
  dateFormat: 'yyyy年mm月dd日'
});

$.datepicker.regional オプションを使用して、特定の地域の日付形式を指定することができます。例えば、以下のように記述すると、日付は日本語形式で表示されます。

$.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: ['日', '月', '火', '水', '木', '金', '土'],
  dateFormat: 'yy年mm月dd日'
};

$('#datepicker').datepicker({
  regional: 'ja'
});

dateFormat オプションと $.datepicker.regional オプションを同時に使用することができます。

jQuery UI Datepicker は、日付形式を簡単に変更することができます。上記の方法を参考に、希望する日付形式を設定してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Datepicker - Change Date Format</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
  <input type="text" id="datepicker">
  <script>
  $(function() {
    // 日付形式を "yyyy年mm月dd日" に設定
    $('#datepicker').datepicker({
      dateFormat: 'yyyy年mm月dd日'
    });

    // 日本語形式で表示
    $.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: ['日', '月', '火', '水', '木', '金', '土'],
      dateFormat: 'yy年mm月dd日'
    };

    $('#datepicker').datepicker({
      regional: 'ja'
    });
  });
  </script>
</body>
</html>

このコードを実行すると、以下のような画面が表示されます。

実行方法

上記のコードを HTML ファイルに保存します。
ファイルをブラウザで開きます。

動作確認

日付入力欄をクリックすると、カレンダーが表示されます。
カレンダーから日付を選択すると、選択した日付が日付入力欄に表示されます。
日付形式は "yyyy年mm月dd日" になっています。
カレンダーの表示言語は日本語になっています。

このサンプルコードを参考に、jQuery UI Datepicker を使って日付形式を変更してみてください。

jQuery UI Datepicker - 日付形式の変更

$.datepicker.formatDate() メソッドを使用して、日付を特定の形式で表示することができます。

var date = new Date();
var formattedDate = $.datepicker.formatDate('yy年mm月dd日', date);

console.log(formattedDate); // 24年03月30日

Moment.js ライブラリを使用して、日付を簡単にフォーマットすることができます。

var date = moment();
var formattedDate = date.format('YYYY年MM月DD日');

console.log(formattedDate); // 2024年03月30日

{{#formatDate date "YYYY年MM月DD日"}}
{{/formatDate}}

JavaScript の Date オブジェクトを使用して、日付をフォーマットすることができます。

var date = new Date();
var formattedDate = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';

console.log(formattedDate); // 2024年3月30日

その他のライブラリ

日付をフォーマットするためのライブラリは他にもたくさんあります。

上記以外にも、jQuery UI Datepicker を使って日付形式を変更する方法はたくさんあります。ニーズに合った方法を選択してください。

jquery jquery-ui date