MonthPicker
Interactive grid for selecting a month within a given year. Renders a responsive layout that adapts to screen width and respects locale formatting as well as min/max date constraints.
Source
LLM docs
Package
npm install @plocks/datesExamples
1
Properties
40
Playground
Basics
Interactive grid for selecting a month within a given year. Renders a responsive layout that adapts to screen width and respects locale formatting as well as min/max date constraints.
Loading demo…
import React, { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { MonthPicker } from '@plocks/dates';
export function Demo() {
const [value, setValue] = useState<Date | null>(new Date());
return (
<Block fullWidth>
<MonthPicker value={value} onChange={setValue} monthLabelFormat="long" />
<Text size="sm" c="secondary">
{value
? value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
: 'No month selected'}
</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources