v1.7.0

Author: flamecommit

package/CHANGE.md

@@ -1,3 +1,9 @@
+## 1.7.0
+
+### What's New?
+
+- add props weekdayLabels - An option that allows you to label the day of the week in any format that you want.
+
 ## 1.6.0
 
 ### What's New?

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-datepicker",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/assets/ReactDatepicker.css

@@ -100,7 +100,19 @@
   grid-template-columns: repeat(7, 1fr);
   width: 252px;
 }
+.react-datepicker__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-basis: 100%;
+  height: 36px;
+  color: #000;
+}
 .react-datepicker__datepicker-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background-color: transparent;
   flex-basis: 100%;

package/src/components/Datepicker.tsx

@@ -21,6 +21,7 @@ interface IProps {
   valueFormat?: string;
   labelFormat?: string;
   closesAfterChange?: boolean;
+  weekdayLabels?: string[];
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -31,6 +32,7 @@ function Datepicker({
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
   closesAfterChange = true,
+  weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -88,13 +90,15 @@ function Datepicker({
                   value={value}
                   valueFormat={valueFormat}
                   monthPage={monthPage}
+                  weekdayLabels={weekdayLabels}
                   setValue={setValue}
                 />
                 {showsMultipleCalendar && (
                   <DatepickerMonth
                     value={value}
                     valueFormat={valueFormat}
                     monthPage={monthPage + 1}
+                    weekdayLabels={weekdayLabels}
                     setValue={setValue}
                   />
                 )}

package/src/components/Rangepicker.tsx

@@ -21,6 +21,7 @@ interface IProps {
   valueFormat?: string;
   labelFormat?: string;
   closesAfterChange?: boolean;
+  weekdayLabels?: string[];
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -31,6 +32,7 @@ function Rangepicker({
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
   closesAfterChange = true,
+  weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -92,6 +94,7 @@ function Rangepicker({
                   hoverValue={hoverValue}
                   valueFormat={valueFormat}
                   monthPage={monthPage}
+                  weekdayLabels={weekdayLabels}
                   setStartValue={setStartValue}
                   setEndValue={setEndValue}
                   setHoverValue={setHoverValue}
@@ -103,6 +106,7 @@ function Rangepicker({
                     hoverValue={hoverValue}
                     valueFormat={valueFormat}
                     monthPage={monthPage + 1}
+                    weekdayLabels={weekdayLabels}
                     setStartValue={setStartValue}
                     setEndValue={setEndValue}
                     setHoverValue={setHoverValue}

package/src/components/datepicker/Month.tsx

@@ -8,10 +8,17 @@ interface Iprops {
   value: Date | null;
   valueFormat: string;
   monthPage: number;
+  weekdayLabels: string[];
   setValue: (value: Date) => void;
 }
 
-function DatepicerMonth({ value, valueFormat, monthPage, setValue }: Iprops) {
+function DatepicerMonth({
+  value,
+  valueFormat,
+  monthPage,
+  weekdayLabels,
+  setValue,
+}: Iprops) {
   const year = Math.ceil(monthPage / 12);
   const month = monthPage % 12 || 12;
   const firstDay = new Date(year, month - 1, 1).getDay(); // 이달 1일의 요일
@@ -46,6 +53,11 @@ function DatepicerMonth({ value, valueFormat, monthPage, setValue }: Iprops) {
 
   return (
     <div className={`${NAME_SPACE}__month-view`}>
+      {weekdayLabels.map((day, index) => (
+        <div className={`${NAME_SPACE}__weekday`} data-day={index} key={day}>
+          {day}
+        </div>
+      ))}
       {Array.apply(0, Array(firstDay)).map((x, i) => {
         const date = prevLastDate - (firstDay - i - 1);
         const thisValue = new Date(-1, monthPage + 22, date);

package/src/components/rangepicker/Month.tsx

@@ -10,6 +10,7 @@ interface Iprops {
   hoverValue: Date | null;
   valueFormat: string;
   monthPage: number;
+  weekdayLabels: string[];
   setStartValue: (value: Date | null) => void;
   setEndValue: (value: Date | null) => void;
   setHoverValue: (value: Date | null) => void;
@@ -21,6 +22,7 @@ function RangepicerMonth({
   hoverValue,
   valueFormat,
   monthPage,
+  weekdayLabels,
   setStartValue,
   setEndValue,
   setHoverValue,
@@ -94,6 +96,11 @@ function RangepicerMonth({
 
   return (
     <div className={`${NAME_SPACE}__month-view`}>
+      {weekdayLabels.map((day, index) => (
+        <div className={`${NAME_SPACE}__weekday`} data-day={index} key={day}>
+          {day}
+        </div>
+      ))}
       {Array.apply(0, Array(firstDay)).map((x, i) => {
         const date = prevLastDate - (firstDay - i - 1);
         const thisValue = new Date(-1, monthPage + 22, date);

test/src/App.tsx

@@ -21,6 +21,11 @@ function App() {
       <Rangepicker />
       <Rangepicker showsMultipleCalendar />
       <Rangepicker closesAfterChange={false} />
+      <Rangepicker
+        weekdayLabels={['일', '월', '화', '수', '목', '금', '토']}
+        showsMultipleCalendar
+        closesAfterChange={false}
+      />
     </div>
   );
 }