igGrid: 編集用 datePicker のオプション設定を行う

igGrid では、editorType に datePicker を指定することで、日付列の編集エディタとして、jQuery UI の datePicker を利用することができます。この datePicker はセル編集時に表示されるのですが、datePicker のオプション設定を行いたい局面があるかと思います。そのような場合には、editorOptions > datepickerOptions にて、datePicker の各種オプションを設定することができます。

下記例では、datePicker 上で選択されている日付が変更されたタイミングで発生する、onSelect イベントをハンドルする例です。

$("#grid").igGrid({
  ...
  columns: [
    ...
    {
      headerText: "登録日",
      key: "RegisteredDate",
      dataType: "date",
      width: "120px",
      format: "date",
    },
    ...
  ],
  features: [
    {
      name: "Updating",
      editMode: "cell",
      enableDeleteRow: false,
      enableAddRow: false,
      columnSettings: [
        {
          columnKey: "RegisteredDate",
          editorType: "datepicker",
          editorOptions: {
            datepickerOptions: {
              onSelect: function (dateText) {
                console.log("選択された日: " + dateText);
              }
            }
          }
        }
      ]
    }
  ]
})