# new Date Picker (vanilla-calendar)

**index**

* [Editor Options](#editor-options)
* [Custom Validator](#custom-validator)
* [Date Format](#date-format)
* See the [Editors - Wiki](/slickgrid-universal/column-functionalities/editors.md) for more general info about Editors (validators, event handlers, ...)

#### Information

The Date Editor is provided through an external library named [Vanilla-Calendar-Pro](https://github.com/ghiscoding/vanilla-calendar-pro) and all options from that library can be added to your `options` (see below), so in order to add things like minimum date, disabling dates, ... just review all the [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/docs/reference/additionally/settings) and then add them into `options`. We use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format (when `type`, `outputType` and/or `saveType` are provided in your column definition)

> **Note** Also just so you know, `options` is used by all other editors as well to expose external library like Autocompleter, Multiple-Select, etc...

#### Demo

[Demo Page](https://ghiscoding.github.io/slickgrid-universal/#/example12) | [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vanilla/src/examples/example12.ts)

#### Editor Options

You can use any of the Vanilla-Calendar [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) by adding them to `options` as shown below.

> **Note** for easier implementation, you should import `VanillaCalendarOption` from Slickgrid-Universal common package.

```ts
import { type VanillaCalendarOption } from '@slickgrid-universal/common';

prepareGrid() {
  this.columns = [
    {
      id: 'title', name: 'Title', field: 'title',
      type: 'dateIso', // if your type has hours/minutes, then the date picker will include date+time
      editor: {
        model: Editors.date,
        onInstantiated: (instance) => console.log('instance', instance), // get instance from 3rd party lib
        // previously known as `editorOptions` for < 9.0
        options: {
          displayDateMax: 'today',
          disableDates: ['2022-08-15', '2022-08-20'],
        } as VanillaCalendarOption,
      },
    },
  ];
}
```

On top of the default ones provided by Vanilla-Calendar there are also:

* hideClearButton (default: false): which toggles the visiblity of the clear button
* allowInput (default: false): which determines whether you can directly enter a date in the input element

**Grid Option \`defaultEditorOptions**

You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as editor `options` (also note that each key is already typed with the correct editor option interface), for example

```ts
this.gridOptions = {
  defaultEditorOptions: {
    date: { displayDateMin: 'today' }, // typed as VanillaCalendarOption
  }
}
```

#### Custom Validator

You can add a Custom Validator from an external function or inline (inline is shown below and comes from [Example 12](https://ghiscoding.github.io/slickgrid-universal/#/example12))

```ts
initializeGrid() {
  this.columns = [
    {
      id: 'title', name: 'Title', field: 'title',
      editor: {
        model: Editors.date,
        onInstantiated: (instance) => console.log('instance', instance), // get instance from 3rd party lib
        required: true,
        validator: (value, args) => {
          const dataContext = args?.item;
          if (dataContext && (dataContext.completed && !value)) {
            return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' };
          }
          return { valid: true, msg: '' };
        }
      },
    },
  ];
}
```

#### Date Format

Your column definitions may include a `type` to tell Formatters how to formate your date, this `type` is also used by the Editor when saving.

**What if I want to use a different format when saving?**

There are 3 types you can provide to inform the Editor on how to save:

1. `type` inform the entire column what its type is (used by Formatter, Filter, Editor, Export)
2. `outputType` what type to display in the Editor vs saving format.
3. `saveOutputType` the type to use when saving which is different than the one used on cell input (rarely used).

The `type` and `outputType` are often used when you want to save something different compare to what you show to the user (for example, show a date in the US Format but save it as ISO or UTC).

The difference between `outputType` and `saveOutputType` when you wish to display a certain format in the date editor input (while editing), but wish to save in a different format. You will rarely need the `saveOutputType` and for most use cases, the use of both `type` and `outputType` should be enough.

> **Note** the type detection when saving is the inverse of the list above, whichever comes first from 3 to 1.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/editors/date-editor-vanilla-calendar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.