buildingwatsize / thaidatepicker-react Goto Github PK

thaidatepicker-react is a component for ReactJS with fully supported Thai/Buddhist calendar and also the "Leap Year" will be render correctly.

Home Page: https://thaidatepicker-react-demo.vercel.app

HTML 3.03% JavaScript 92.32% CSS 3.50% TypeScript 1.15%

datepicker react thai buddhist buddhist-era thaidatepicker

thaidatepicker-react's Introduction

thaidatepicker-react

🎉 RELEASE v1.x.x 🎉

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.

📘 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
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	-

📝 Need More Example?

I created a few demo of difference stack. try to check it out on ./example which contains both "custom-react-app" and "vite" ecosystem.

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

thaidatepicker-react's People

Contributors

Stargazers

Watchers

Forkers

wachirapong74 patch-lee tn-indonesia kongpcc02 yongyut-wil kittkub

thaidatepicker-react's Issues

how to show displayFormat month thai?

สวัสดีครับ

ขออนุญาตสอบถามผู้จัดทำนิดนึงครับ
หากต้องการจะให้แสดงเดือนเป็นภาษาไทย ต้องตั้งค่า displayFormat อย่างไรครับ
พอดีผมพยายามดูตัวอย่างแล้ว มีแต่ที่เป็นภาษาอังกฤษครับ

รบกวนขอคำแนะนำด้วยครับ
ขอบคุณครับ

nextjs support ?

i got
./node_modules/react-datepicker/dist/react-datepicker.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/thaidatepicker-react/dist/index.modern.js

in original react-datepicker
they have component with no css in it and we can import css later to prevent this error

Module parse failed: Unexpected token

Hi, last month, I has installed version 0.1.1. For today, I've just reinstall to lastest 0.1.5 and get problem as below.

./node_modules/thaidatepicker-react/dist/index.modern.js 545:41
Module parse failed: Unexpected token (545:41)
You may need an appropriate loader to handle this file type.
|       setSelectedDate = _useState4[1];
| 
>   var yearBoundary = props.yearBoundary ?? 99;
|   var thisYear = dayjs().year();
|   var minYear = props.minDate ? dayjs(props.minDate).year() : thisYear - yearBoundary;

Do you have any idea to fix ?

Module parse failed: Unexpected token (531:43)

I cannot use it because this error.
./node_modules/thaidatepicker-react/dist/index.modern.js 531:43
Module parse failed: Unexpected token (531:43)
File was processed with these loaders:

./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| const [value, setValue] = useState(props.value ? props.value : null);
| const [selectedDate, setSelectedDate] = useState(value ? new Date(value) : null);

const yearBoundary = props.yearBoundary ?? 99;
| const thisYear = dayjs().year();
| const minYear = props.minDate ? dayjs(props.minDate).year() : thisYear - yearBoundary;

decreaseMonth, increaseMonth button make form submit

คือเวลากดปุ่ม ซ้าย ขวา เปลี่ยนเดือน มันทำให้ form submit น่ะครับ มีวิธีแก้มั้ยครับ ตอนนี้เลยต้องเข้าไปเอา source มาใช้ เข้าไปแก้ตรง renderCustomHeader แล้วปิดปุ่มทิ้งไปก่อน

เจอปัญหา Could not find a declaration file for module 'thaidatepicker-react'. ครับ

ผมเจอ error ตอนใช้คำสั่งนี้ครับ

import { ThaiDatePicker } from "thaidatepicker-react";

error

Could not find a declaration file for module 'thaidatepicker-react'. '/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/thaidatepicker-react/dist/index.cjs' implicitly has an 'any' type.\n Try npm i --save-dev @types/thaidatepicker-react if it exists or add a new declaration (.d.ts) file containing declare module 'thaidatepicker-react';",

Env

Nextjs 13.4.19
typescript
node 18

รบกวนขอคำแนะนำหน่อยครับ
ขอบคุณครับ