GcDateTime型セル

GcDateTime型セルは、和暦をはじめとする日本固有の表示に対応しています。またスピンボタンやドロップダウンするカレンダーやピッカーなど、視覚的な入力サポート機能も豊富に搭載しています。

GcDateTime型セルを作成するには、次の例のようなコードを使用します。 GcDateTime型セルの主なオプションは以下の通りです。オプションの完全なリストと機能の詳細については、InputManJSの製品ヘルプやデモアプリケーションを参照してください。 formatPattern: 日付時刻の入力書式を設定します。 displayType: セルの値に入力書式と同じ文字列を設定する場合は'text'を、日付値を設定する場合は'value'を設定します。'value'を設定した場合、セルのフォーマッタで指定された書式で表示されます。 showDropDownButton: ドロップダウンボタンを表示します。 dropDownConfig.dropDownType: ドロップダウンの種類を設定します。 dropDownConfig.type: 日付時刻ピッカーの種類を指定します。 showSpinButton: スピンボタンを表示します。 minDate: 入力可能な日付の最小値を設定します。 maxDate: 入力可能な日付の最大値を設定します。 watermarkNullText: 未入力のときの代替テキストを設定します。 exitOnLastChar: 入力が終了したときに、自動的に次のセルへフォーカスを移動するかどうかを設定します。
var minDate, maxDate; window.onload = function () { minDate = new GC.InputMan.GcDateTime(document.getElementById('minDate'), { displayFormatPattern: 'yyyy/MM/dd', formatPattern: 'yyyy/MM/dd', showDropDownButton: true, dropDownConfig: { dropDownType: GC.InputMan.DateDropDownType.Calendar } }); minDate.setValue(null); maxDate = new GC.InputMan.GcDateTime(document.getElementById('maxDate'), { displayFormatPattern: 'yyyy/MM/dd', formatPattern: 'yyyy/MM/dd', showDropDownButton: true, dropDownConfig: { dropDownType: GC.InputMan.DateDropDownType.Calendar } }); maxDate.setValue(null); var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.setColumnWidth(0, 150); sheet.setColumnWidth(1, 200); sheet.setValue(0, 0, 'GcDateTime型セル'); sheet.setValue(0, 1, new Date()); refresh(sheet); var forms = 'formatPattern,displayTypeText,dropDownType,pickerType,customEra,showSpinButton,watermarkNullText,exitOnLastChar'.split(','); for (var i = 0; i < forms.length; i++) { document.getElementById(forms[i]).addEventListener('change', function() { refresh(sheet); }); } minDate.onValueChanged(function() { refresh(sheet); }); maxDate.onValueChanged(function() { refresh(sheet); }); }; function refresh(sheet) { var pickerTypes = [ GC.InputMan.PickerType.DateTime, GC.InputMan.PickerType.Date, GC.InputMan.PickerType.Time ]; var gcDateTimeCellType = new GC.Spread.Sheets.CellTypes.GcDateTimeCellType({ formatPattern: document.getElementById('formatPattern').options[document.getElementById('formatPattern').selectedIndex].value, displayType: document.getElementById('displayTypeText').checked ? 'text' : 'value', showDropDownButton: document.getElementById('dropDownType').selectedIndex > 0, dropDownConfig: { dropDownType: document.getElementById('dropDownType').selectedIndex == 1 ? GC.InputMan.DateDropDownType.Calendar : GC.InputMan.DateDropDownType.Picker, type: pickerTypes[document.getElementById('pickerType').selectedIndex] }, showSpinButton: document.getElementById('showSpinButton').checked, minDate: minDate.getValue(), maxDate: maxDate.getValue(), watermarkNullText: document.getElementById('watermarkNullText').checked ? '値を入力してください' : '', exitOnLastChar: document.getElementById('exitOnLastChar').checked }); sheet.setCellType(0, 1, gcDateTimeCellType); var defaultEra = [ { 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: '令和', abbreviation: '令', symbol: 'R', startDate: '2019/05/01', shortcuts: '5,R', } ]; var customEra = [ { 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', }, // 2019/5/1から「新規」という年号が開始される場合の例 { name: '新規', abbreviation: '新', symbol: 'N', startDate: '2019/05/01', shortcuts: '5,N', } ]; GC.InputMan.updateCustomEra(document.getElementById('customEra').checked ? customEra : defaultEra); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/inputman/CSS/gc.inputman-js.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/inputman/JS/gc.inputman-js.ja.js" type="text/javascript"></script> <script src="https://cdn.grapecity.com/inputmancelltype/hosted/scripts/gc.spread.sheets.inputmancelltype.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/inputman/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body style="position:absolute;top:0;bottom:0;left:0;right:0;"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <label for="formatPattern">書式</label> <select id="formatPattern"> <option value="yyyy/MM/dd HH:mm:ss">2019/01/01 13:30:01</option> <option value="yyyy/MM/dd">2019/01/01</option> <option value="gggee年MM月dd日">平成01年12月01日</option> <option value="gg ee年MM月dd日">平 01年12月01日</option> <option value="g. ee/MM/dd">H. 01/12/01</option> <option value="HH:mm:ss">13:30:01</option> <option value="tt hh時mm分ss秒">午後 01時30分01秒</option> </select><br><br> <label><input id="displayTypeText" type="checkbox">入力書式と同じ文字列をセルに表示</label><br><br> <label for="dropDownType">ドロップダウンボタン</label> <select id="dropDownType"> <option>なし</option> <option selected>ドロップダウンカレンダー</option> <option>ドロップダウンピッカー</option> </select><br><br> <label for="pickerType">ドロップダウンピッカーの種類</label> <select id="pickerType"> <option>日付と時刻</option> <option>日付</option> <option>時刻</option> </select><br><br> <label><input id="customEra" type="checkbox">年号のカスタマイズ</label><br><br> <label><input id="showSpinButton" type="checkbox">スピンボタン</label><br><br> <label>日付の最小値 <input id="minDate"></label><br><br> <label>日付の最大値 <input id="maxDate"></label><br><br> <label><input id="watermarkNullText" type="checkbox">未入力時の代替テキスト</label><br><br> <label><input id="exitOnLastChar" type="checkbox">規定文字数の入力時に入力を確定</label> </div> </div> </body> </html>
/* ウォーターマークのスタイル */ .gcim_watermark_null { color: lightgrey; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } .option-row { padding-bottom: 8px; } .gcim_input_helper { border: none; width: 0; left: 0 !important; top: 0 !important; padding: 0; margin: 0; }