A
Accueil > Components > DateInput

DateInput

Champs de saisie de date.TagsuiInformationsExperimentalExemples2StylesDisponibles
Default
DefaultErrorUne erreurDisabled
export const Default = () => (
<Box width={'100%'}>
<Grid gap={8}>
<Grid.Column size={{ desktop: 6, mobile: 12 }}>
<DateInput label="Default" onChange={console.log} />
</Grid.Column>
<Grid.Column size={{ desktop: 6, mobile: 12 }}>
<DateInput label="Error" onChange={console.log} error="Une erreur" />
</Grid.Column>
<Grid.Column size={{ desktop: 6, mobile: 12 }}>
<DateInput label="Disabled" onChange={console.log} disabled />
</Grid.Column>
</Grid>
</Box>
);
Types
Date (default)Datetime
export const Types = () => {
const [date, setDate] = React.useState<string>();
const [datetime, setDatetime] = React.useState<string>();
return (
<Box width={'100%'}>
<Grid gap={8}>
<Grid.Column size={{ desktop: 6, mobile: 12 }}>
<DateInput value={date} label="Date (default)" onChange={e => setDate(e.toString())} />
</Grid.Column>
<Grid.Column size={{ desktop: 6, mobile: 12 }}>
<DateInput
value={datetime}
label="Datetime"
type="datetime"
is24Hour
onChange={e => setDatetime(e.toString())}
/>
</Grid.Column>
</Grid>
</Box>
);
};
Alveole UI Kit — v1.8.4