和暦の設定

wijinputdate ウィジェットで使用する和暦設定の定義について解説します。

和暦設定

wijinputdate ウィジェットで利用する和暦設定をカスタマイズすることができます。ページ上に和暦定義が存在する場合、wijinputdate ウィジェットではページ上設定を参照します。ページ上に和暦定義が存在しない場合はデフォルトの設定を有効にします。

和暦の定義方法

以下に和暦定義の設定例を示します。wijinputdate ウィジェットのデフォルトは下記設定と同じです。

和暦定義の設定例	コードのコピー
window.eras = [ { name: "明治", abbreviation: "明", symbol: "M", startDate: "1868-09-08", shortcuts: "1,M" }, { name: "大正", abbreviation: "大", symbol: "T", startDate: "1912-07-30", shortcuts: "2,T" }, { name: "昭和", abbreviation: "昭", symbol: "S", startDate: "1926-12-25", shortcuts: "3,S" }, { name: "平成", abbreviation: "平", symbol: "H", startDate: "1989-01-08", shortcuts: "4,H" } ];

和暦定義の設定例

コードのコピー

window.eras = [
  { name: "明治", abbreviation: "明", symbol: "M", startDate: "1868-09-08", shortcuts: "1,M" }, 
  { name: "大正", abbreviation: "大", symbol: "T", startDate: "1912-07-30", shortcuts: "2,T" }, 
  { name: "昭和", abbreviation: "昭", symbol: "S", startDate: "1926-12-25", shortcuts: "3,S" }, 
  { name: "平成", abbreviation: "平", symbol: "H", startDate: "1989-01-08", shortcuts: "4,H" }
];

和暦定義の詳細

以下に和暦定義の各設定の詳細を解説します。

name	年号の正式名称キーワード"ggg"で使用します。
abbreviation	年号の略称キーワード"gg"で使用します。
symbol	年号のアルファベット略称キーワード"g"で使用します。
startDate	年号の開始日。ハイフン(-)区切りで年月日を指定します。
shortcuts	和暦を入力する際のショートカットキー（数字、アルファベットを設定できます。複数キーワードを設定する場合はカンマ区切りで設定します）

使用例

和暦設定ファイルを参照してwijinput ウィジェットを使用したサンプルです。和暦設定は独立したjsファイルに定義し、ページ上でjsファイルを参照することで和暦設定をアプリケーション内で一元管理することをお勧めします。

HTML	コードのコピー
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>InputDate Custom Era</title> <!--jQuery References--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <!--和暦設定ファイルの参照--> <script src="customera.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputdate({ dateFormat: "g ee/MM/dd", }); $("#textbox2").wijinputdate({ dateFormat: "gg ee/MM/dd", }); $("#textbox3").wijinputdate({ dateFormat: "ggg ee/MM/dd", }); }); </script> </head> <body> <input type="text" id="textbox1" /> <br/><br/> <input type="text" id="textbox2" /> <br/><br/> <input type="text" id="textbox3" /> <br/><br/> </body> </html>

HTML

コードのコピー

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <title>InputDate Custom Era</title>
    <!--jQuery References-->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
 
    <!--Theme-->
    <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
 
    <!--Wijmo Widgets CSS-->
    <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" />
 
    <!--Wijmo Widgets JavaScript-->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script>

    <!--和暦設定ファイルの参照-->
    <script src="customera.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () { 
        $("#textbox1").wijinputdate({ 
          dateFormat: "g ee/MM/dd",
        }); 
        $("#textbox2").wijinputdate({ 
          dateFormat: "gg ee/MM/dd",
        }); 
        $("#textbox3").wijinputdate({ 
          dateFormat: "ggg ee/MM/dd",
        }); 
      }); 
    </script>
  </head>
  <body>
      <input type="text" id="textbox1" /> <br/><br/>
      <input type="text" id="textbox2" /> <br/><br/>
      <input type="text" id="textbox3" /> <br/><br/>
  </body>
</html>

customera.js	コードのコピー
window.eras = [ { name: "明治", abbreviation: "明", symbol: "M", startDate: "1868-09-08", shortcuts: "1,M" }, { name: "大正", abbreviation: "大", symbol: "T", startDate: "1912-07-30", shortcuts: "2,T" }, { name: "昭和", abbreviation: "昭", symbol: "S", startDate: "1926-12-25", shortcuts: "3,S" }, { name: "平成", abbreviation: "平", symbol: "H", startDate: "1989-01-08", shortcuts: "4,H" } ];

customera.js

コードのコピー

window.eras = [
  { name: "明治", abbreviation: "明", symbol: "M", startDate: "1868-09-08", shortcuts: "1,M" }, 
  { name: "大正", abbreviation: "大", symbol: "T", startDate: "1912-07-30", shortcuts: "2,T" }, 
  { name: "昭和", abbreviation: "昭", symbol: "S", startDate: "1926-12-25", shortcuts: "3,S" }, 
  { name: "平成", abbreviation: "平", symbol: "H", startDate: "1989-01-08", shortcuts: "4,H" }
];