Pikaday

Overview

This guide shows how to create a custom date picker cell using Pikaday, a lightweight, no-dependencies date picker library. This guide is essential for migration - the built-in date cell type with Pikaday will be removed in the next Handsontable release. Use this recipe to maintain Pikaday functionality in your application.

Difficulty: Intermediate Time: ~25 minutes Libraries: @handsontable/pikaday, moment

What You’ll Build

A cell that:

Displays formatted dates (e.g., “12/31/2024” or “31/12/2024”)
Opens a beautiful calendar picker when edited
Supports per-column configuration (date formats, first day of week, disabled dates)
Handles keyboard navigation (arrow keys to navigate dates)
Auto-closes and saves when a date is selected
Works with portal positioning for better z-index handling

Prerequisites

1
npm install @handsontable/pikaday moment

Why these libraries?

@handsontable/pikaday - The Pikaday date picker library (Handsontable’s fork)
moment - Date formatting and parsing (can be replaced with date-fns, dayjs, etc.)

Import Dependencies

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import moment from 'moment';
4
import Pikaday from '@handsontable/pikaday';
5
import { CellProperties } from 'handsontable/settings';
6
import { editorFactory } from 'handsontable/editors';
7
import { rendererFactory } from 'handsontable/renderers';
8

9
registerAllModules();

What we’re importing:

Handsontable core and styles
editorFactory and rendererFactory for creating custom cell type components
Pikaday for date picker functionality
Moment for date formatting and parsing

Define Date Formats
```
1
const DATE_FORMAT_US = 'MM/DD/YYYY';
2
const DEFAULT_DATE_FORMAT = DATE_FORMAT_US;
```
Why constants?
- Reusability across renderer and column configuration
- Single source of truth
- Easy to add more formats (EU, ISO, custom, etc.)

Define TypeScript Types

Define types for editor properties and methods to ensure type safety.

1
type EditorPropertiesType = {
2
  input: HTMLInputElement;
3
  pickaday: Pikaday;
4
  datePicker: HTMLDivElement;
5
  parentDestroyed: boolean;
6
};
7

8
// Helper type to extract the editor type from factory callbacks
9
type FactoryEditorType<TProps, TMethods> = Parameters<
10
  Parameters<
11
    typeof editorFactory<TProps, TMethods>
12
  >[0]["init"]
13
>[0];
14

15
type EditorMethodsType = {
16
  showDatepicker: (
17
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
18
    event: Event | undefined,
19
  ) => void;
20
  hideDatepicker: (
21
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
22
  ) => void;
23
  getDatePickerConfig: (
24
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
25
  ) => Pikaday.PikadayOptions;
26
  getDateFormat: (
27
    editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
28
  ) => string;
29
};

What’s happening:

EditorPropertiesType: Defines custom properties added to the editor instance
FactoryEditorType: Helper to extract the correct editor type from factory callbacks
EditorMethodsType: Defines custom methods that will be available on the editor

Why this matters:

Provides full TypeScript type safety
Enables autocomplete in your IDE
Catches type errors at compile time

Create the Renderer

The renderer controls how the cell looks when not being edited.
```
1
renderer: rendererFactory(({ td, value, cellProperties }) => {
2
  td.innerText = moment(new Date(value), cellProperties.renderFormat).format(
3
    cellProperties.renderFormat,
4
  );
5
})
```
What’s happening:
- value is the raw date value (e.g., ISO string “2024-12-31” or formatted “12/31/2024”)
- cellProperties.renderFormat is a custom property we’ll set per column
- moment().format() converts to desired format
- Display the formatted date
Why use cellProperties?
- Allows different columns to display dates differently
- One cell definition, multiple configurations

Editor - Initialize (`init`)

Create the input element and set up event handling to prevent clicks on the datepicker from closing the editor.

1
init(editor) {
2
  editor.parentDestroyed = false;
3
  // Create the input element on init. This is a text input that date picker will be attached to.
4
  editor.input = editor.hot.rootDocument.createElement(
5
    'input',
6
  ) as HTMLInputElement;
7

8
  // Use the container as the date picker container
9
  editor.datePicker = editor.container;
10

11
  /**
12
   * Prevent recognizing clicking on datepicker as clicking outside of table.
13
   */
14
  editor.hot.rootDocument.addEventListener('mousedown', (event) => {
15
      if (
16
        event.target &&
17
        (event.target as HTMLElement).classList.contains('pika-day')
18
      ) {
19
        editor.hideDatepicker(editor);
20
      }
21
    },
22
  );
23
}

What’s happening:

Initialize parentDestroyed flag to track editor lifecycle
Create an input element using editor.hot.rootDocument.createElement()
Use the editor container as the Pikaday container
Create event listener to handle clicks on datepicker days
The editorFactory helper handles container creation and DOM insertion

Key concepts:

The `Event Listener` pattern

This is crucial! Without it:

User clicks cell to edit
Pikaday calendar opens
User clicks on a calendar day
Handsontable thinks user clicked “outside” the editor
Editor closes immediately!

Solution:

1
editor.hot.rootDocument.addEventListener('mousedown', (event) => {
2
  if ((event.target as HTMLElement).classList.contains('pika-day')) {
3
    editor.hideDatepicker(editor);
4
  }
5
});

Why `editor.hot.rootDocument.createElement()`?

Handsontable might be in an iframe or shadow DOM
editor.hot.rootDocument ensures correct document context
Ensures compatibility across different environments

Editor - Get Date Picker Config (`getDatePickerConfig`)

Build the Pikaday configuration object with proper callbacks.

1
getDatePickerConfig(editor) {
2
  const htInput = editor.input;
3
  const options: Pikaday.PikadayOptions = {};
4

5
  // Merge custom config from cell properties
6
  if (editor.cellProperties && editor.cellProperties.datePickerConfig) {
7
    Object.assign(options, editor.cellProperties.datePickerConfig);
8
  }
9
  const origOnSelect = options.onSelect;
10
  const origOnClose = options.onClose;
11

12
  // Configure Pikaday
13
  options.field = htInput;
14
  options.trigger = htInput;
15
  options.container = editor.datePicker;
16
  options.bound = false;
17
  options.keyboardInput = false;
18
  options.format = options.format ?? editor.getDateFormat(editor);
19
  options.reposition = options.reposition || false;
20
  options.isRTL = false;
21

22
  // Handle date selection
23
  options.onSelect = function (date) {
24
    let dateStr;
25

26
    if (!isNaN(date.getTime())) {
27
      dateStr = moment(date).format(editor.getDateFormat(editor));
28
    }
29
    editor.setValue(dateStr);
30

31
    if (origOnSelect) {
32
      origOnSelect.call(editor.pickaday, date);
33
    }
34

35
    if (Handsontable.helper.isMobileBrowser()) {
36
      editor.hideDatepicker(editor);
37
    }
38
  };
39

40
  // Handle date picker close
41
  options.onClose = () => {
42
    if (!editor.parentDestroyed) {
43
      editor.finishEditing(false);
44
    }
45
    if (origOnClose) {
46
      origOnClose();
47
    }
48
  };
49

50
  return options;
51
}

What’s happening:

Start with empty options object
Merge custom config from cellProperties.datePickerConfig (allows per-column customization)
Store original callbacks to preserve them
Configure Pikaday with editor-specific settings
Set up onSelect to format date and save value
Set up onClose to finish editing

Key configuration options:

field: The input element Pikaday attaches to
trigger: Element that triggers the picker (same as field)
container: Where to render the calendar (editor container)
bound: false: Don’t position relative to field
keyboardInput: false: Disable direct keyboard input (we handle it via shortcuts)
reposition: false: Don’t auto-reposition (we handle positioning)

Editor - Show Datepicker (`showDatepicker`)

Initialize and display the Pikaday calendar when the editor opens.

1
showDatepicker(editor, event) {
2
  const dateFormat = editor.getDateFormat(editor);
3
  // @ts-ignore
4
  const isMouseDown = editor.hot.view.isMouseDown();
5
  const isMeta = event && 'keyCode' in event
6
    ? Handsontable.helper.isFunctionKey((event as KeyboardEvent).keyCode)
7
    : false;
8
  let dateStr;
9

10
  editor.datePicker.style.display = 'block';
11

12
  // Create new Pikaday instance
13
  editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));
14

15
  // Configure Moment.js integration if available
16
  // @ts-ignore
17
  if (typeof editor.pickaday.useMoment === 'function') {
18
    // @ts-ignore
19
    editor.pickaday.useMoment(moment);
20
  }
21
  // @ts-ignore
22
  editor.pickaday._onInputFocus = function () {};
23

24
  // Handle existing value
25
  if (editor.originalValue) {
26
    dateStr = editor.originalValue;
27

28
    if (moment(dateStr, dateFormat, true).isValid()) {
29
      editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
30
    }
31

32
    if (editor.getValue() !== editor.originalValue) {
33
      editor.setValue(editor.originalValue);
34
    }
35

36
    if (!isMeta && !isMouseDown) {
37
      editor.setValue('');
38
    }
39
  } else if (editor.cellProperties.defaultDate) {
40
    dateStr = editor.cellProperties.defaultDate;
41

42
    if (moment(dateStr, dateFormat, true).isValid()) {
43
      editor.pickaday.setMoment(moment(dateStr, dateFormat), true);
44
    }
45

46
    if (!isMeta && !isMouseDown) {
47
      editor.setValue('');
48
    }
49
  } else {
50
    editor.pickaday.gotoToday();
51
  }
52
}

What’s happening:

Get date format for parsing
Check if mouse is down or function key pressed (for special behavior)
Show the date picker container
Create new Pikaday instance with configuration
Configure Moment.js integration
Disable input focus handler (we handle focus ourselves)
Set initial date based on cell value, default date, or today

Key concepts:

Why create Pikaday instance in `showDatepicker`?

Pikaday instance is created fresh each time editor opens
Allows per-edit configuration changes
Ensures clean state for each edit session

The `isMeta` and `isMouseDown` checks

If function key (F2, etc.) or mouse is down, don’t clear the input
Preserves value when opening via keyboard or programmatically
Provides better UX for keyboard users

Editor - Hide Datepicker (hideDatepicker)

Close the Pikaday calendar.
```
1
hideDatepicker(editor) {
2
  editor.pickaday.hide();
3
}
```
Editor - After Open Hook (afterOpen)

Match the editor input dimensions to the cell and show the datepicker.
```
1
afterOpen(editor, event) {
2
  const cellRect = editor.TD.getBoundingClientRect();
3

4
  editor.input.style.width = `${cellRect.width}px`;
5
  editor.input.style.height = `${cellRect.height}px`;
6
  editor.showDatepicker(editor, event);
7
}
```
What’s happening:
1. Get the cell’s bounding rectangle for exact dimensions
2. Set the input width and height to match the cell
3. Show the datepicker
Why getBoundingClientRect?
- Provides pixel-perfect dimensions matching the cell
- Works correctly regardless of cell padding, borders, or theme
- The CSS file handles the visual styling (borders, padding, focus states)
Editor - After Close Hook (afterClose)

Clean up the Pikaday instance when the editor closes.
```
1
afterClose(editor) {
2
  if (editor.pickaday.destroy) {
3
    editor.pickaday.destroy();
4
  }
5
}
```
Why this matters:
- Pikaday creates DOM elements and event listeners
- Without cleanup, these accumulate over time
- Essential for long-running applications
Editor - Get Value and Set Value

Standard value management methods.
```
1
getValue(editor) {
2
  return editor.input.value;
3
}
4

5
setValue(editor, value) {
6
  editor.input.value = value;
7
}
```
Why simple?
- Pikaday automatically updates input.value when date is selected
- We just read/write the input value
- Formatting is handled by Pikaday and our onSelect callback

Editor - Get Date Format (`getDateFormat`)

Helper method to get the date format for the current cell.

1
getDateFormat(
2
  editor: FactoryEditorType<EditorPropertiesType, EditorMethodsType>,
3
) {
4
  return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;
5
}

Editor - Keyboard Shortcuts

Add keyboard navigation for date selection.

1
shortcuts: [
2
  {
3
    keys: [['ArrowLeft']],
4
    callback: (editor, _event) => {
5
      editor.pickaday.adjustDate('subtract', 1);
6
      _event.preventDefault();
7
    },
8
  },
9
  {
10
    keys: [['ArrowRight']],
11
    callback: (editor, _event) => {
12
      editor.pickaday.adjustDate('add', 1);
13
      _event.preventDefault();
14
    },
15
  },
16
  {
17
    keys: [['ArrowUp']],
18
    callback: (editor, _event) => {
19
      editor.pickaday.adjustDate('subtract', 7);
20
      _event.preventDefault();
21
    },
22
  },
23
  {
24
    keys: [['ArrowDown']],
25
    callback: (editor, _event) => {
26
      editor.pickaday.adjustDate('add', 7);
27
      _event.preventDefault();
28
    },
29
  }
30
]

What’s happening:

ArrowLeft: Move back one day
ArrowRight: Move forward one day
ArrowUp: Move back one week (7 days)
ArrowDown: Move forward one week (7 days)

Editor - Portal Positioning

Use portal positioning for better z-index handling.
```
1
position: 'portal',
```
Why portal instead of container?
- Datepicker can extend beyond cell boundaries
- Portal ensures it’s always on top
- Better for complex layouts

Editor Input Styling (CSS)

Style the editor input to match Handsontable’s native editor appearance using CSS custom properties.

1
.ht_editor_visible > input {
2
  width: 100%;
3
  height: 100%;
4
  box-sizing: border-box !important;
5
  border: none;
6
  border-radius: 0;
7
  outline: none;
8
  margin-top: -1px;
9
  margin-left: -1px;
10
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
11
    var(--ht-cell-editor-border-color, #1a42e8),
12
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
13
    var(--ht-cell-editor-shadow-color, transparent) !important;
14
  background-color: var(--ht-cell-editor-background-color, #ffffff) !important;
15
  padding: var(--ht-cell-vertical-padding, 4px)
16
    var(--ht-cell-horizontal-padding, 8px) !important;
17
  border: none !important;
18
  font-family: inherit;
19
  font-size: var(--ht-font-size);
20
  line-height: var(--ht-line-height);
21
}
22
.ht_editor_visible > input:focus-visible {
23
  border: none !important;
24
  outline: none !important;
25
}

What’s happening:

Uses Handsontable’s CSS custom properties (--ht-cell-editor-*) for theme compatibility
inset box-shadow replaces borders for the blue editor highlight
-1px margins correct portal positioning offset
Inherits font properties from the table for consistency
:focus-visible overrides prevent browser default focus styles

Complete Cell Definition

Put it all together:

1
const cellDefinition: Pick<
2
  CellProperties,
3
  'renderer' | 'validator' | 'editor'
4
> = {
5
  renderer: rendererFactory(({ td, value, cellProperties }) => {
6
    td.innerText = moment(new Date(value), cellProperties.renderFormat).format(
7
      cellProperties.renderFormat,
8
    );
9
  }),
10

11
  editor: editorFactory<
12
    EditorPropertiesType,
13
    EditorMethodsType
14
  >({
15
    position: 'portal',
16
    shortcuts: [
17
      // ... keyboard shortcuts from Step 13
18
    ],
19
    init(editor) {
20
      // ... from Step 5
21
    },
22
    getDatePickerConfig(editor) {
23
      // ... from Step 6
24
    },
25
    hideDatepicker(editor) {
26
      // ... from Step 8
27
    },
28
    showDatepicker(editor, event) {
29
      // ... from Step 7
30
    },
31
    afterClose(editor) {
32
      // ... from Step 10
33
    },
34
    afterOpen(editor, event) {
35
      // ... from Step 9
36
    },
37
    getValue(editor) {
38
      // ... from Step 11
39
    },
40
    setValue(editor, value) {
41
      // ... from Step 11
42
    },
43
    getDateFormat(editor) {
44
      // ... from Step 12
45
    },
46
  }),
47
};

Use in Handsontable

1
const container = document.querySelector('#example1')!;
2

3
const hotOptions: Handsontable.GridSettings = {
4
  data,
5
  colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],
6
  autoRowSize: true,
7
  rowHeaders: true,
8
  height: 'auto',
9
  width: '100%',
10
  autoWrapRow: true,
11
  headerClassName: 'htLeft',
12
  columns: [
13
    { data: 'itemName', type: 'text', width: 130 },
14
    { data: 'category', type: 'text', width: 120 },
15
    { data: 'leadEngineer', type: 'text', width: 150 },
16
    {
17
      data: 'restockDate',
18
      width: 150,
19
      allowInvalid: false,
20
      ...cellDefinition,
21
      renderFormat: DATE_FORMAT_US,
22
      dateFormat: DATE_FORMAT_US,
23
      correctFormat: true,
24
      defaultDate: '01/01/2020',
25
      datePickerConfig: {
26
        firstDay: 0,
27
        showWeekNumber: true,
28
        disableDayFn(date: Date) {
29
          return date.getDay() === 0 || date.getDay() === 6;
30
        },
31
      },
32
    },
33
    {
34
      data: 'cost',
35
      type: 'numeric',
36
      width: 120,
37
      className: 'htRight',
38
      numericFormat: {
39
        pattern: '$0,0.00',
40
        culture: 'en-US',
41
      },
42
    },
43
  ],
44
  licenseKey: 'non-commercial-and-evaluation',
45
};
46

47
const hot = new Handsontable(container, hotOptions);

Key configuration:

...cellDefinition - Spreads renderer and editor into the column config
renderFormat - Format for displaying dates in cells
dateFormat - Format for Pikaday date picker
datePickerConfig - Additional Pikaday configuration options
defaultDate - Default date when cell is empty
headerClassName: 'htLeft' - Left-aligns all column headers

How It Works - Complete Flow

Initial Load: Cell displays formatted date (e.g., “08/01/2025”)
User Double-Clicks or F2: Editor opens, container positioned in portal
After Open: Input sized to match cell via getBoundingClientRect, showDatepicker called
Show Datepicker: Pikaday instance created, calendar displayed
User Selects Date: onSelect callback fires, formats date, saves value
User Clicks Day: Event listener detects click, hides datepicker, finishes editing
After Close: Pikaday instance destroyed, memory cleaned up
Re-render: Cell displays updated formatted date

Migration from Built-in Date Cell Type

If you’re currently using the built-in date cell type with Pikaday, here’s how to migrate:

Before (Built-in):

1
columns: [{
2
  data: 'restockDate',
3
  type: 'date',
4
  dateFormat: 'MM/DD/YYYY',
5
  datePickerConfig: {
6
    firstDay: 0,
7
  }
8
}]

After (Custom Editor):

1
columns: [{
2
  data: 'restockDate',
3
  ...cellDefinition,  // Add the custom cell definition
4
  dateFormat: 'MM/DD/YYYY',
5
  renderFormat: 'MM/DD/YYYY',  // Add render format
6
  datePickerConfig: {
7
    firstDay: 0,
8
  }
9
}]

Key differences:

Replace type: "date" with ...cellDefinition
Add renderFormat property (for cell display)
Keep dateFormat and datePickerConfig (they work the same)

Enhancements

Different Date Formats per Column

1
columns: [
2
  {
3
    data: 'restockDate',
4
    ...cellDefinition,
5
    renderFormat: 'MM/DD/YYYY',  // US format
6
    dateFormat: 'MM/DD/YYYY',
7
  },
8
  {
9
    data: 'restockDate',
10
    ...cellDefinition,
11
    renderFormat: 'DD/MM/YYYY',  // EU format
12
    dateFormat: 'DD/MM/YYYY',
13
  }
14
]

Date Range Restrictions

1
datePickerConfig: {
2
  minDate: new Date('2024-01-01'),
3
  maxDate: new Date('2024-12-31'),
4
  disableDayFn(date) {
5
    // Disable weekends
6
    return date.getDay() === 0 || date.getDay() === 6;
7
  }
8
}

Custom Date Formatting

Replace Moment.js with another library:

1
import { format, parse } from 'date-fns';
2

3
// In renderer
4
renderer: rendererFactory(({ td, value, cellProperties }) => {
5
  td.innerText = format(new Date(value), cellProperties.renderFormat);
6
})
7

8
// In getDatePickerConfig
9
options.format = 'MM/DD/YYYY'; // Pikaday format string

Localization

1
import 'pikaday/css/pikaday.css';
2
import moment from 'moment';
3
import 'moment/locale/fr';
4

5
moment.locale('fr');
6

7
datePickerConfig: {
8
  i18n: {
9
    previousMonth: 'Mois précédent',
10
    nextMonth: 'Mois suivant',
11
    months: ['Janvier', 'Février', 'Mars', ...],
12
    weekdays: ['Dimanche', 'Lundi', 'Mardi', ...],
13
    weekdaysShort: ['Dim', 'Lun', 'Mar', ...]
14
  }
15
}

Accessibility

Pikaday has good keyboard support out of the box:

Keyboard navigation:

Arrow Keys: Navigate dates (via our shortcuts)
Enter: Select current date
Escape: Close datepicker
Tab: Navigate to next field
Page Up/Down: Navigate months
Home/End: Navigate to first/last day of month

ARIA attributes: Pikaday automatically adds ARIA attributes for screen readers.

Performance Considerations

Why This Is Fast

Lazy Initialization: Pikaday instance created only when editor opens
Efficient Cleanup: Instance destroyed when editor closes
Portal Positioning: Better z-index handling without performance cost

Congratulations! You’ve created a production-ready Pikaday date picker cell with full customization options, keyboard navigation, and proper lifecycle management. This recipe ensures you can continue using Pikaday even after the built-in date cell type is removed!

Pikaday

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define Date Formats

Define TypeScript Types

Create the Renderer

Editor - Initialize (`init`)

The `Event Listener` pattern

Why `editor.hot.rootDocument.createElement()`?

Editor - Get Date Picker Config (`getDatePickerConfig`)

Editor - Show Datepicker (`showDatepicker`)

Why create Pikaday instance in `showDatepicker`?

The `isMeta` and `isMouseDown` checks

Editor - Hide Datepicker (`hideDatepicker`)

Editor - After Open Hook (`afterOpen`)

Editor - After Close Hook (`afterClose`)

Editor - Get Value and Set Value

Editor - Get Date Format (`getDateFormat`)

Editor - Keyboard Shortcuts

Editor - Portal Positioning

Editor Input Styling (CSS)

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Migration from Built-in Date Cell Type

Before (Built-in):

After (Custom Editor):

Enhancements

Different Date Formats per Column

Date Range Restrictions

Custom Date Formatting

Localization

Accessibility

Performance Considerations

Why This Is Fast

Pikaday

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define Date Formats

Define TypeScript Types

Create the Renderer

Editor - Initialize (init)

The Event Listener pattern

Why editor.hot.rootDocument.createElement()?

Editor - Get Date Picker Config (getDatePickerConfig)

Editor - Show Datepicker (showDatepicker)

Why create Pikaday instance in showDatepicker?

The isMeta and isMouseDown checks

Editor - Hide Datepicker (hideDatepicker)

Editor - After Open Hook (afterOpen)

Editor - After Close Hook (afterClose)

Editor - Get Value and Set Value

Editor - Get Date Format (getDateFormat)

Editor - Keyboard Shortcuts

Editor - Portal Positioning

Editor Input Styling (CSS)

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Migration from Built-in Date Cell Type

Before (Built-in):

After (Custom Editor):

Enhancements

Different Date Formats per Column

Date Range Restrictions

Custom Date Formatting

Localization

Accessibility

Performance Considerations

Why This Is Fast

Editor - Initialize (`init`)

The `Event Listener` pattern

Why `editor.hot.rootDocument.createElement()`?

Editor - Get Date Picker Config (`getDatePickerConfig`)

Editor - Show Datepicker (`showDatepicker`)

Why create Pikaday instance in `showDatepicker`?

The `isMeta` and `isMouseDown` checks

Editor - Hide Datepicker (`hideDatepicker`)

Editor - After Open Hook (`afterOpen`)

Editor - After Close Hook (`afterClose`)

Editor - Get Date Format (`getDateFormat`)