開発情報・ナレッジ

投稿者: SPIRERS ナレッジ向上チーム 2022年7月26日 (火)

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

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

変更・改定履歴

  • 改定

    複数フィールド、デフォルト値の設定に対応

注意点

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

コード設定方法

ブロックもしくはページの Javascript タブにコードを貼り付けて、設定値を変更してください。
設定値は例で入れていますので、参考に変更をしてください。
Javascript
// 設定値
const dateFieldName = ['f0x:date','f0x']; // 日時・日付フィールドのname値(「f0」+「フィールドID」)、日時の場合は、:dateをつける
const minDays = 1; // 本日起算で選択できる開始日
const maxDays = 0; // 本日起算で選択できる終了日
const timeFieldName = ['f0x:time','f0x']; // 日時・時刻フィールドのname値(「f0」+「フィールドID」)、日時の場合は、:timeをつける
const defaultDate = {'year':'2023', 'month':'+1', 'day':'1'}; //アクセス日から+-で前後に日程を設定可能です。+-をつけない場合固定で入力値が設定されます。
const defaultTime = {'hour':'+1', 'minute':'0'}; //アクセス時間から+-で前後に日程を設定可能です。+-をつけない場合固定で入力値が設定されます。

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

/// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function dateInputField() {
  dateFieldName.forEach(function(element){
      var dateField = document.getElementsByName(element);
      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);
          }
          if(dateField[0].value == '' && dateFormat('date')){
                  dateField[0].value = dateFormat('date');
          }
      }
  });
  timeFieldName.forEach(function(element){
      var timeField = document.getElementsByName(element);
      if (timeField[0]) {
          timeField[0].type = "time";
          if(timeField[0].value == '' && dateFormat('time')){
              timeField[0].value = dateFormat('time');
          }
      }
  });
}

function dateFormat(type) {
  var date = new Date();
  const calc = ['+', '-'];

  if(type == 'date'){
      if(defaultDate['year'] == null){
          var year = null;
      }else if(calc.includes(defaultDate['year'].charAt(0))){
          var year = date.getFullYear() + Number(defaultDate['year']);
      }else{
          var year = defaultDate['year'];
      }

      if(defaultDate['month'] == null){
          var month = null;
      }else if(calc.includes(defaultDate['month'].charAt(0))){
          var month = date.getMonth() + Number(defaultDate['month']) + 1;
      }else{
          var month = defaultDate['month'];
      }

      if(defaultDate['day'] == null){
          var day = null;
      }else if(calc.includes(defaultDate['day'].charAt(0))){
          var day = date.getDate() + Number(defaultDate['day']);
      }else{
          var day = defaultDate['day'];
      }

      if(year==null || month==null || day==null){
          return false;
      }else{
          return (year + '-' + ('0' + month).slice(-2) + '-' + ('0' + day).slice(-2));
      }
      
  }
  if(type == 'time'){
      if(defaultTime['hour'] == null){
          var hour = null;
      }else if(calc.includes(defaultTime['hour'].charAt(0))){
          var hour = date.getHours() + Number(defaultTime['hour']);
      }else{
          var hour = defaultTime['hour'];
      }

      if(defaultTime['minute'] == null){
          var minute = null;
      }else if(calc.includes(defaultTime['minute'].charAt(0))){
          var minute = date.getMinutes() + Number(defaultTime['minute']);
      }else{
          var minute = defaultTime['minute'];
      }

      if(hour==null || minute==null){
          return false;
      }else{
          return ('0' + hour).slice(-2) + ':' + ('0' + minute).slice(-2);
      }
  }
}

設定値
dateFieldName 入力タイプを指定したいフィールドのname値を ['f0x'] の箇所入力してください
カンマ区切りで複数フィールドを設定できます。
日時フィールドの場合、フィールドのname値の後ろに「:date」が必要です
例)['f01','f02:date']
設定が不要な場合は、[] のままにしてください
minDays アクセス日を起算日として、選択可能な半角数字で開始日を設定します
開始日を設定しない場合、null と記載してください
「1」 と記載すると翌日以降が入力可能となります
「0」 と記載するとアクセス日以降が入力可能となります
「-1」 と記載すると前日以降が入力可能となります
数値で行う場合、minDays の数値は、 maxDaysより小さい数字で設定してください
maxDays アクセス日を起算日として、選択可能な終了日を半角数字で設定します
終了日を設定しない場合、null と記載してください
「1」 と記載すると翌日以降が入力可能となります
「0」 と記載するとアクセス日以降が入力可能となります
「-1」 と記載すると前日以降が入力可能となります
数値で行う場合、maxDays の数値は、minDays より大きい数字で設定してください
timeFieldName 時刻で入力タイプを指定したいフィールドのname値を設定します
カンマ区切りで複数フィールドを設定できます。
日時フィールドの場合、フィールドIDの後ろに「:time」が必要です
例)['f01','f02:time']
設定が不要な場合は、[] のままにしてください
defaultDate デフォルト値として固定値または、アクセス日を起算日とした日付を設定します
「year」「month」「day」で個別に年月日の値を設定できます
「'2023'」や「'1'」 と記載すると固定値として、value に入ります
「'+0'」 と記載するとアクセス日の年月日が、value に入ります
「'+1'」 と記載するとアクセス日から加算された値が、value に入ります
「'-1'」 と記載するとアクセス日から減算された値が、value に入ります
デフォルト値の設定が不要な場合は、null と記載してください
「year」「month」「day」のいずれかが、nullの場合は、デフォルト値は設定されません
(例)アクセス日が2023年10月11日の場合
本日の日付を設定:{'year':'+0', 'month':'+0', 'day':'+0'}
翌月の1日を設定:{'year':'+0', 'month':'+1', 'day':'1'}
前日の日付を設定:{'year':'+0', 'month':'+0', 'day':'-1'}
設定しない   :{'year':null, 'month':'0', 'day':'0'}
defaultTime デフォルト値として固定値または、アクセス日を起算日とした時刻を設定します
「hour」「minute」で個別に時間と分の値を設定できます
「'12'」 と記載すると固定値として、value に入ります
「'+0'」 と記載するとアクセスタイミングの時刻が、value に入ります
「'+1'」 と記載するとアクセスタイミングから加算された値が、value に入ります
「'-1'」 と記載するとアクセスタイミングから減算された値が、value に入ります
デフォルト値の設定が不要な場合は、null と記載してください
「hour」「minute」のいずれかが、nullの場合は、デフォルト値は設定されません
(例)アクセス時刻が9時20分の場合
アクセス時間を設定             :{'hour':'+0', 'minute':'+0'}
アクセス時間の1時間後の0分(10時0分)を設定:{'hour':'+1', 'minute':'0'}
アクセス時間の30分前(8時50分)を設定   :{'hour':'+0', 'minute':'-30'}
設定しない                 :{'hour':null, 'minute':'+0'}
○○時から○○時の間などの制御を入れる場合、88行目の箇所で現在時刻との比較処理を入れることで可能となります。
※name値は、「f0」+「フィールドID」となります。
例)フィールドIDが10の場合、"10" と設定してください。
ver.2.20アップデート よりソース設定のフォームではname値がフィールド識別名となります。
この強化ガジェットを使用する場合は設定値を変更する必要がありますので、ご注意ください。

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。
解決しない場合はこちら コンテンツに関しての
要望はこちら