buildingwatsize
thaidatepicker-react
🎉 RELEASE v2 🎉
Thank you to everyone who used my little side project. I appreciate all you guys. Hope to keep it active.
📘 About
The thaidatepicker-react is a component for ReactJS that likes other DatePicker library but all we need is Buddhist Year (25XX – aka Thai Year) come with the right render day on "Leap" year (example: Sat, 29 Feb 2020 must be equal to Sat, 29 Feb 2563) so I wish this component will be a useful thing to you :D. Happy Coding.
⚙ Install
npm install thaidatepicker-react
# or just `yarn add thaidatepicker-react`📌 Example Usage
import React, { useState } from "react";
import { ThaiDatePicker } from "thaidatepicker-react";
const App = () => {
const [selectedDate, setSelectedDate] = useState("2024-02-29");
const [selectedThaiDate, setSelectedThaiDate] = useState("2567-02-29");
const handleDatePickerChange = (christDate, buddhistDate) => {
console.log(christDate);
console.log(buddhistDate);
setSelectedDate(christDate);
setSelectedThaiDate(buddhistDate);
};
return (
<>
<ThaiDatePicker
value={selectedDate}
onChange={handleDatePickerChange}
/>
<div>christDate: {selectedDate}</div>
<div>thaiDate: {selectedThaiDate}</div>
</>
);
};
export default App;📋 Properties
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| children | the children element inside like {children} by default you don't need to defined as props. | React.ReactNode | null | null | |
| id | #id for container element | string | "thdpk-container" | |
| value | A christ date value with fixed dayjs format (YYYY-MM-DD) | string | "" | |
| onChange | Handle function with maximum 2 parameters, christDate and thaiDate |
(christDate: string, thaiDate: string) => void | (_christDate: string, _thaiDate: string) => null | |
| disabled | Disabled property for input | boolean | false | |
| readOnly | ReadOnly property for input | boolean | false | |
| clearable | Clear the value (please note clearable will work smoothly with onChange props) | boolean | true | |
| placeholder | Placeholder property for input | string | "" | |
| header | An object for setting up header component. To change button icon use prevButtonIcon and nextButtonIcon. To change className of button and select use prevButtonClassName, nextButtonClassName, monthSelectClassName, and yearSelectClassName |
Object { prevButtonIcon?: React.ReactNode; nextButtonIcon?: React.ReactNode; prevButtonClassName?: string; nextButtonClassName?: string; monthSelectClassName?: string; yearSelectClassName?: string; } | null } | {} | |
| yearBoundary | A config boundary ±Year (e.g. yearBoundary = 2; it means currentYear ± 2.) | number | 99 | |
| inputProps | An override input properties. | (any & { displayFormat?: string; }) | null | null | |
| reactDatePickerProps | An override react-datepicker properties. See more (https://reactdatepicker.com/ or https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) | React.ComponentProps<typeof DatePicker> | {} | |
| minDate | A config minimum selectable date. To use, you can provide the string like 2023-01-31. (Note: It's will depend on yearBoundary too.) |
Date | string | undefined | |
| maxDate | A config maximum selectable date. To use, you can provide the string like 2023-12-31. (Note: It's will depend on yearBoundary too.) |
Date | string | undefined | |
| highlightDates | A highlight selected date. To use, you can provide an array of Date like [new Date()] |
(Date | HighlightDate)[] | GetHighlightByDate() | |
| customInput | A config for using custom input element. To use, you can provide a name of element like Input |
React.ComponentType<any> | null | null | |
| noIntegratedStyle | A config for define to exclude integrated css Note: if you using 2 components, which the first one contain noIntegratedStyle props but the second is not. It will import css and then it apply to them all |
boolean | false | v2.0.0 |
🎩 Some Useful Tricks
To style dates outside the selected month, use the
.react-datepicker__day--outside-monthCSS class..react-datepicker__day--outside-month { color: #aaa; }However, be aware that the appearance may resemble the 'disabled' attribute, which could affect the user experience
📝 Need More Example?
I made a couple difference stack demos. Try looking at the examples of "vite" or "next" projects on ./example.
- Document with Online Demo: Demo
- or alternate example link: CodeSandbox
- Bonus with NextJS: CodeSandbox
Changelog
Please see more CHANGELOG.md
License
MIT © buildingwatsize
⚒ Thanks a lot
- react-datepicker
- dayjs
- @patch-lee – Contributor