Components

DatePicker
Storybook

With the DatePicker component, you can provide users with the ability to interactively select dates in web applications. It allows easy entry and manipulation of temporal data, facilitating the selection and presentation of dates in a friendly and customizable format.

Imports

The first alternative is recommended since they can reduce the application bundle

1import DatePicker from 'dd360-ds/DatePicker'

1import { DatePicker } from 'dd360-ds'

Usage

Use the DatePicker component as shown below:

The code snippet below shows how to use the DatePicker component:

1import  DatePicker  from 'dd360-ds/DatePicker'
2
3<DatePicker />
4

Language

With the prop language, its variants es and en you can control the language

Sá

1import { Flex, DatePicker } from 'dd360-ds''
2  
3<Flex gap='12'>
4  <DatePicker language="en" />
5  <DatePicker language="es" />
6</Flex>
7

Format

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.

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

1import  DatePicker from 'dd360-ds/DatePicker''
2  
3 <Flex justifyContent='around'>
4  <DatePicker format="short" language='en' />
5  <DatePicker format="long"  language='en' />
6</Flex>
7

OnlyOf

With the prop onlyOf, its variants year, month, day and month you can control the format

January

1import { Flex, DatePicker } from 'dd360-ds''
2  
3<Flex gap="12" justifyContent="around">
4  <DatePicker language="en" onlyOf="year" />
5  <DatePicker language="en" onlyOf="month" />
6  <DatePicker language="en" onlyOf="day" />
7  <DatePicker language="en" onlyOf="month-year" />
8</Flex>
9

MinDate

With the prop minDate, you can define the selectable minimum date

1import  DatePicker  from 'dd360-ds/DatePicker''
2  
3<DatePicker language='en' value={new Date('2023-05-16T03:00:00.000Z')} minDate={new Date('2023-05-10T03:00:00.000Z')} />
4

MaxDate

With the prop maxDate, you can define the maximum selectable date

1import  DatePicker  from 'dd360-ds/DatePicker''
2  
3<DatePicker language='en' value={new Date('2023-05-16T03:00:00.000Z')} maxDate={new Date('2023-05-22T03:00:00.000Z')} />
4

API 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	-
"onChange"	(date: string) => void	-
"className"	string	-
"style"	CSSProperties	-
"children"	ReactNode	-

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

CircleDropdown