年齢を表示する¶

✔ 概要

入力された生年月日から年齢を表示する方法を説明します。

注意

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

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

フォームの場合

旧バージョン形式のフォーム（JSP）の場合

フォームの場合¶

設定方法

JavaScriptファイルの登録

年齢を表示するJavaScriptファイルを作成し、サーバーに登録します。
以下のJavaScriptをテキストファイルに記述し、拡張子を"js"にして、JavaScriptファイルを作成します。
ファイル名は任意ですが、半角英数字に限ります。
例）age.js
function age(){
  var birthdate = document.getElementsByName("BIRTHDATE")[0].value;

  if(birthdate != ""){

    // 年齢計算用の関数を宣言
    const ageCalculation = ( birthDate , nowDate ) => {
        var age = nowDate.getFullYear() - birthDate.getFullYear();
        var thisYearsBirthday  = new Date( nowDate.getFullYear() , birthDate.getMonth() , birthDate.getDate() );
        return age + ( thisYearsBirthday.getTime() > nowDate.getTime() ? -1 : 0 );
    }

    // 日付オブジェクトを生成して、ageCalculation関数の引数に設定
    var age = ageCalculation( new Date(birthdate) , new Date() );
    document.getElementsByName("AGE")[0].value = age;
  }else{
    document.getElementsByName("AGE")[0].value = "";
  }
}
注釈

JavaScriptの処理中にある「BIRTHDATE」「AGE」は、２．オブジェクトの配置／設定で配置する入力テキストの名称です。

注意

登録するファイルはUTF-8形式で作成してください。
作成したJavaScriptファイルをサーバーおよびフォームに登録します。

ヒント

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

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

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

[フォーマット] タブ
項目名設定値

分類日付

日付の表記方法 yyyy/mm/dd
注意

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

◆日付表記方法にyyyy年mm月dd日を指定した場合の日付の形式変換方法
function age(){
  var birthdate = document.getElementsByName("BIRTHDATE")[0].value;

  if(birthdate != ""){

    // 追記ここから --------------------------------------------
    //漢字の「年」と「月」を「/」に変換、「日」を削除する
    birthdate = birthdate.replace("年","/");
    birthdate = birthdate.replace("月","/");
    birthdate = birthdate.replace("日","");
    // 追記ここまで --------------------------------------------

    // 年齢計算用の関数を宣言
    const ageCalculation = ( birthDate , nowDate ) => {
        var age = nowDate.getFullYear() - birthDate.getFullYear();
        var thisYearsBirthday  = new Date( nowDate.getFullYear() , birthDate.getMonth() , birthDate.getDate() );
        return age + ( thisYearsBirthday.getTime() > nowDate.getTime() ? -1 : 0 );
    }

    // 日付オブジェクトを生成して、ageCalculation関数の引数に設定
    var age = ageCalculation( new Date(birthdate) , new Date() );
    document.getElementsByName("AGE")[0].value = age;
  }else{
    document.getElementsByName("AGE")[0].value = "";
  }
}
[HTML] タブ
項目設定値
JavaScript
トリガー／JavaScriptイベントで以下を選択します。

トリガー内容を変更する

JavaScriptイベント名 onChange

トリガーを選択後に [ 編集 ] ボタンをクリックし、以下のスクリプトを設定します。
age();
年齢を表示する入力テキストの設定

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

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

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

動作確認

ワークフローシステムにログインし、申請を行います。
入力テキストに生年月日を入力（カレンダーから日付を選択）して、年齢が表示されるか確認します。

ページTOPへ

旧バージョン形式のフォーム（JSP）の場合¶

設定方法

JavaScriptファイルの登録

年齢を表示するJavaScriptファイルを作成し、サーバーに登録します。
以下のJavaScriptをテキストファイルに記述し、拡張子を"js"にして、JavaScriptファイルを作成します。
ファイル名は任意ですが、半角英数字に限ります。

例）age_JSP.js
function age_JSP(){
  var birthdate = document.getElementsByName("BIRTHDATE")[0].value;

  if(birthdate != ""){

    // 年齢計算用の関数を宣言
    const ageCalculation = ( birthDate , nowDate ) => {
        var age = nowDate.getFullYear() - birthDate.getFullYear();
        var thisYearsBirthday  = new Date( nowDate.getFullYear() , birthDate.getMonth() , birthDate.getDate() );
        return age + ( thisYearsBirthday.getTime() > nowDate.getTime() ? -1 : 0 );
    }

    // 日付オブジェクトを生成して、ageCalculation関数の引数に設定
    var age = ageCalculation( new Date(birthdate) , new Date() );
    document.getElementsByName("AGE")[0].value = age;
  }else{
    document.getElementsByName("AGE")[0].value = "";
  }
}
注釈

JavaScriptの処理中にある「BIRTHDATE」「AGE」は、２．オブジェクトの配置／設定で配置する入力テキストの名称です。

注意

登録するファイルはUTF-8形式で作成してください。
作成したJavaScriptファイルをサーバーおよびフォームに登録します。

ヒント

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

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

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

[オプション] タブ
項目名設定値

分類日付

日付の表記方法 yyyy/mm/dd
カレンダーを表示する：チェックあり
注意

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

◆日付表記方法にyyyy年mm月dd日を指定した場合の日付の形式変換方法
function age_JSP(){
  var birthdate = document.getElementsByName("BIRTHDATE")[0].value;

  if(birthdate != ""){

    // 追記ここから --------------------------------------------
    //漢字の「年」と「月」を「/」に変換、「日」を削除する
    birthdate = birthdate.replace("年","/");
    birthdate = birthdate.replace("月","/");
    birthdate = birthdate.replace("日","");
    // 追記ここから --------------------------------------------

    // 年齢計算用の関数を宣言
    const ageCalculation = ( birthDate , nowDate ) => {
        var age = nowDate.getFullYear() - birthDate.getFullYear();
        var thisYearsBirthday  = new Date( nowDate.getFullYear() , birthDate.getMonth() , birthDate.getDate() );
        return age + ( thisYearsBirthday.getTime() > nowDate.getTime() ? -1 : 0 );
    }

    // 日付オブジェクトを生成して、ageCalculation関数の引数に設定
    var age = ageCalculation( new Date(birthdate) , new Date() );
    document.getElementsByName("AGE")[0].value = age;
  }else{
    document.getElementsByName("AGE")[0].value = "";
  }
}
[JSP] タブ
項目設定値
登録済みのイベント一覧
[追加] ボタンをクリックし、以下の内容を設定します。

イベントタイミング onChange

実行するJavaScriptの処理には以下を記述してください。
age_JSP();
年齢を表示する入力テキストの設定

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

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

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

動作確認

ワークフローシステムにログインし、申請を行います。
入力テキストに生年月日を入力（カレンダーから日付を選択）して、年齢が表示されるか確認します。

ページTOPへ

項目名	設定値
分類	日付
日付の表記方法	yyyy/mm/dd

項目名	設定値
分類	日付
日付の表記方法	yyyy/mm/dd カレンダーを表示する：チェックあり