SpreadJSの入力にInputManJSセルを使う

// Spread.Sheets関連モジュールのインポート
import * as GCSS from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-resources-ja';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white';
// InputManJS関連モジュールのインポート
import '@grapecity/inputman/CSS/gc.inputman-js.css';
import * as GCIMCellType from '@grapecity/spread-sheets-inputmancelltype';

function setGcMaskCellType(sheet) {
    var gcMaskCellType = new GCIMCellType.GcMaskCellType({
        autoConvert: true,
        displayType: 'text',
        exitOnLastChar: true,
        formatPattern: '〒\\D{3}-\\D{4}',
        showClearButton: true,
        showSpinButon: false,
        watermarkNullText: '郵便番号の入力'
    });
    sheet.setCellType(1, 1, gcMaskCellType);
};

function setGcDateTimeCellType(sheet) {
    var gcDateTimeCellType = new GCIMCellType.GcDateTimeCellType({
        displayType: 'text',
        dropDownConfig: {
            dropDownType: GC.InputMan.DateDropDownType.Calendar,
            showWeekNumber: false,
            type: GC.InputMan.PickerType.DateTime,
        },
        exitOnLastChar: true,
        formatPattern: 'gggee年MM月dd日',
        maxDate: '2099/12/31',
        minDate: '2000/1/1',
        showClearButton: true,
        showDropDownButton: true,
        showSpinButon: false,
        watermarkNullText: '和暦日付の入力'
    });
    sheet.setCellType(3, 1, gcDateTimeCellType);
};

.gcim-calendar__today-button {
    color: red;
}

function setGcNumberCellType(sheet){
  var gcNumberCellType = new GCIMCellType.GcNumberCellType({
    displayType: 'text',
    formatDigit: '##,##0',
    maxValue: Number(99999),
    minValue: Number(-99999),
    negativePrefix: '-$',
    negativeSuffix: '',
    positivePrefix: '$',
    positiveSuffix: '',
    showClearButton: true,
    showNumericPad: true,
    showSpinButton: true,
    spinWheel:false,
    watermarkNullText: '数値の入力'  
  });
  sheet.setCellType(5, 1, gcNumberCellType);
};

function setGcComboBoxCellType(sheet){
  var gcComboBoxCellType = new GCIMCellType.GcComboBoxCellType({
    items: [
    { id: 15, product: 'ピュアデミグラスソース' },
    { id: 17, product: 'だしこんぶ' },
    { id: 18, product: 'ピリカラタバスコ' },
    { id: 84, product: 'なまわさび' },
    { id: 85, product: 'なまからし' },
    { id: 86, product: 'なましょうが' },
    ],
    columns: [
      { name: 'id', label: 'コード', width: 70 },
      { name: 'product', label: '品名', width: 180 },
    ],
    displayMemberPath: 'product',
    valueMemberPath: 'id',
    autoFilter: GC.InputMan.AutoFilter.StartWith,
    dropDownHeight: 300,
    dropDownWidth: 'auto',
    generatingItem: function (args) {
      args.item.classList.add(args.index % 2 ? 'odd' : 'even');
    },
    isEditable: true,
    itemHeight: 25,
    showHeader: false,
    showSpinButton: true,
    watermarkNullText: '項目を選択してください',
  });
  sheet.setCellType(7, 1, gcComboBoxCellType);
};

.odd {
    background: aliceblue;
}

.even {
    background: white;
}