use-state-example.mdx

name	route
DateTime	/date-time

import DateTime from '../core/DateTime' import { Playground, Props } from 'docz' import ptBRLocale from 'date-fns/locale/pt-BR' import ruLocale from 'date-fns/locale/ru' import { useState } from 'react'

DateTime

This component uses the date-fns v2 interfaces provided by date-io, then if you need for a specific locale, follow in according with the example below:

import ptBRLocale from 'date-fns/locale/pt-BR'

<DateTime
    locale={ ptBRLocale }
    label='Data de Aniversário'
    type='date'
    margin={ 24 }
    onChange={ () => null }
    />

The default locale is en-US

Default formats

type	format
date	'dd/MM/yyyy'
time	'HH:mm'
datetime	'dd/MM/yyyy HH:mm'

Properties

<Props of={ DateTime } />

Demo

{
    () => {
        const [birth, setBirth] = useState(new Date())
        return (
            <div>
                <DateTime
                    label='Birth date'
                    format='MM/dd/yyyy'
                    type='date'
                    margin={ 24 }
                    value={birth}
                    onChange={ (e) => setBirth(e) }
                />
                <DateTime
                    label='Дата рождения'
                    locale={ ruLocale }
                    type='date'
                    margin={ 24 }
                    onChange={ () => null } />
                <DateTime
                    label='Data de aniversário' locale={ ptBRLocale } type='date' margin={ 24 } onChange={ () => null } />
                <DateTime
                    label='Scrum'
                    margin={ 24 }
                    type='time'
                    onChange={ () => null } />
                <DateTime
                    label='Schedule meeting'
                    margin={ 24 }
                    type='datetime'
                    onChange={ () => null } />
            </div>
        )
    }
}