テキストをカレンダー形式で表示させる強化ガジェット

日時・日付フィールドをフォームで使用する際にテキスト形式になっています。
入力欄を日付タイプ・時刻タイプで表示させる強化ガジェットを作成いたしました。
アクセス日から起算して、選択できる日付を絞れる機能も追加しているので、ぜひ活用してみてください！

注意点

・入力コントロールで、[年/月/日][時/分/秒]の形式で設定してください
・時刻は、秒には対応していません
・月日のフィールドには対応していません
・HTML5で表示させているため、対応していないブラウザがあります

コード設定方法

ブロックもしくはページの Javascript タブにコードを貼り付けて、設定値を変更してください。

設定値

dateFieldName	入力タイプを指定したいフィールドのname値を設定しますフィールドのname値を "" の中に入力してください日時フィールドの場合、フィールドのname値の後ろに「:date」をつける必要があります例）"f01:date" 設定が不要な場合は、"" のままにしてください
minDays	アクセス日を起算日として、選択可能な半角数字で開始日を設定します開始日を設定しない場合、null と記載してください「1」と設定すると翌日以降が入力可能となります「0」と設定するとアクセス日以降が入力可能となります「-1」と設定すると前日以降が入力可能となります数値で行う場合、minDays の数値は、 maxDaysより小さい数字で設定してください
maxDays	アクセス日を起算日として、選択可能な終了日を半角数字で設定します。終了日を設定しない場合、null と記載してください「1」と設定すると翌日以降が入力可能となります。「0」と設定するとアクセス日以降が入力可能となります「-1」と設定すると前日以降が入力可能となります数値で行う場合、maxDays の数値は、minDays より大きい数字で設定してください
timeFieldName	時刻で入力タイプを指定したいフィールドのname値を設定しますフィールドIDを "" の中に入力してください日時フィールドの場合、フィールドIDの後ろに「:time」をつける必要があります例）"f01:time" 設定が不要な場合は、"" のままにしてください

※name値は、「f0」+「フィールドID」となります。
例）フィールドIDが10の場合、"10" と設定してください。
※ver.2.20アップデートよりソース設定のフォームではname値がフィールド識別名となります。
この強化ガジェットを使用する場合は設定値を変更する必要がありますので、ご注意ください。

Javascript

// 設定値
const dateFieldName = ""; // カレンダーフィールドのname値(「f0」+「フィールドID」)
const minDays = 1; // 本日起算で選択できる開始日
const maxDays = null; // 本日起算で選択できる終了日
const timeFieldName = ""; // 時刻のフィールドのname値

// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    dateInputField();
};

/// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function dateInputField() {
    var dateField = document.getElementsByName(dateFieldName);
    if (dateField[0]) {
        dateField[0].type = "date";
        if(minDays != null){
            var minDate = new Date();
            minDate.setDate(minDate.getDate() + minDays);
            dateField[0].min= minDate.getFullYear()+"-"+("0"+(minDate.getMonth()+1)).slice(-2)+"-"+("0" + minDate.getDate()).slice(-2);
        }

        if(maxDays != null){
            var maxDate = new Date();
            maxDate.setDate(maxDate.getDate() + maxDays);
            dateField[0].max= maxDate.getFullYear()+"-"+("0"+(maxDate.getMonth()+1)).slice(-2)+"-"+("0" + maxDate.getDate()).slice(-2);
        }
    }
    var timeField = document.getElementsByName(timeFieldName);
    if (timeField[0]) {
        timeField[0].type = "time";
    }
}

設定値は例で入れていますので、参考に変更をしてください。

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。

不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

注意点

コード設定方法

最後に

関連記事