Headless Datepicker(s) for preact
- Lightweight
- Unstyled
- Fast and runs on signals
- For Preact! <3
- Install the package and it's deps
npm i preact @preachjs/datepicker @preact/signals
import { Calendar } from "@preachjs/datepicker";
function App() {
const [date, setDate] = useState();
return (
<>
<Calendar value={date} onSelect={(nextValue) => setDate(nextValue)} />
</>
);
}
import { Calendar } from "@preachjs/datepicker";
function App() {
const [dateRange, setDateRange] = useState([]);
return (
<>
<Calendar
mode="range"
value={dateRange}
onSelect={(nextValue) => setDateRange(nextValue)}
/>
</>
);
}
prop | description | default |
---|---|---|
value |
The current value of the datepicker | current date |
onSelect |
Callback fired when a date selection is successful, in case of range selection, it'll fire with both the values |
|
mode |
Switch between single select and range selection mode | single |
weekdayFormat |
narrow,short,long weekend format on the calendar header |
narrow |
arrowLeft |
Icon Rendered on the left of the month selector | < |
arrowRight |
Icon Rendered on the right of the month selector | > |