51 lines
1.2 KiB
Plaintext
51 lines
1.2 KiB
Plaintext
---
|
|
title: Date
|
|
icon: calendar
|
|
---
|
|
|
|
The Date input block allows you to ask your user for a date. You can ask for a specific date or range and include time:
|
|
|
|
<Tabs>
|
|
<Tab title="Flow">
|
|
<Frame>
|
|
<img
|
|
src="/images/blocks/inputs/date-flow.png"
|
|
alt="Date input in flow"
|
|
className="rounded-lg"
|
|
/>
|
|
</Frame>
|
|
</Tab>
|
|
<Tab title="Bot">
|
|
<Frame>
|
|
<img
|
|
src="/images/blocks/inputs/date-bot.png"
|
|
alt="Date input in bot"
|
|
className="rounded-lg"
|
|
/>
|
|
</Frame>
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
The input will use the native date picker depending on the device and browser used to answer the bot. For example on Firefox it looks like this:
|
|
|
|
<Frame style={{ maxWidth: '400px' }}>
|
|
<img
|
|
src="/images/blocks/inputs/date-native-picker.png"
|
|
alt="Date native picker"
|
|
/>
|
|
</Frame>
|
|
|
|
## Format
|
|
|
|
The `Format` setting lets you customize the picked date format. Under the hood, it is done using the [date-fns](https://date-fns.org/) library. You can use any of the [formatting tokens](https://date-fns.org/docs/format) supported by the library.
|
|
|
|
Here are some examples:
|
|
|
|
```text
|
|
yyyy-MM-dd
|
|
yyyy-MM-dd HH:mm:ss
|
|
dd/MM/yy
|
|
dd/MM/yyyy HH:mm:ss
|
|
d.MM.yy
|
|
```
|