Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Tools
Package: @uireact/datepicker
An input that lets the user select dates using a datepicker
1. Make sure you install peer dependencies first:
2. Install package:
npm i -S @uireact/datepicker
<div style={{ height: '350px' }}> <UiInputDatepicker label="Date" labelOnTop placeholder="Select the date" highlightToday onChange={(value) => { console.log(value); }} icon={<UiIcon icon="CalendarLines" />} size="large" useDialogOnSmall closeLabel="Done" /> </div>
If a prop date
is passed then it will be used as the default value for the input and the date selected in the datepicker
<div style={{ height: '350px' }}> <UiInputDatepicker label="Date" date={new Date('2024-01-01 00:00:00')} labelOnTop placeholder="Select the date" highlightToday onChange={(value) => { console.log(value); }} icon={<UiIcon icon="CalendarLines" />} size="large" useDialogOnSmall closeLabel="Done" /> </div>
<DatePickerInputExample />
const validator = new UiValidator(); const today = new Date(); const schema: UiValidatorSchema = { date: validator.field('text').present('Select a date').greaterThan(today, 'Select a date in the future') }; export const DatePickerInputExample: React.FC = () => { const [dateSelected, setDateSelected] = useState<string>(); const [successMessageVisible, setSuccessMessageVisible] = useState(false); const [errorMessage, setErrorMessage] = useState<string>(); const onChange = useCallback( (date: string) => { setDateSelected(date); setSuccessMessageVisible(false); setErrorMessage(''); }, [setDateSelected] ); const onSubmit = useCallback( (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); if (!dateSelected) { setErrorMessage('Select a date'); return; } const data = { date: new Date(dateSelected) }; const validation = validator.validate(schema, data); if (validation.passed) { setSuccessMessageVisible(true); } else { const errorMessage = validation.errors?.date[0].message; setErrorMessage(errorMessage); } }, [dateSelected] ); return ( <div style={{ height: '350px' }}> <UiText>Select a date in the future, if not an error will be shown:</UiText> <UiSpacing padding={formSpacing}> <form onSubmit={onSubmit}> <UiInputDatepicker label="Date" labelOnTop placeholder="Select a future date" highlightToday onChange={onChange} icon={<UiIcon icon="CalendarLines" />} size="large" closeLabel="Done" error={errorMessage} category={errorMessage ? 'error' : undefined} showNextMonth useDialogOnSmall /> <UiSpacing padding={buttonMargin}> <UiButton type="submit" category="tertiary"> <UiSpacing padding={buttonPadding}> <UiText>Submit</UiText> </UiSpacing> </UiButton> </UiSpacing> </form> </UiSpacing> {successMessageVisible && ( <UiCard category="positive"> <UiText> <UiIcon icon="CheckCircle" /> The date is valid </UiText> </UiCard> )} </div> ); };
For localized labels you can use the prop localizedLabels
and pass down the labels you want to use. This prop is available from this input datepicker component.
A working example of this is live in the datepicker docs.