こんにちは、Yです。

入社６か月の新入社員です。

 

最近Account Engagementについて触れる機会が出てきました。

その中で日付項目が少々使いにくさを感じたため、今回はそれを題材にしようと思いました。

ここからAccount Engagementの日付項目に表示されるDatepickerを日本語化、日付の選択範囲の設定をする方法を解説します。

 

日付の選択範囲をカスタムする方法

 

上記がフォームに日付項目を追加しただけの状態です。

 

デフォルトだとDatepickerの表示は英語になっています。

また日付の入力範囲は決められておらず、デフォルトでは今日の日付になっています。

そこで日付の選択範囲を指定したいと思います。

 

まず対象のレイアウトテンプレートの『フォーム』の最下部に以下を追加します。

 

1. <link href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css” rel=”stylesheet” />
2. <script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
3. <script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
4. <script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js”></script>
5. <script>
6. $(function () {
7.     $(“p.datepickerClass input”).datepicker({
8.         // 『datepickerClass』の部分は任意のクラス名でも可
9.         
10.         // 最小日付を現在から12ヶ月前に制限
11.         minDate: “-12M”,
12.         
13.         // 最大日付を現在から12ヶ月後に制限
14.         maxDate: “+12M”,
15.         
16.         // 年選択をプルダウン化
17.         changeYear: true,
18.         
19.         // 月選択をプルダウン化
20.         changeMonth: true,
21.         
22.         // 選択された日付の表示形式を年-月-日に設定
23.         dateFormat: “yy-mm-dd”,
24.     });
25. });
26. </script>

 

 

次に対象のフォームの日付項目の種別を『テキスト』に変更します。

 

 

『詳細』タブをクリックし『CSSクラス』に先ほど設定したクラス名（今回は『datepickerClass』）に変更します。

 

 

保存をしたらフォームを確認してみましょう。

 

日本語表記になり、選択範囲が現在から前後12か月に制限できています。

日本語GoogleのCDNから日本語対応されているファイルを読み込むことで、日本語化しています。

 

注意事項として、日付の選択範囲は入力規則を設けているわけではないので、選択範囲外でも手入力すると送信できてしまいます。

必要に応じて別途、入力規則を設定してください。

 

また日付項目を生年月日などとして利用したい場合、現在の日付がデフォルトの設定だと使いにくいと思います。

そこで以下のように日付のデフォルト値を設定することが可能です。

 

1. <link href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css” rel=”stylesheet” />
2. <script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
3. <script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
4. <script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js”></script>
5. <script>
6. $(function () {
7.     $(“p.datepickerClass input”).datepicker({
8.         changeYear: true,
9.         changeMonth: true,
10.         dateFormat: “yy-mm-dd”,
11.         
12.         // デフォルトの日付を設定 (例: 1980年1月1日をデフォルトに設定)
13.         defaultDate: “1980-01-01”
14.     });
15. });
16. </script>

 

 

保存後フォームを確認します。

 

 

デフォルトの日付を指定することが出来ました。

 

今回は、標準の日付項目のDatepickerを日本語化、日付の選択範囲の設定する方法をご紹介いたしました。

まだ駆け出し社員なので、至らぬ点もあるかと思いますが、参考にしていただければと思います。

それでは、また次回のブログでお会いしましょう。