書式の設定

カレンダーのヘッダに表示できる書式の設定について解説します。 月-日カレンダーの書式設定 setCalendarTypeメソッドがCalendarType.MonthDayのとき(月-日カレンダー)のヘッダの表示書式はsetHeaderFormatメソッドで設定します。 setHeaderFormatメソッドに以下のキーワードとリテラル文字を設定することで、書式を作成します。 キーワード 説明 g 年号の頭文字をアルファベットで表示(M、T、S、H) gg 年号の頭文字を漢字で表示(明、大、昭、平) ggg 年号の正式名称を漢字で表示(明治、大正、昭和、平成) e 和暦年を2桁で表示(先頭に0を付けない) ee 和暦年を2桁で表示(先頭に0を付ける) E 和暦年を2桁で表示し開始年を元と表示(先頭に0を付けない)(例:平成元年) EE 和暦年を2桁で表示し開始年を元と表示(先頭に0を付ける)(例:平成元年) y 年を2桁で表示(先頭に0を付けない) yy 年を2桁で表示(先頭に0を付ける) yyy 年を4桁で表示(先頭に0を付けない) yyyy 年を4桁で表示(先頭に0を付ける) M 月を2桁の数字で表示(先頭に0を付けない) MM 月を2桁の数字で表示(先頭に0を付ける) MMM 月を省略形で表示(DateTimeFormatInfo.AbbreviatedMonthNames() で指定された形式) MMMM 月を正式名称で表示(DateTimeFormatInfo.MonthNames()で指定された形式) \(Chr(92)) キーワードをリテラル文字として表示 キーワード'e'、'ee'、'E'、'EE'を使用する場合は、元号を表すキーワード'g'、'gg'、または'ggg'を必ず併用してください。 和暦表示が可能な日付の範囲は、1868年9月1日~2087年12月31日です。この範囲を超えた場合は、西暦で表示されます。 次のサンプルコードはヘッダの書式を設定する例です。 年-月カレンダーの書式設定 setCalendarTypeメソッドがCalendarType.YearMonth(年-月カレンダー)のときの書式設定には、 setYearMonthFormatメソッドを使用します。 setYearMonthFormatメソッドにキーワードとリテラル文字を設定することで、月の書式、年の書式をそれぞれ作成します。 月の設定に関するキーワード キーワード 説明 M 月を2桁の数字で表示(先頭に0を付けない) MM 月を2桁の数字で表示(先頭に0を付ける) MMM 月を省略形で表示(DateTimeFormatInfo.AbbreviatedMonthNames() で指定された形式) MMMM 月を正式名称で表示(DateTimeFormatInfo.MonthNames()で指定された形式) 年の設定に関するキーワード キーワード 説明 g 年号の頭文字をアルファベットで表示(M、T、S、H) gg 年号の頭文字を漢字で表示(明、大、昭、平) ggg 年号の正式名称を漢字で表示(明治、大正、昭和、平成) e 和暦年を2桁で表示(先頭に0を付けない) ee 和暦年を2桁で表示(先頭に0を付ける) E 和暦年を2桁で表示し開始年を元と表示(先頭に0を付けない)(例:平成元年) EE 和暦年を2桁で表示し開始年を元と表示(先頭に0を付ける)(例:平成元年) y 年を2桁で表示(先頭に0を付けない) yy 年を2桁で表示(先頭に0を付ける) yyy 年を4桁で表示(先頭に0を付けない) yyyy 年を4桁で表示(先頭に0を付ける) キーワード'e'、'ee'、'E'、'EE'を使用する場合は、元号を表すキーワード'g'、'gg'、または'ggg'を必ず併用してください。 和暦表示が可能な日付の範囲は、1868年9月1日~2087年12月31日です。この範囲を超えた場合は、西暦で表示されます。 次のサンプルコードは、年-月カレンダーの表示書式を設定する方法を示します。 会計年度表示 setCalendarYearメソッドをCalendarYear.Fiscalに設定すると、setFirstFiscalMonthメソッドの設定に基づいた会計年度表示が有効になります。 会計年度が有効になると、ヘッダの年度表示が会計年度を基準に表示されます。たとえば、setFirstFiscalMonthメソッドをMonths.Aprilに設定し、2018年3月を表示すると、ヘッダの年表示は「2017」となります。
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar'), { // 月-日カレンダーの書式を設定します。 headerFormat: 'yyy年 M月', // 年-月カレンダーの書式を設定します。 yearMonthFormat: 'yyy年,M月', // カレンダーを会計年度の形式で表示しません。 calendarYear: InputMan.CalendarYear.Normal, // 会計年度の最初の月を設定します。 firstFiscalMonth: InputMan.Months.April }); const headerFormat = new InputMan.GcComboBox(document.getElementById('headerFormat'), { items: [ { value: 'yyy年 M月', desc: '2018年 1月' }, { value: 'yyy/M', desc: '2018/1' }, { value: 'gggE年 M月', desc: '平成元年1月' }, { value: 'g.e/M', desc: 'H.1/1' }, { value: 'yyy年度 M月', desc: '2018年度 1月' }, { value: 'FYyyy/M', desc: 'FY2018/1' }, ], displayMemberPath: 'value', valueMemberPath: 'value', dropDownWidth: 'auto', columns: [ { name: 'value', label: '書式', width: 120 }, { name: 'desc', label: '説明', width: 120 }, ] }); headerFormat.addEventListener(InputMan.GcComboBoxEvent.SelectedChanged, (control, args) => { console.log(headerFormat.getSelectedValue()); if (headerFormat.getSelectedValue()) { gcCalendar.setHeaderFormat(headerFormat.getSelectedValue()); } }); headerFormat.addEventListener(InputMan.GcComboBoxEvent.TextChanged, (control, args) => { console.log(headerFormat.getDisplayText()); gcCalendar.setHeaderFormat(headerFormat.getDisplayText()); }); const yearMonthFormat = new InputMan.GcComboBox(document.getElementById('yearMonthFormat'), { items: [ { value: 'yyy年,M月', desc: '2018年、1月' }, { value: 'yyy,M', desc: '2018、1' }, { value: 'gggE年,M月', desc: '平成元年、1月' }, { value: 'g.e,M', desc: 'H.1、1' }, { value: 'yyy年度,M月', desc: '2018年度、1月' }, { value: 'FYyyy,M', desc: 'FY2018、1' }, ], displayMemberPath: 'value', valueMemberPath: 'value', dropDownWidth: 'auto', columns: [ { name: 'value', label: '書式', width: 120 }, { name: 'desc', label: '説明', width: 130 }, ] }); yearMonthFormat.addEventListener(InputMan.GcComboBoxEvent.SelectedChanged, (control, args) => { if (yearMonthFormat.getSelectedValue()) { gcCalendar.setYearMonthFormat(yearMonthFormat.getSelectedValue()); } }); yearMonthFormat.addEventListener(InputMan.GcComboBoxEvent.TextChanged, (control, args) => { gcCalendar.setYearMonthFormat(yearMonthFormat.getDisplayText()); }); document.getElementById('setCalendarYear').addEventListener('change', (e) => { const isFiscal = e.target.checked; gcCalendar.setCalendarYear(isFiscal ? InputMan.CalendarYear.Fiscal : InputMan.CalendarYear.Normal); }); document.getElementById('setFirstFiscalMonth').addEventListener('change', (e) => { gcCalendar.setFirstFiscalMonth(months[e.target.selectedIndex]); }); const months = [ InputMan.Months.Default, InputMan.Months.January, InputMan.Months.February, InputMan.Months.March, InputMan.Months.April, InputMan.Months.May, InputMan.Months.June, InputMan.Months.July, InputMan.Months.August, InputMan.Months.September, InputMan.Months.October, InputMan.Months.November, InputMan.Months.December ];
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>カレンダーコントロール - 書式の設定</title> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="gcCalendar"></div> <table class="sample"> <tr> <th>月-日カレンダーの書式</th> <td> <select id="headerFormat"></select> </td> </tr> <tr> <th>年-月カレンダーの書式</th> <td> <select id="yearMonthFormat"></select> </td> </tr> <tr> <th>会計年度表示</th> <td> <label><input type="checkbox" id="setCalendarYear">会計年度で表示</label><br> <label>最初の月 <select id="setFirstFiscalMonth"> <option>指定なし</option> <option>1月</option> <option>2月</option> <option>3月</option> <option selected>4月</option> <option>5月</option> <option>6月</option> <option>7月</option> <option>8月</option> <option>9月</option> <option>10月</option> <option>11月</option> <option>12月</option> </select> </label> </td> </tr> </table> </body> </html>
body { padding-bottom: 10rem; }
System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/CSS', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } });