DatePickerInput
DatePickerInput opens a calendar from a form field to select a date.
Source
LLM docs
Package
npm install @plocks/datesExamples
5
Properties
70
Playground
Basics
DatePickerInput opens a calendar from a form field to select a date.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePickerInput } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Block fullWidth>
<DatePickerInput
value={value}
onChange={(next) => setValue(next as Date | null)}
placeholder="Select a date"
label="Date"
clearable
fullWidth
/>
<Text size="sm" c="secondary">
{value ? `Selected: ${value.toLocaleDateString()}` : 'No date selected'}
</Text>
</Block>
);
}Variants
Compare the default, filled, outline, and unstyled field shells on DatePickerInput.
Loading demo…
import { Column } from '@plocks/ui';
import { DatePickerInput } from '@plocks/dates';
const variants = ['default', 'filled', 'outline', 'unstyled'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<DatePickerInput key={variant} variant={variant} label={`${variant} variant`} placeholder="Choose a date" />
))}
</Column>
);
}Multiple
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePickerInput } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date[]>([]);
return (
<Block fullWidth>
<DatePickerInput
type="multiple"
value={value}
onChange={(next) => setValue((next as Date[]) || [])}
label="Multiple dates"
placeholder="Select dates"
fullWidth
/>
<Text size="sm" c="secondary">
{value.length > 0
? `Selected: ${value.map((date) => date.toLocaleDateString()).join(', ')}`
: 'Select one or more dates'}
</Text>
</Block>
);
}Range
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePickerInput } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<[Date | null, Date | null] | null>(null);
return (
<Block fullWidth>
<DatePickerInput
type="range"
value={value}
onChange={(next) => setValue((next as [Date | null, Date | null]) || null)}
label="Date range"
placeholder="Select range"
closeOnSelect
fullWidth
/>
<Text size="sm" c="secondary">
{value && value[0] && value[1]
? `${value[0].toLocaleDateString()} – ${value[1].toLocaleDateString()}`
: 'Select a start and end date'}
</Text>
</Block>
);
}Validation
Loading demo…
import React, { useMemo, useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePickerInput } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date | null>(null);
const [error, setError] = useState<string | undefined>();
const today = useMemo(() => {
const date = new Date();
date.setHours(0, 0, 0, 0);
return date;
}, []);
const handleChange = (next: Date | [Date | null, Date | null] | Date[] | null) => {
const dateValue = next as Date | null;
setValue(dateValue);
if (dateValue && dateValue < today) {
setError('Date cannot be in the past');
} else {
setError(undefined);
}
};
return (
<Block fullWidth>
<DatePickerInput
value={value}
onChange={handleChange}
placeholder="Select a future date"
label="Future date"
error={error}
clearable
fullWidth
calendarProps={{
minDate: today,
highlightToday: true,
}}
/>
<Text size="sm" c="secondary">
Past dates show the validation state
</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources