Skip to content

Commit 5a1e3ea

Browse files
handinugrohohandinugroho
committed
feat: add startWeekOnProps to mark the start week day
1 parent abb5e8c commit 5a1e3ea

File tree

6 files changed

+87
-11
lines changed

6 files changed

+87
-11
lines changed

‎pages/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function Playground() {
2424
const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
2525
const [readOnly, setReadOnly] = useState(false);
2626
const [startFrom, setStartFrom] = useState("2023-03-01");
27+
const [startWeekOn, setStartWeekOn] = useState("sun");
2728

2829
return (
2930
<div className="px-4 py-8">
@@ -58,6 +59,7 @@ export default function Playground() {
5859
containerClassName={containerClassName}
5960
displayFormat={displayFormat}
6061
readOnly={readOnly}
62+
startWeekOn={startWeekOn}
6163
/>
6264
</div>
6365

@@ -261,6 +263,19 @@ export default function Playground() {
261263
}}
262264
/>
263265
</div>
266+
<div className="mb-2">
267+
<label className="block" htmlFor="containerClassName">
268+
Start Week On
269+
</label>
270+
<input
271+
className="rounded border px-4 py-2 w-full border-gray-200"
272+
id="startWeekOnClassName"
273+
value={startWeekOn}
274+
onChange={e => {
275+
setStartWeekOn(e.target.value)
276+
}}
277+
/>
278+
</div>
264279
</div>
265280
</div>
266281
<div className="flex flex-row flex-wrap items-center justify-center w-full">

‎src/components/Calendar/Week.tsx

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,42 @@ import DatepickerContext from "../../contexts/DatepickerContext";
55
import { loadLanguageModule, shortString, ucFirst } from "../../helpers";
66

77
const Week: React.FC = () => {
8-
const { i18n } = useContext(DatepickerContext);
8+
const { i18n, startWeekOn } = useContext(DatepickerContext);
99
loadLanguageModule(i18n);
10-
10+
let startDateModifier = 0;
11+
switch (startWeekOn) {
12+
case "mon":
13+
startDateModifier = 1;
14+
break;
15+
case "tue":
16+
startDateModifier = 2;
17+
break;
18+
case "wed":
19+
startDateModifier = 3;
20+
break;
21+
case "thu":
22+
startDateModifier = 4;
23+
break;
24+
case "fri":
25+
startDateModifier = 5;
26+
break;
27+
case "sat":
28+
startDateModifier = 6;
29+
break;
30+
case "sun":
31+
startDateModifier = 0;
32+
break;
33+
default:
34+
startDateModifier = 0;
35+
break;
36+
}
1137
return (
1238
<div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
1339
{[0, 1, 2, 3, 4, 5, 6].map((item, index) => (
1440
<div key={index} className="tracking-wide text-gray-500 text-center">
1541
{ucFirst(
1642
shortString(
17-
dayjs(`2022-11-${6 + item}`)
43+
dayjs(`2022-11-${6 + (item + startDateModifier)}`)
1844
.locale(i18n)
1945
.format("ddd")
2046
)

‎src/components/Calendar/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,22 @@ const Calendar: React.FC<Props> = ({
5151
changeDatepickerValue,
5252
hideDatepicker,
5353
asSingle,
54-
i18n
54+
i18n,
55+
startWeekOn
5556
} = useContext(DatepickerContext);
5657
loadLanguageModule(i18n);
5758

5859
// States
5960
const [showMonths, setShowMonths] = useState(false);
6061
const [showYears, setShowYears] = useState(false);
6162
const [year, setYear] = useState(date.year());
62-
6363
// Functions
6464
const previous = useCallback(() => {
6565
return getLastDaysInMonth(
6666
previousMonth(date),
67-
getNumberOfDay(getFirstDayInMonth(date).ddd) - 1
67+
getNumberOfDay(getFirstDayInMonth(date).ddd, startWeekOn)
6868
);
69-
}, [date]);
69+
}, [date, startWeekOn]);
7070

7171
const current = useCallback(() => {
7272
return getDaysInMonth(formatDate(date));

‎src/components/Datepicker.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface Props {
4848
containerClassName?: string | null;
4949
displayFormat?: string;
5050
readOnly?: boolean;
51+
startWeekOn?: string;
5152
}
5253

5354
const Datepicker: React.FC<Props> = ({
@@ -67,7 +68,8 @@ const Datepicker: React.FC<Props> = ({
6768
inputClassName = null,
6869
containerClassName = null,
6970
displayFormat = "YYYY-MM-DD",
70-
readOnly = false
71+
readOnly = false,
72+
startWeekOn = "sun"
7173
}) => {
7274
// Ref
7375
const containerRef = useRef<HTMLDivElement>(null);
@@ -147,7 +149,7 @@ const Datepicker: React.FC<Props> = ({
147149
}
148150
setSecondDate(date);
149151
},
150-
[firstDate]
152+
[displayFormat, firstDate]
151153
);
152154

153155
const previousMonthSecond = useCallback(() => {
@@ -277,6 +279,7 @@ const Datepicker: React.FC<Props> = ({
277279
inputClassName,
278280
containerClassName,
279281
readOnly,
282+
startWeekOn,
280283
displayFormat
281284
};
282285
}, [
@@ -297,6 +300,7 @@ const Datepicker: React.FC<Props> = ({
297300
inputClassName,
298301
containerClassName,
299302
readOnly,
303+
startWeekOn,
300304
displayFormat,
301305
firstGotoDate
302306
]);

‎src/contexts/DatepickerContext.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ interface DatepickerStore {
3232
inputClassName?: string | null;
3333
containerClassName?: string | null;
3434
readOnly?: boolean;
35+
startWeekOn?: string;
3536
displayFormat?: string;
3637
}
3738

@@ -61,6 +62,7 @@ const DatepickerContext = createContext<DatepickerStore>({
6162
inputClassName: "",
6263
containerClassName: "",
6364
readOnly: false,
65+
startWeekOn: "sun",
6466
displayFormat: "YYYY-MM-DD"
6567
});
6668

‎src/helpers/index.ts

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,41 @@ export function getLastElementsInArray(array: number[] = [], size = 0) {
123123
return result.reverse();
124124
}
125125

126-
export function getNumberOfDay(dayString: string): number {
126+
export function getNumberOfDay(dayString: string, startWeekOn = "sun"): number {
127127
let number = 0;
128+
129+
let startDateModifier = 0;
130+
switch (startWeekOn) {
131+
case "mon":
132+
startDateModifier = 6;
133+
break;
134+
case "tue":
135+
startDateModifier = 5;
136+
break;
137+
case "wed":
138+
startDateModifier = 4;
139+
break;
140+
case "thu":
141+
startDateModifier = 3;
142+
break;
143+
case "fri":
144+
startDateModifier = 2;
145+
break;
146+
case "sat":
147+
startDateModifier = 1;
148+
break;
149+
case "sun":
150+
startDateModifier = 0;
151+
break;
152+
default:
153+
startDateModifier = 0;
154+
break;
155+
}
156+
128157
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].forEach(
129158
(item, index) => {
130159
if (item.includes(dayString)) {
131-
number = index + 1;
160+
number = (index + startDateModifier) % 7;
132161
}
133162
}
134163
);

0 commit comments

Comments
 (0)