I just have my free time to develop and update the old library like this one. For everyone which waiting for an update. I have a good news to tell you about this library. It's standalone. I mean it can be import without any css
files and also working with SSR like nextJS
, which seriously about external css import. I hope this library will be useful for all you guy. Thanks.
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.
npm install thaidatepicker-react
# or just `yarn add thaidatepicker-react`
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;
Property | Description | Type | Default | Version |
---|---|---|---|---|
children | the children element inside like {children} by default you don't need to defined as props. | any | - | |
id | #id for container element | string | - | |
value | A christ date value with fixed dayjs format (YYYY-MM-DD) | string | - | |
onChange | Handle function with maximum 2 parameters, christDate and thaiDate |
function(christDate, thaiDate) | - | |
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: type any | default undefined, nextButtonIcon: type any | default undefined, prevButtonClassName: type any | default undefined, nextButtonClassName: type any | default undefined, monthSelectClassName: type any | default undefined, yearSelectClassName: type any | default undefined } | {} | |
yearBoundary | A config boundary ±Year (e.g. yearBoundary = 2; it means currentYear ± 2.) | number | 99 | |
inputProps | An override input properties. | Object | - | |
reactDatePickerProps | An override react-datepicker properties. See more (https://reactdatepicker.com/ or https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) | Object | - | |
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.) |
string | - | |
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.) |
string | - | |
highlightDates | A highlight selected date. To use, you can provide an array of Date like ["new Date()"] |
Date[] | - | |
customInput | A config for using custom input element. To use, you can provide a name of element like Input |
any | - |
I made a couple difference stack demos. Try looking at the examples of "Vite" projects on ./example.
- Document with Online Demo: Demo
- or alternate example link: CodeSandbox
- Bonus with NextJS: CodeSandbox
Please see more CHANGELOG.md
MIT © buildingwatsize
- react-datepicker
- dayjs
- @patch-lee – Contributor