> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognigy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Datepicker

<Frame>
  <img class="image-center" src="https://mintcdn.com/cognigy-15abf2ba/OU10XTKbB-9IwiZJ/_assets/ai/develop/node-reference/datepicker.png?fit=max&auto=format&n=OU10XTKbB-9IwiZJ&q=85&s=f768562511edbc308993d5bf6a5d622f" alt="Datepicker Node configuration panel" style={{ width: 'auto' }} width="464" height="124" data-path="_assets/ai/develop/node-reference/datepicker.png" />
</Frame>

## Description

The Datepicker Node renders a datepicker to the user.

<Accordion title="Automatically Triggered by Question Nodes">
  The Datepicker is automatically triggered whenever a Question Node with the Date type is used. This means that you rarely need to add the Datepicker Node.
</Accordion>

## Parameters

| Parameter        | Description                                                                                                                                                                                                                      |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Datepicker Title | This is the title that will be shown in the header of the datepicker widget.                                                                                                                                                     |
| Locale           | A dropdown menu that lets you select a locale for the Datepicker. This automatically outputs the date format in the localized language.                                                                                          |
| Mode             | Mode determines the behavior of the Datepicker. <ul><li>**Single** – a single date can be selected.</li><li>**Multiple** – lets the user select multiple dates.</li><li>**Range** – lets the user select a date range.</li></ul> |

<AccordionGroup>
  <Accordion title="Button Texts">
    | Parameter                   | Description                                                                                                                            |
    | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
    | Open Datepicker Button Text | This is the text that is shown in the button that is rendered when the Datepicker is triggered. By default, is says: **pick date**.    |
    | Cancel Button Label         | This is the text that is shown on the "cancel" button that is rendered when the Datepicker has been opened. The default is **cancel**. |
    | Submit Button Label         | This is the text that is shown on the "submit" button that is rendered when the Datepicker has been opened. The default is **submit**. |
  </Accordion>

  <Accordion title="Date Settings">
    The Datepicker allows you to configure precisely which dates can be selected.

    | Parameter    | Description                                                                              |
    | ------------ | ---------------------------------------------------------------------------------------- |
    | Default Date | This is the default selected date. If not filled out, it will be the current date.       |
    | Minimum Date | This is the minimum date. If not filled out, it will not have a minimum date.            |
    | Maximum Date | This is the maximum selectable date. If not filled out, it will not have a maximum date. |
  </Accordion>

  <Accordion title="Time settings">
    The Datepicker allows you to configure whether times can be selected. If so, it also allows you to configure the default times in detail.

    | Parameter                | Description                                                                                               |
    | ------------------------ | --------------------------------------------------------------------------------------------------------- |
    | Allow Date & Time        | Determines whether the Datepicker should additionally show selectable time.                               |
    | Use 24-Hour Format       | If selected, the Datepicker will display times in 24-hour format (for example, 20:00h instead of 8:00PM). |
    | Default Hour to show     | Configurable default hour.                                                                                |
    | Default minute to show   | Configurable default minute.                                                                              |
    | Step to increase hours   | The increment step size for hours. The default is 1 hour.                                                 |
    | Step to increase minutes | The incremental increase in minutes, when the minute selection is used. The default is 5 minutes.         |
    | Show seconds in picker   | Enable this setting to show seconds in the Datepicker options.                                            |
  </Accordion>

  <Accordion title="Enable/Disable Dates">
    The Datepicker can be configured to exclude or include specific dates.
    This setting is useful when certain dates should be unavailable, such as for a booking or reservation.
  </Accordion>
</AccordionGroup>

#### Enable specific dates

This setting allows you to enter a range of dates that should be enabled.
If configured, all other dates will automatically be disabled.
In addition, you can define a function that is used to enable dates, for example, only weekdays.

Example of enabling dates by function:

```ts theme={null}
(date: Date): boolean => {
    /* The function takes in a Date object, and should return a boolean value.
    * If the function returns true, the date will be enabled.
    * Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6	 
    */ 	
    // This will enable Monday to Friday
    return (date.getDay() > 0 && date.getDay() < 6);
};
```

#### Disable specific dates

This setting allows you to enter a range of dates that should be disabled.
If configured, all other dates will automatically be enabled.
In addition, you can define a function that is used to disable dates, for example, every Saturday and Sunday.

Disable dates by function - example:

```ts theme={null}
(date: Date): boolean => {
    /* The function takes in a Date object, and should return a boolean value.
    * If the function returns true, the date will be disabled.
    * Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6	 
    */ 	
    // This will disable every Sunday and Saturday
    return (date.getDay() === 0 || date.getDay() === 6);
};
```

<Accordion title="Advanced Options">
  The Datepicker comes with four advanced options:

  | Parameter                   | Description                                                            |
  | --------------------------- | ---------------------------------------------------------------------- |
  | Date Format                 | This field can be used to output a specific date format, like `Y-m-d`. |
  | Hide Calendar               | When enabled, the Datepicker will not display a calendar.              |
  | Show week numbers           | When enabled, the week numbers are shown in the calendar.              |
  | Hide Datepicker Quick Reply | This hides the quick reply in the Datepicker.                          |
</Accordion>