• 基本的なカレンダー入力
• 最小日付・最大日付の設定
• デフォルト値の設定
• 日付フォーマットの制御
• カスタムJavaScriptでの拡張
• 外部ライブラリを使う

基本的なカレンダー入力

HTMLでは、<input>タグのtype="date"を使用すると、ブラウザネイティブのカレンダー入力が利用できます。

<input type="date">

このコードを記述すると、カレンダーを表示できる入力フィールドが作成されます。

最小日付・最大日付の設定

カレンダー入力に制限を設けるために、min属性とmax属性を設定できます。

<input type="date" min="2024-01-01" max="2024-12-31">

この例では、2024年1月1日から2024年12月31日までの範囲でしか日付を選択できません。

デフォルト値の設定

日付入力の初期値を設定するには、value属性を指定します。

<input type="date" value="2024-06-01">

この例では、最初に表示される日付が2024年6月1日になります。

日付フォーマットの制御

HTMLのtype="date"は、標準ではYYYY-MM-DD形式を採用しています。しかし、ユーザーが入力する形式はブラウザや言語設定によって変わります。

例えば、JavaScriptでフォーマットを変換する場合：

document.getElementById("dateInput").addEventListener("change", function() {
    let date = new Date(this.value);
    let formattedDate = date.toLocaleDateString("ja-JP");
    console.log(formattedDate); // "2024/06/01" など
});

カスタムJavaScriptでの拡張

標準のカレンダー入力では機能が限られるため、JavaScriptを使って拡張することもできます。

例えば、現在の日付より過去の日付を選べないようにする場合：

document.addEventListener("DOMContentLoaded", function() {
    let today = new Date().toISOString().split("T")[0];
    document.getElementById("dateInput").setAttribute("min", today);
});

このコードを使うと、今日以降の日付しか選べなくなります。

外部ライブラリを使う

HTML標準のカレンダー入力に満足できない場合は、外部ライブラリを利用するのも良い方法です。代表的なものに「Flatpickr」や「jQuery UI Datepicker」があります。

Flatpickrを使用する例

まず、CDNでFlatpickrを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

次に、以下のJavaScriptコードを記述します。

document.addEventListener("DOMContentLoaded", function() {
    flatpickr("#dateInput", {
        dateFormat: "Y-m-d",
        minDate: "today"
    });
});

この方法を使うと、より高度なカレンダー入力が可能になります。