フォームの日付の選択にflatpickrを使用したが、日本語化にすると他の設定ができなくなる。

実現したいこと

CDNよりフォームの日付の選択にflatpickrを使用しましたが、日本語化にすると他の設定ができなくなります。

他の設定として、
1 今日から3ヶ月後しか指定できないようにする
2 複数日選択できる
3 日本語化して日曜始まりにする
4 土曜日を青、日曜日を赤にする
5 placeholder="日時を選択してください”を初期設定画面とする

日本語化しない状態で、複数日選択と今日から3ヶ月後しか指定できないようにするはうまく行きましたが、
日本語化するとその設定がきえました。

該当のソースコード

HTML
1    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
2
3      <input type="text" name="datepicker" id="js-datepicker" placeholder="日時を選択してください">
4
5
6<!-- Flatpickr モーダル日時指定 -->
7    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
8    <!-- 日本語化する場合は下記を追記 -->
9    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
10    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
11    <script>
12        flatpickr('#js-datepicker', {
13            locale: 'ja',
14            dateFormat: 'Y.m.d（D）',
15            defaultDate: new Date()
16        });
17    </script>

scss
1@use "../global" as *;
2@use 'flatpickr/dist/flatpickr.min.css';
3
4/* 日曜日：赤 */
5.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
6.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
7    color: red;
8}
9
10/* 土曜日：青 */
11.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
12.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
13    color: blue;
14}

jquery
1import flatpickr from 'flatpickr/dist/flatpickr.min.js';
2import { Japanese } from "flatpickr/dist/l10n/ja.js";
3$(function () {
4    flatpickr('#js-datepicker', {
5        locale: Japanese, // 日本語用モジュールを適用
6        dateFormat: 'Y.m.d（D）', // 2021.05.24（月）の形式で表示
7        defaultDate: new Date() // 入力エリアの初期値
8    });
9    const config = {
10        //今日より前は選択できない
11        minDate: "today",
12        // 今から14日後
13        maxDate: new Date().fp_incr(90),
14        //複数日選択
15        mode: "multiple",
16        dateFormat: "Y-m-d"
17    }
18    flatpickr('#js-datepicker', config);
19
20
21
22});

試したこと

Flatpickrで日時入力をカレンダー表示にする
https://notes.sharesl.net/articles/1923/
を参考にそのまま使用したがうまくいかない。
他にも何個かネットを見て、同じようにしたが、うまくいかない。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2023/06/07 02:01

スクリプトが二つあるようですが、実際に使っているのはどちらでしょうか？

spn

2023/06/07 08:24

HTMLとscript.jsの方と2つ日本語化が指定しているという意味でしょうか。両方しないと日本語化されなかったので2つ指定しています。

Lhankor_Mhy

2023/06/07 08:30

日本語化以前に、本来は片方でいいと思うのですが、違いますか？

spn

2023/06/07 20:43

そうですね。どこかが間違っていると思うのですが、、、。どちらかを消すと日本語化されないのはなぜでしょうか。

Lhankor_Mhy

2023/06/08 09:10

全体のコードがないので推測ですが、カレンダーを3回作成しようとしてるのが関係していると思いますよ。

spn

2023/06/08 12:14

解決しました。ありがとうございました。

Lhankor_Mhy

2023/06/09 01:38

それはよかったですね。お手数ですが自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、動いてるようには見えるんですが、こういう話ではなく？

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
9</head>
10
11<body>
12    <input type="text" name="datepicker" id="js-datepicker" placeholder="日時を選択してください">
13    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
15    <script>
16        flatpickr('#js-datepicker', {
17            locale: 'ja',
18            dateFormat: 'Y.m.d（D）',
19            defaultDate: new Date(),
20            minDate: "today",
21            maxDate: new Date().fp_incr(90),
22            mode: "multiple",
23        });
24    </script>
25</body>
26
27</html>