date-picker.md

DatePicker 📅

The TOAST UI DatePicker component can be easily integrated into the TOAST UI Grid. Just by using cell editor options to the columns, you can use a DatePicker in the Grid without extra coding.

Styles

If you want to use the existing tui-date-picker or tui-time-picker style, add the css file before using it.

import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';

Adding options to the columns

To use a DatePicker, you need to add the editor option to the columns. This is all you need to do, since the Grid internally creates a instance of tui-date-picker, and controls it in response to user control. The option looks like below.

You can easily use the default Datepicker by specifying datePicker to the editor property of columns.

const columns = [
  {
    name: 'datepicker default',
    editor: 'datePicker'
  }
];

Using the options property, you can set up options to be used to create a DatePicker instance. For more information, see the DatePicker API page.

(Although there are much more options available for the DatePicker component, other options are restricted as they might cause some integration issues.)

const columns = [
  {
    name: 'monthPicker',
    editor: {
      type: 'datePicker',
      options: {
        format: 'yyyy-MM',
        type: 'month'
      }
    }
  },
  {
    name: 'selectableRanges',
    editor: {
      type: 'datePicker',
      options: {
        format: 'yyyy/MM/dd',
        selectableRanges: [[new Date(1992, 2, 25), new Date(1992, 2, 29)]]
      }
    }
  },
  {
    name: 'timePickerWithTab',
    editor: {
      type: 'datePicker',
      options: {
        format: 'yyyy-MM-dd HH:mm A',
        timepicker: {
          layoutType: 'tab',
          inputType: 'spinbox'
        }
      }
    }
  }
]

The result will looks like this:

Example

You can see the sample Grid using datePicker here.