日付の曜日を表示する

✔ 概要

入力された日付の曜日を別入力テキストに表示する方法を説明します。

注意

本設定は、フォームおよび旧バージョン形式のフォーム(JSP)で利用できます。
Liteフォームおよび旧バージョン形式のフォーム(PDF)では利用できません。

フォーム形式により設定方法が異なります。

フォームの場合

設定方法

JavaScriptファイルの登録

入力された日付の曜日を表示するJavaScriptファイルを作成し、サーバーに登録します。

  • 以下のJavaScriptをテキストファイルに記述し、拡張子を"js"にして、JavaScriptファイルを作成します。
    ファイル名は任意ですが、半角英数字に限ります。

    例)weekDay.js

    function weekDay(){
      var date = document.getElementsByName("DAY")[0].value;
    
      if(date != ""){
    
        // 日付オブジェクトを生成
        var day = new Date(date) ;
    
        var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];
        var wday = weekday[ day.getDay() ] + "曜日";
        document.getElementsByName("WEEK")[0].value = wday;
      }else{
        document.getElementsByName("WEEK")[0].value = "";
      }
    }
    

    注釈

    JavaScriptの処理中にある「DAY」「WEEK」は、 2.オブジェクトの配置/設定 で配置する入力テキストの名称です。

    注意

    登録するファイルはUTF-8形式で作成してください。

  • 作成したJavaScriptファイルをサーバーおよびフォームに登録します。

    ヒント

    JavaScriptファイルの登録については、 外部ファイルとしてJavaScriptを登録する を参照ください。

オブジェクトの配置/設定

日付を表示する入力テキストの設定

日付を入力する入力テキストを設定します。
入力テキストをフォーム上の任意の場所に配置し、プロパティに以下を設定します。
ここでは例として、配置する入力テキストのオブジェクト名を「DAY」とします。

  • [フォーマット] タブ
項目名 設定値
分類 日付
日付の表記方法 yyyy/mm/dd

注意

日付の表記方法項目設定は「yyyy/mm/dd」を選択されていることを想定しています。
「yyyy年mm月dd日」などの表記方法を選択した場合、正しくスクリプトで曜日を表示できません。
「yyyy/mm/dd」以外の表記方法で日付を表示したい場合は、 1.JavaScriptファイルの登録 で作成した
「weekDay.js」のスクリプト処理に以下のような別途日付の形式を変更する処理を追加する必要があります。
※形式変換の処理は、日付オブジェクト生成前に実装してください。

◆日付表記方法にyyyy年mm月dd日を指定した場合の日付の形式変換方法

function weekDay(){
  var date = document.getElementsByName("DAY")[0].value;

  if(date != ""){

    // 追記ここから --------------------------------------------
    date = date.replace("年","/");
    date = date.replace("月","/");
    date = date.replace("日","");
    // 追記ここまで --------------------------------------------

    // 日付オブジェクトを生成
    var day = new Date(date) ;

    var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];
    var wday = weekday[ day.getDay() ] + "曜日";
    document.getElementsByName("WEEK")[0].value = wday;
  }else{
    document.getElementsByName("WEEK")[0].value = "";
  }
}
  • [HTML] タブ
項目 設定値
JavaScript

トリガー/JavaScriptイベントで以下を選択します。

トリガー 内容を変更する
JavaScriptイベント名 onChange

トリガーを選択後に [ 編集 ] ボタンをクリックし、以下のスクリプトを設定します。

weekDay();

曜日を表示する入力テキストの設定

曜日を表示する入力テキストを設定します。
入力テキストをフォーム上の任意の場所に配置します。
ここでは例として、配置する入力テキストのオブジェクト名を「WEEK」とします。

フォームの保存、アップロード

Formエディターでフォームを保存し、フォームをサーバーにアップロードします。

動作確認

入力テキストに日付を入力(カレンダーから日付を選択)して、入力した日付の曜日が表示されるか確認します。

旧バージョン形式のフォーム(JSP)の場合

設定方法

JavaScriptファイルの登録

入力された日付の曜日を表示するJavaScriptファイルを作成し、サーバーに登録します。

  • 以下のJavaScriptをテキストファイルに記述し、拡張子を"js"にして、JavaScriptファイルを作成します。
    ファイル名は任意ですが、半角英数字に限ります。

    例)weekDay_JSP.js

    function weekDay_JSP(){
      var date = document.getElementsByName("DAY")[0].value;
    
      if(date != ""){
    
        // 日付オブジェクトを生成
        var day = new Date(date) ;
    
        var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];
        var wday = weekday[ day.getDay() ] + "曜日";
        document.getElementsByName("WEEK")[0].value = wday;
      }else{
        document.getElementsByName("WEEK")[0].value = "";
      }
    }
    

    注釈

    JavaScriptの処理中にある「DAY」「WEEK」は、 2.オブジェクトの配置/設定 で配置する入力テキストの名称です。

    注意

    登録するファイルはUTF-8形式で作成してください。

  • 作成したJavaScriptファイルをサーバーおよびフォームに登録します。

    ヒント

    JavaScriptファイルの登録については、 外部ファイルとしてJavaScriptを登録する を参照ください。

オブジェクトの配置/設定

日付を表示する入力テキストの設定

日付を入力する入力テキストを設定します。
入力テキストをフォーム上の任意の場所に配置し、プロパティに以下を設定します。
ここでは例として、配置する入力テキストのオブジェクト名を「DAY」とします。

  • [オプション] タブ
項目名 設定値
分類 日付
日付の表記方法 yyyy/mm/dd
カレンダーを表示する:チェックあり

注意

日付の表記方法項目設定は「yyyy/mm/dd」を選択されていることを想定しています。
「yyyy年mm月dd日」などの表記方法を選択した場合、正しくスクリプトで曜日を表示できません。
「yyyy/mm/dd」以外の表記方法で日付を表示したい場合は、 1.JavaScriptファイルの登録 で作成した
「weekDay_JSP.js」のスクリプト処理に以下のような別途日付の形式を変更する処理を追加する必要があります。
※形式変換の処理は、日付オブジェクト生成前に実装してください。

◆日付表記方法にyyyy年mm月dd日を指定した場合の日付の形式変換方法

function weekDay_JSP(){
  var date = document.getElementsByName("DAY")[0].value;

  if(date != ""){

    // 追記ここから --------------------------------------------
    date = date.replace("年","/");
    date = date.replace("月","/");
    date = date.replace("日","");
    // 追記ここまで --------------------------------------------

    // 日付オブジェクトを生成
    var day = new Date(date) ;

    var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];
    var wday = weekday[ day.getDay() ] + "曜日";
    document.getElementsByName("WEEK")[0].value = wday;
  }else{
    document.getElementsByName("WEEK")[0].value = "";
  }
}
  • [JSP] タブ
項目 設定値
登録済みのイベント一覧

[追加] ボタンをクリックし、以下の内容を設定します。

イベントタイミング onChange

実行するJavaScriptの処理には以下を記述してください。

weekDay_JSP();

曜日を表示する入力テキストの設定

曜日を表示する入力テキストを設定します。
入力テキストをフォーム上の任意の場所に配置します。
ここでは例として、配置する入力テキストのオブジェクト名を「WEEK」とします。

フォームの保存、アップロード

Formエディターでフォームを保存し、フォームをサーバーにアップロードします。

動作確認

入力テキストに日付を入力(カレンダーから日付を選択)して、入力した日付の曜日が表示されるか確認します。