Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (63 sloc) 2.36 KB

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'
  }
];

default_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:

options_datepicker

Example

You can see the sample Grid using datePicker here.

You can’t perform that action at this time.