@inverz/thai-datepicker

React date picker ภาษาไทย แสดงชื่อเดือน/วันเป็นภาษาไทยและปีเป็น พ.ศ. ทั้งใน header และช่อง input (เช่น 27/09/2569) สร้างบน react-datepicker

ดูตัวอย่าง (Demo)

A Thai-locale wrapper around react-datepicker that shows Buddhist-era (พ.ศ.) years. Only the display changes — selected / onChange still use ordinary Date objects, so the values you store stay Gregorian.

ติดตั้ง

npm i @inverz/thai-datepicker react-datepicker date-fns

ใช้งาน

import "react-datepicker/dist/react-datepicker.css";
import "@inverz/thai-datepicker/style.css";
import ThaiDatePicker from "@inverz/thai-datepicker";

function Example() {
  const [date, setDate] = useState(null);
  return (
    <ThaiDatePicker
      selected={date}
      onChange={setDate}
      placeholderText="เลือกวันที่"
    />
  );
}

date ที่ได้จาก onChange เป็น Date ปกติ (ค.ศ.) ส่งเข้า API / ฐานข้อมูลได้เลย ไม่ต้องลบ 543

รูปแบบการเลือก

| รูปแบบ | Props | ช่อง input แสดง | onChange ได้ | |---|---|---|---| | วันที่ | — | 27/09/2569 | Date | | ช่วงวันที่ | selectsRange | 13/09/2569 → 17/09/2569 | [Date, Date] | | เดือนและปี | showMonthYearPicker | กันยายน 2569 | Date (วันที่ 1 ของเดือน) | | ช่วงเดือน | showMonthYearPicker selectsRange | มกราคม 2569 → มีนาคม 2569 | [Date, Date] | | ปี | showYearPicker | 2569 | Date (1 ม.ค. ของปี) | | ช่วงปี | showYearPicker selectsRange | 2562 → 2567 | [Date, Date] |

แบบช่วง ส่ง startDate / endDate แทน selected:

const [[start, end], setRange] = useState([null, null]);

<ThaiDatePicker
  selectsRange
  startDate={start}
  endDate={end}
  onChange={setRange}
  monthsShown={2}              // แสดงสองเดือนคู่กัน (ไม่ใส่ = เดือนเดียว)
  startPlaceholder="วันเริ่มต้น"
  endPlaceholder="วันสิ้นสุด"
/>

ระหว่างเลือก ค่าจะเป็น [start, null] ก่อน แล้วเป็น [start, end] เมื่อเลือกครบ

แบบช่วง ช่อง input จะแบ่งเป็นสองฝั่ง วันเริ่มต้น → วันสิ้นสุด พร้อมไอคอนปฏิทิน ถ้าอยากใช้ input ของตัวเองส่ง customInput ได้ตามปกติ

monthsShown={2} ใช้ได้ทั้งแบบวันเดียวและแบบช่วง — หัวปฏิทินจะมีปุ่ม ‹ › เลื่อนเดือน และ « » เลื่อนปี

วันที่ + เวลา

ThaiDateTimePicker รวมปฏิทิน พ.ศ. กับคอลัมน์ชั่วโมง/นาทีไว้ในแผงเดียว ช่อง input แสดง 28/09/2569 14:30 น.

import { ThaiDateTimePicker } from "@inverz/thai-datepicker";

const [when, setWhen] = useState(null);

<ThaiDateTimePicker
  selected={when}
  onChange={setWhen}   // Date ตัวเดียวที่มีทั้งวันและเวลา
  minuteStep={15}      // ค่าเริ่มต้น 5
  minDate={new Date()}
/>

• เลือกวันใหม่ เวลาที่เลือกไว้ยังอยู่ ถ้ายังไม่เคยเลือกเวลาจะใช้ defaultTime (ค่าเริ่มต้น "09:00")
• แผงไม่ปิดเองตอนเลือกวัน ปิดด้วยปุ่ม "ตกลง" คลิกข้างนอก หรือกด Esc
• ใช้ props ของ ThaiDatePicker ได้ เช่น minDate, maxDate, filterDate, inline, locale="en"
• บนมือถือ แผงเวลาจะย้ายไปอยู่ใต้ปฏิทิน

Props

รับ props ทุกตัวของ react-datepicker และเพิ่ม:

| Prop | Type | Default | คำอธิบาย | |---|---|---|---| | locale | "th" \| "en" | "th" | "th" = ภาษาไทย + พ.ศ., "en" = อังกฤษ + ค.ศ. | | yearDropdownItemNumber | number | 100 | จำนวนปีย้อนหลังใน dropdown | | yearsAhead | number | 10 | จำนวนปีล่วงหน้าใน dropdown | | prevIcon / nextIcon | ReactNode | ลูกศร SVG | ไอคอนปุ่มเลื่อนเดือน/ปี | | prevYearIcon / nextYearIcon | ReactNode | ลูกศรคู่ SVG | ไอคอนปุ่มเลื่อนปี (เมื่อ monthsShown > 1) | | startPlaceholder / endPlaceholder | string | "วันเริ่มต้น" / "วันสิ้นสุด" | ข้อความในช่อง input แบบช่วง | | icon | ReactNode | ไอคอนปฏิทิน | ไอคอนท้ายช่อง input แบบช่วง | | allowTyping | boolean | true | ให้พิมพ์วันที่ในช่องแบบวันเดียวได้ รูปแบบ วว/ดด/ปปปป (ปี พ.ศ. เมื่อ locale="th") |

ถ้าแอปมีหลายภาษา ส่งภาษาปัจจุบันเข้าไป เช่นกับ react-i18next:

const { i18n } = useTranslation();
<ThaiDatePicker locale={i18n.language === "th" ? "th" : "en"} ... />

ข้อจำกัด

• พิมพ์ได้เฉพาะช่องแบบวันเดียว (วว/ดด/ปปปป, ใส่ / ให้อัตโนมัติ) — แบบช่วง, เลือกเดือน/ปี และ customInput ต้องเลือกจากปฏิทิน
• วันที่ที่พิมพ์ไม่ครบหรือไม่ถูกต้องจะไม่ถูกส่งไป onChange และช่องจะกลับเป็นค่าเดิมเมื่อออกจากช่อง
• รูปแบบใน input ถูกกำหนดตามโหมด (ดูตารางด้านบน) — dateFormat และ showTimeSelect ไม่มีผลกับค่าใน input
• showQuarterYearPicker / selectsMultiple ยังไม่รองรับการแสดงผลแบบ พ.ศ.
• showYearDropdown / showMonthDropdown ไม่ต้องใส่ เพราะ header มี dropdown เดือนและปีอยู่แล้ว

ปรับธีม

override ตัวแปร CSS --tdp-* ได้ที่ :root หรือ element ครอบ:

:root {
  --tdp-font: "IBM Plex Sans Thai", sans-serif;
  --tdp-brand: #16a34a;
  --tdp-brand-soft: #f0fdf4;
  --tdp-brand-ring: #dcfce7;
  --tdp-brand-strong: #15803d;

  /* ทำหัวปฏิทินเป็นแถบสีทึบ */
  --tdp-header-bg: #16a34a;
  --tdp-header-text: #fff;
  --tdp-header-muted: rgba(255, 255, 255, 0.85);
  --tdp-header-hover: rgba(255, 255, 255, 0.18);
  --tdp-header-hover-text: #fff;
}

ตัวแปรทั้งหมดดูได้ที่ src/style.css

พัฒนา

npm install
npm run dev       # เปิดหน้าตัวอย่าง (demo/) ที่ใช้โค้ดจาก src/ โดยตรง
npm run build     # สร้าง dist/ (ESM + CJS + style.css + types)
npm pack          # สร้าง .tgz ไว้ลองติดตั้งในโปรเจกต์อื่นก่อน publish

License

MIT © 2026 Inverz Solutions Co.,Ltd.