Components
DateTimePicker
Storybook
DateTimePicker
With the DateTimePicker component, you can provide users with the ability to interactively select dates and times in web applications. It allows easy entry and manipulation of temporal data, facilitating the selection and presentation of dates and times in a friendly and customizable format.
Imports
The first alternative is recommended since they can reduce the application bundle
1import DateTimePicker from 'dd360-ds/DateTimePicker'1import { DateTimePicker } from 'dd360-ds'Usage
Use the DatePicker component as shown below:
The code snippet below shows how to use the DateTimePicker component:
1import DateTimePicker from 'dd360-ds/DateTimePicker'
2
3<DateTimePicker />
4Language
With the prop language, its variants es and en you can control the language
1import { Flex, DateTimePicker } from 'dd360-ds''
2
3<Flex className='flex-col' gap={8}>
4 <DateTimePicker language="en" />
5 <DateTimePicker language="es" />
6</Flex>
7Format
With the prop format, and its short and long variants, you can customize the display format of the date, either in its full or abbreviated form.
1import DateTimePicker from 'dd360-ds/DateTimePicker'
2
3 <Flex className='flex-col' gap={8}>
4 <DateTimePicker format="short" language='en' />
5 <DateTimePicker format="long" language='en' />
6</Flex>
7MinDate
With the prop minDate, you can define the selectable minimum date
1import DateTimePicker from 'dd360-ds/DateTimePicker''
2
3<DateTimePicker language='en' value={new Date('2023-05-16T03:00:00.000Z')} minDate={new Date('2023-05-10T03:00:00.000Z')} />
4MaxDate
With the prop maxDate, you can define the maximum selectable date
1import DateTimePicker from 'dd360-ds/DateTimePicker''
2
3<DateTimePicker language='en' value={new Date('2023-05-16T03:00:00.000Z')} maxDate={new Date('2023-05-22T03:00:00.000Z')} />
4API Reference
| Name | Types | Default |
|---|---|---|
| "format" | long short | short |
| "language" | en es | en |
| "value" | Date | 2023-02-27T03:00:00.000Z |
| "minDate" | Date | 2023-02-11T03:00:00.000Z |
| "onlyOf" | year month day month-year | month-year |
| "maxDate" | Date | - |
| "handleDateChange" | (date: string) => void | - |
| "className" | string | - |
| "pickerClassName" | string | - |
| "style" | CSSProperties | - |
| "..." | InputProps | - |
Note
This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.