datepicker.jsx
v0.4.0
Published
### Install
Downloads
17
Readme
datepicker.jsx
Install
npm
npm i datepicker.jsx
yarn
yarn add datepicker.jsx
Building
yarn build
Usage
TypeScript
recommended way
import { Dayjs } from "dayjs";
import { DatePicker } from "datepicker.jsx";
const App = () => {
const onDatePicked = (date: Dayjs) => {
console.log(date);
};
return (
<div>
<DatePicker onDatePicked={onDatePicked} />
</div>
);
};
JavaScript
import { Dayjs } from "dayjs";
import { DatePicker } from "datepicker.jsx";
const App = () => {
const onDatePicked = (date) => {
console.log(date);
};
return (
<div>
<DatePicker onDatePicked={onDatePicked} />
</div>
);
};
API
DatePicker
DatePicker
takes several props
export type DatePickerProps = JSX.IntrinsicElements["div"] & {
date?: Date | Dayjs;
firstDayOfWeek?: "Monday" | "Sunday";
locale?: string;
onDatePicked: (date: Dayjs) => void;
classNames?: {
weekdaysGrid?: string;
weekday?: string;
daysGrid?: string;
day?: string;
};
renderDay?: (day: Dayjs) => React.ReactElement;
};
How to customize className or other props on every day button you ask.
You can pass function to renderDay
prop for returning custom element for every day button.
Example
import { DatePicker, Day } from "datepicker.jsx";
const App = () => {
return (
<div>
<DatePicker
{...otherProps}
renderDay={(day) => <Day className="custom-class-name" title="im the title on every day button" />}
/>
</div>
);
};