日付の選択方法を設定する方法と、選択された日付を取得する方法について解説します。
最大値と最小値
カレンダーに表示する日付の最小値と最大値は、setMinDateメソッドとsetMaxDateメソッドで設定します。この最小値と最大値を超える日付には、フォーカスを移動することはできません。
選択方法の指定
カレンダーコントロールには、日付の選択方法として、1つの日付だけを選択する単一選択と、複数の日付を選択する複数選択の2種類があります。
これらの選択方法は、setSelectionModeメソッドで指定します。また、下記に示した選択可能な日付の種類は、setAllowSelectionメソッドで設定します。
すべての日付 （AllowSellection.AnyDay）
営業日 （AllowSellection.Workday）
休日と休業日 （AllowSellection.Holiday）
日付選択の操作は、目的の日付をマウスでクリックするか、または矢印キーでフォーカス枠を移動し、［Space］または［Enter］キーを押して行います。また、setSelectionModeメソッドをSelectionMode.MultiRichに設定した場合は、CtrlキーやShiftキーを使った日付選択ができます。
なお、複数選択の場合は、選択できる最大日数をsetMaxSelectionCountメソッドで設定できます。
また、setWeekNumberSelectメソッドをtrueにすると、週番号（setShowWeekNumberメソッドで表示を設定）をクリックすると、その週全体を選択し、setWeekTitleSelectメソッドをtrueにすると、曜日タイトルのクリックでその曜日全部を選択します。
選択された日付の取得
マウスやキーボードの操作で選択された日付は、選択モードの違いによって2つのメソッドを使い分けて取得します。
単一選択された日付の取得には、getSelectedDateメソッドを使用し、複数選択された日付はgetSelectionsメソッドを使用します。getSelectionsメソッドは、選択された日付の配列を返します。
コードによる日付選択
日付の選択は、通常、マウスやキーボードの操作によって行われますが、コードで選択することも可能です。
日付選択は、単一選択モードの場合は、setSelectedDateメソッド、複数選択モードの場合は、setSelectionsメソッドを使用します。
選択時のイベント
直前に選択されていた日付とは異なる日付が選択されたときには、単一選択モードと複数選択モードの両方でonSelectedDateChangedイベントが発生します。また、フォーカス枠を移動したときには、onFocusDateChangedイベントが発生します。
カレンダー上の日付をクリックしたときには、onClickDateイベントが発生します。
カレンダー上の日付をクリックして日付を選択したときには、次の順序でイベントが発生します。
onFocusDateChanged
onClickDate
onSelectedDateChanged
サンプルコード
次のサンプルコードは、複数選択モードで選択された日付をテキストボックスに表示する方法を示します。
import '@mescius/inputman/CSS/gc.inputman-js.css';
import './styles.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const today = new Date();
const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar'), {
// 選択できる最大日数を設定します。
maxSelectionCount: 14
});
function updateSelectedDate() {
const selections = document.getElementById('selections');
selections.innerHTML = '';
if (gcCalendar.selectionMode === InputMan.CalendarSelectionMode.One) {
const selectedDate = gcCalendar.getSelectedDate();
if (selectedDate) {
selections.innerHTML = selectedDate.toLocaleDateString();
}
}
else {
const dates = gcCalendar.getSelections();
for (var i = 0; i < dates.length; i++) {
selections.innerHTML += dates[i].toLocaleDateString() + '</br>';
}
}
}
gcCalendar.onSelectedDateChanged(() => {
updateSelectedDate();
});
document.getElementById('setSelectionMode').addEventListener('change', (e) => {
gcCalendar.setSelectionMode(calendarSelectionMode[e.target.selectedIndex]);
updateSelectedDate();
});
document.getElementById('setAllowSelection').addEventListener('change', (e) => {
gcCalendar.setAllowSelection(allowSelections[e.target.selectedIndex]);
});
document.getElementById('setMaxSelectionCount').addEventListener('change', (e) => {
gcCalendar.setMaxSelectionCount(e.target.value);
});
document.getElementById('setWeekNumberSelect').addEventListener('change', (e) => {
gcCalendar.setWeekNumberSelect(e.target.checked);
});
document.getElementById('setWeekTitleSelect').addEventListener('change', (e) => {
gcCalendar.setWeekTitleSelect(e.target.checked);
});
const calendarSelectionMode = [
InputMan.CalendarSelectionMode.One,
InputMan.CalendarSelectionMode.MultiSimple,
InputMan.CalendarSelectionMode.MultiRich
];
const allowSelections = [
InputMan.AllowSelection.Anyday,
InputMan.AllowSelection.Workday,
InputMan.AllowSelection.Holiday
];
const holidayGroup = new InputMan.HolidayGroup('holiday', true);
const workdayGroup = new InputMan.HolidayGroup('workday', true);
// 振替休日を有効にします
holidayGroup.setWeekFlags('sunday', InputMan.WeekFlags.All);
holidayGroup.setOverride('sunday', InputMan.HolidayOverride.NextWorkDay);
// 振替休日用のツールチップテキスト
gcCalendar.setOverrideTipText('振替休日');
// 固定の祝日
holidayGroup.addHoliday(new InputMan.Holiday('元旦', 1, 1));
holidayGroup.addHoliday(new InputMan.Holiday('建国記念の日', 2, 11));
holidayGroup.addHoliday(new InputMan.Holiday('昭和の日', 4, 29));
holidayGroup.addHoliday(new InputMan.Holiday('憲法記念日', 5, 3));
holidayGroup.addHoliday(new InputMan.Holiday('みどりの日', 5, 4));
holidayGroup.addHoliday(new InputMan.Holiday('こどもの日', 5, 5));
holidayGroup.addHoliday(new InputMan.Holiday('文化の日', 11, 3));
holidayGroup.addHoliday(new InputMan.Holiday('勤労感謝の日', 11, 23));
// ハッピーマンデー
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('成人の日', InputMan.MonthFlags.January, InputMan.WeekFlags.Second, InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('海の日', InputMan.MonthFlags.July, InputMan.WeekFlags.Third, InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('敬老の日', InputMan.MonthFlags.September, InputMan.WeekFlags.Third, InputMan.DayOfWeek.Monday));
holidayGroup.addHoliday(new InputMan.DayOfWeekHoliday('体育の日', InputMan.MonthFlags.October, InputMan.WeekFlags.Second, InputMan.DayOfWeek.Monday));
// 2019年のみの祝日
holidayGroup.addHoliday(new InputMan.ForceHoliday('国民の休日', '2019/4/30'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('天皇の即位の日', '2019/5/1'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('国民の休日', '2019/5/2'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('即位礼正殿の儀', '2019/10/22'));
// 2020年のみの祝日
holidayGroup.addHoliday(new InputMan.ForceHoliday('海の日', '2020/7/23'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('スポーツの日', '2020/7/24'));
holidayGroup.addHoliday(new InputMan.ForceHoliday('山の日', '2020/8/10'));
// 2020年のみ平日扱い
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2020/7/20'));
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2020/8/11'));
workdayGroup.addHoliday(new InputMan.ForceWorkday('', '2020/10/12'));
// 年により変動のある祝日を設定します。
// 2000年から2050年までを対象としています。
for (var currentYear = 2000; currentYear <= 2050; currentYear++) {
var syunbun;
var syubun;
switch (currentYear % 4) {
case 0:
// 春分の日を設定します。
if (currentYear < 1960) syunbun = currentYear + '/3/21';
else if (currentYear >= 1960 && currentYear < 2092) syunbun = currentYear + '/3/20';
else syunbun = currentYear + '/3/19';
// 秋分の日を設定します。
if (currentYear < 2012) syubun = currentYear + '/9/23';
else syubun = currentYear + '/9/22';
break;
case 1:
// 春分の日を設定します。
if (currentYear < 1993) syunbun = currentYear + '/3/21';
else syunbun = currentYear + '/3/20';
// 秋分の日を設定します。
if (currentYear < 1921) syubun = currentYear + '/9/24';
else if (currentYear >= 1921 && currentYear < 2045) syubun = currentYear + '/9/23';
else syubun = currentYear + '/9/22';
break;
case 2:
// 春分の日を設定します。
if (currentYear < 2026) syunbun = currentYear + '/3/21';
else syunbun = currentYear + '/3/20';
// 秋分の日を設定します。
if (currentYear < 1950) syubun = currentYear + '/9/24';
else if (currentYear >= 1950 && currentYear < 2078) syubun = currentYear + '/9/23';
else syubun = currentYear + '/9/22';
break;
case 3:
// 春分の日を設定します。
if (currentYear < 1927) syunbun = currentYear + '/3/22';
else if (currentYear >= 1927 && currentYear < 2059) syunbun = currentYear + '/3/21';
else syunbun = currentYear + '/3/20';
// 秋分の日を設定します。
if (currentYear < 1983) syubun = currentYear + '/9/24';
else syubun = currentYear + '/9/23';
break;
}
// 春分の日、秋分の日を追加します。
holidayGroup.addHoliday(new InputMan.ForceHoliday('春分の日', syunbun));
holidayGroup.addHoliday(new InputMan.ForceHoliday('秋分の日', syubun));
// 2016年以降「山の日」を追加します。
if (currentYear > 2016) {
holidayGroup.addHoliday(new InputMan.ForceHoliday('山の日', currentYear + '/8/11'));
}
// 天皇誕生日を追加します。
if (currentYear < 2019) {
holidayGroup.addHoliday(new InputMan.ForceHoliday('天皇誕生日', currentYear + '/12/23'));
}
else if (currentYear > 2019) {
holidayGroup.addHoliday(new InputMan.ForceHoliday('天皇誕生日', currentYear + '/2/23'));
}
// 2つの祝日に挟まれた営業日を休日に設定します。
if (currentYear > 2003) {
const syubunDate = new Date(syubun);
if (syubunDate.getDay() == 3) {
syubunDate.setDate(syubunDate.getDate() - 1);
holidayGroup.addHoliday(new InputMan.ForceHoliday('国民の休日', syubunDate));
}
}
}
gcCalendar.addHolidayGroup(holidayGroup);
gcCalendar.addHolidayGroup(workdayGroup);
<!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>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="gcCalendar"></div>
</td>
<td style="vertical-align: top; padding-left: 2rem;">
<div>選択日付</div>
<div id="selections" style="height: 15rem; overflow: auto;"></div>
</td>
</tr>
</table>
<table class="sample">
<tr>
<th>選択方法</th>
<td>
<select id="setSelectionMode">
<option>単一の日付</option>
<option>複数の日付</option>
<option>複数の日付（Ctrl／Shiftキーで選択可）</option>
</select><br>
<label><input type="checkbox" id="setWeekNumberSelect">週番号のクリックで週全体を選択</label><br>
<label><input type="checkbox" id="setWeekTitleSelect">曜日のクリックで曜日全体を選択</label>
</td>
</tr>
<tr>
<th>選択可能な日付</th>
<td>
<select id="setAllowSelection">
<option>すべて</option>
<option>営業日</option>
<option>休日と休業日</option>
</select>
</td>
</tr>
<tr>
<th>最大選択日数</th>
<td><input type="number" value="14" min="1" id="setMaxSelectionCount"></td>
</tr>
</table>
</body>
</html>
/* 休日のスタイル */
[calendar-holiday-type] {
color: red;
}
/* 休日のスタイル */
[gcim-control-appearance="modern"] [calendar-holiday-type] {
color: red;
}
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: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/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'
},
}
});
