DatePicker
DatePicker renders an inline calendar focused on keyboard-friendly, accessible selection flows.
Source
LLM docs
Package
npm install @plocks/datesExamples
4
Properties
35
Playground
Basics
Standard single date selection with label and placeholder text.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePicker } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Block fullWidth>
<DatePicker
value={value}
onChange={(next) => setValue(next as Date | null)}
calendarProps={{ numberOfMonths: 1, highlightToday: true }}
/>
<Text size="sm" c="secondary">
{value ? `Selected: ${value.toLocaleDateString()}` : 'No date selected'}
</Text>
</Block>
);
}Date Range Picker
Select a range of dates with start and end date selection.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePicker } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<[Date | null, Date | null] | null>(null);
const start = value?.[0];
const end = value?.[1];
return (
<Block fullWidth>
<DatePicker
type="range"
value={value}
onChange={(next) => setValue(next as [Date | null, Date | null] | null)}
calendarProps={{ numberOfMonths: 2, withCellSpacing: true }}
/>
<Text size="sm" c="secondary">
{start && end
? `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
: 'Select a start and end date'}
</Text>
</Block>
);
}Date Validation
Date picker with validation rules and error handling for invalid selections.
Loading demo…
import React, { useMemo, useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePicker } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date | null>(null);
const [inlineError, setInlineError] = useState('');
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);
setInlineError(dateValue && dateValue < today ? 'Date cannot be in the past' : '');
};
return (
<Block fullWidth>
<DatePicker
value={value}
onChange={handleChange}
calendarProps={{ minDate: today, highlightToday: true }}
/>
<Text size="sm" c={inlineError ? 'error' : 'secondary'}>
{inlineError || 'Only dates today or later are enabled'}
</Text>
</Block>
);
}Multiple Dates Selection
Select multiple independent dates for events or availability.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { DatePicker } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date[]>([]);
return (
<Block fullWidth>
<DatePicker
type="multiple"
value={value}
onChange={(next) => setValue((next as Date[]) ?? [])}
calendarProps={{ numberOfMonths: 2, withCellSpacing: true }}
/>
<Text size="sm" c="secondary">
{value.length > 0
? value.map((date) => date.toLocaleDateString()).join(', ')
: 'Select one or more dates'}
</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources