[Feature]

README.md

@@ -12,6 +12,8 @@ Thaidatepicker-react is a component for ReactJS that likes other DatePicker, but
 - `maxDate` The maximum date that can be selected, possible value "2020-02-29", dayjs and also Moment.
 - `value` The default value, possible value "2020-02-29", dayjs and also Moment.
 - `onChange` The handler function, this function returns a couple of value (ChristDate, BuddhistDate)
+- `displayFormat` The value's display format on Input, possible value "DD [M, MM, MMM or MMMM] YYYY".
+- `clearable` To user clear the selected value, possible value true, false
 - `dateFormat` The format of value, possible value is "yyyy-MM-dd" please see more at [date-fns](https://date-fns.org/v2.12.0/docs/format)
 
 ## ⚙ Install
@@ -44,9 +46,11 @@ const App = () => {
       <WatDatePicker
         value={selectedDate}
         onChange={handleWatDatePickerChange}
-        dateFormat={"yyyy-MM-dd"} // [using date-fns format](https://date-fns.org/v2.12.0/docs/format)
-        minDate={"2020-04-26"} // supported date as string
-        maxDate={dayjs().add(20, "day")} // also supported dayjs or moment
+        dateFormat={'yyyy-MM-dd'} // [using date-fns format](https://date-fns.org/v2.12.0/docs/format)
+        displayFormat={'DD MMMM YYYY'} // or YYYY-MM-DD
+        clearable={true} // true | false
+        minDate={'2020-04-26'} // supported date as string
+        maxDate={dayjs().add(20, 'day')} // also supported dayjs or moment
       />
     </>
   )

example/src/App.js

@@ -6,8 +6,8 @@ import styles from './App.module.css'
 import './OverrideCSS.css'
 
 const App = () => {
-  const [selectedDate, setSelectedDate] = useState("2020-04-27")
-  const [selectedThaiDate, setSelectedThaiDate] = useState("2563-04-27")
+  const [selectedDate, setSelectedDate] = useState("2021-01-11")
+  const [selectedThaiDate, setSelectedThaiDate] = useState("2564-01-11")
 
   const handleWatDatePickerChange = (christDate, buddhistDate) => {
     console.log(christDate)
@@ -24,7 +24,10 @@ const App = () => {
         value={selectedDate}
         onChange={handleWatDatePickerChange}
         dateFormat={"yyyy-MM-dd"} // (using date-fns format)[https://date-fns.org/v2.12.0/docs/format]
-        minDate={"2020-04-26"} // supported date as string
+        displayFormat={"DD-MMMM-YYYY"}
+        inputStyle={{ width: '100%', padding: 5 }} // Style for input
+        clearable={true}
+        minDate={"2020-12-26"} // supported date as string
         maxDate={dayjs().add(20, "day")} // also supported dayjs or moment
       />
       <h2>Christ Date: <br />{selectedDate.toString()}</h2>

src/index.js

@@ -13,14 +13,71 @@ import th from './locale/th'
 registerLocale('th', th)
 setDefaultLocale('th')
 
-const CustomInput = ({ value, onClick, placeholderName }) => {
+const months = [
+  'มกราคม',
+  'กุมภาพันธ์',
+  'มีนาคม',
+  'เมษายน',
+  'พฤษภาคม',
+  'มิถุนายน',
+  'กรกฎาคม',
+  'สิงหาคม',
+  'กันยายน',
+  'ตุลาคม',
+  'พฤศจิกายน',
+  'ธันวาคม'
+]
+
+const shortMonths = [
+  'ม.ค.',
+  'ก.พ.',
+  'มี.ค.',
+  'เม.ย.',
+  'พ.ค.',
+  'มิ.ย.',
+  'ก.ค.',
+  'ส.ค.',
+  'ก.ย.',
+  'ต.ค.',
+  'พ.ย.',
+  'ธ.ค.'
+]
+
+const CustomInput = ({
+  value,
+  onClick,
+  placeholderName,
+  displayFormat,
+  style
+}) => {
   let thaiDate = ''
   if (value !== '') {
+    thaiDate = displayFormat
     const date = dayjs(value)
-    thaiDate = `${date.year() + 543}${date.format('-MM-DD')}`
+    const monthNo = date.month() // 0 - 11
+    const thaiYear = date.year() + 543
+    const thaiMonth = months[monthNo]
+    const shortMonth = shortMonths[monthNo]
+    const monthDate = date.date()
+    const mCount = thaiDate.split('M').length - 1
+    const monthDisplay = [
+      monthNo + 1,
+      `${monthNo + 1 > 10 ? '' : 0}${monthNo + 1}`,
+      shortMonth,
+      thaiMonth
+    ]
+
+    thaiDate = thaiDate.replace(/[yY]+/, thaiYear)
+    thaiDate = thaiDate.replace('M'.repeat(mCount), monthDisplay[mCount - 1])
+    thaiDate = thaiDate.replace(/[dD]+/, monthDate)
   }
   return (
-    <Input value={thaiDate} onClick={onClick} placeholder={placeholderName} />
+    <Input
+      value={thaiDate}
+      onClick={onClick}
+      placeholder={placeholderName}
+      style={style}
+    />
   )
 }
 
@@ -54,20 +111,7 @@ export const WatDatePicker = (props) => {
   const [selectedDate, setSelectedDate] = useState(new Date(value))
   const thisYear = dayjs().year()
   const years = range(thisYear - 50, thisYear + 50, 1)
-  const months = [
-    'มกราคม',
-    'กุมภาพันธ์',
-    'มีนาคม',
-    'เมษายน',
-    'พฤษภาคม',
-    'มิถุนายน',
-    'กรกฎาคม',
-    'สิงหาคม',
-    'กันยายน',
-    'ตุลาคม',
-    'พฤศจิกายน',
-    'ธันวาคม'
-  ]
+
   const highlightWithRanges = [
     {
       'react-datepicker__day--highlighted-today': [new Date()]
@@ -128,21 +172,28 @@ export const WatDatePicker = (props) => {
           </button>
         </div>
       )}
+      isClearable={props.clearable}
       minDate={props.minDate ? new Date(props.minDate) : null}
       maxDate={props.maxDate ? new Date(props.maxDate) : null}
       dateFormat={props.dateFormat ? props.dateFormat : 'yyyy-MM-dd'}
       selected={selectedDate}
       onChange={(date) => {
-        // console.log(date)
+        const value = dayjs(date).isValid() ? dayjs(date) : null
         setSelectedDate(date)
-        setValue(dayjs(date).format('YYYY-MM-DD'))
-        const thaiDate = date
-          ? `${dayjs(date).year() + 543}${dayjs(date).format('-MM-DD')}`
+        setValue(value ? value.format('YYYY-MM-DD') : '')
+        const thaiDate = value
+          ? `${value.year() + 543}${value.format('-MM-DD')}`
           : ''
-        props.onChange(dayjs(date).format('YYYY-MM-DD'), thaiDate)
+        props.onChange(value ? value.format('YYYY-MM-DD') : '', thaiDate)
       }}
       highlightDates={highlightWithRanges}
-      customInput={<CustomInputWrapper placeholderName={props.placeholder} />}
+      customInput={
+        <CustomInputWrapper
+          placeholderName={props.placeholder}
+          displayFormat={props.displayFormat}
+          style={props.inputStyle}
+        />
+      }
     />
   )
 }