Menu


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:

    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa

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

    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa
    Do
    Lu
    Ma
    Mi
    Ju
    Vi
    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.

    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa
    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

February
    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa
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

    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa
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

    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa
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
NameTypesDefault
"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
-
Confirm DialogDynamic Hero Icon