Skip to content

Commit 37c588e

Browse files
sctsct
authored
Merge branch 'master' into master
2 parents a7aa195 + cbdea02 commit 37c588e

File tree

6 files changed

+102
-15
lines changed

6 files changed

+102
-15
lines changed

‎pages/index.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ export default function Playground() {
2323
const [containerClassName, setContainerClassName] = useState("");
2424
const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
2525
const [readOnly, setReadOnly] = useState(false);
26-
const [startFrom, setStartFrom] = useState("2023-01-02");
2726
const [minDate, setMinDate] = useState("");
2827
const [maxDate, setMaxDate] = useState("");
2928
const [disabledDates, setDisabledDates] = useState([]);
3029
const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
30+
const [startFrom, setStartFrom] = useState("2023-03-01");
31+
const [startWeekOn, setStartWeekOn] = useState("");
3132

3233
return (
3334
<div className="px-4 py-8">
@@ -65,6 +66,7 @@ export default function Playground() {
6566
minDate={minDate}
6667
maxDate={maxDate}
6768
disabledDates={disabledDates}
69+
startWeekOn={startWeekOn}
6870
/>
6971
</div>
7072

@@ -227,6 +229,19 @@ export default function Playground() {
227229
}}
228230
/>
229231
</div>
232+
<div className="mb-2">
233+
<label className="block" htmlFor="startWeekOnClassName">
234+
Start Week On
235+
</label>
236+
<input
237+
className="rounded border px-4 py-2 w-full border-gray-200"
238+
id="startWeekOnClassName"
239+
value={startWeekOn}
240+
onChange={e => {
241+
setStartWeekOn(e.target.value);
242+
}}
243+
/>
244+
</div>
230245
</div>
231246
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
232247
<div className="mb-2">

‎src/components/Calendar/Week.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,51 @@
11
import dayjs from "dayjs";
2+
import weekday from "dayjs/plugin/weekday";
23
import React, { useContext } from "react";
34

45
import DatepickerContext from "../../contexts/DatepickerContext";
56
import { loadLanguageModule, shortString, ucFirst } from "../../helpers";
67

8+
dayjs.extend(weekday);
9+
710
const Week: React.FC = () => {
8-
const { i18n } = useContext(DatepickerContext);
11+
const { i18n, startWeekOn } = useContext(DatepickerContext);
912
loadLanguageModule(i18n);
13+
let startDateModifier = dayjs().locale(i18n).weekday(0).get("day");
14+
if (startWeekOn) {
15+
switch (startWeekOn) {
16+
case "mon":
17+
startDateModifier = 1;
18+
break;
19+
case "tue":
20+
startDateModifier = 2;
21+
break;
22+
case "wed":
23+
startDateModifier = 3;
24+
break;
25+
case "thu":
26+
startDateModifier = 4;
27+
break;
28+
case "fri":
29+
startDateModifier = 5;
30+
break;
31+
case "sat":
32+
startDateModifier = 6;
33+
break;
34+
case "sun":
35+
startDateModifier = 0;
36+
break;
37+
default:
38+
break;
39+
}
40+
}
1041

1142
return (
1243
<div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
1344
{[0, 1, 2, 3, 4, 5, 6].map((item, index) => (
1445
<div key={index} className="tracking-wide text-gray-500 text-center">
1546
{ucFirst(
1647
shortString(
17-
dayjs(`2022-11-${6 + item}`)
48+
dayjs(`2022-11-${6 + (item + startDateModifier)}`)
1849
.locale(i18n)
1950
.format("ddd")
2051
)

‎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, i18n, startWeekOn)
6868
);
69-
}, [date]);
69+
}, [date, i18n, startWeekOn]);
7070

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

‎src/components/Datepicker.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface Props {
4848
minDate?: DateType | null;
4949
maxDate?: DateType | null;
5050
disabledDates?: DateRangeType[] | null;
51+
startWeekOn?: string | null;
5152
}
5253

5354
const Datepicker: React.FC<Props> = ({
@@ -72,7 +73,8 @@ const Datepicker: React.FC<Props> = ({
7273
maxDate = null,
7374
disabledDates = null,
7475
inputId,
75-
inputName
76+
inputName,
77+
startWeekOn = "sun"
7678
}) => {
7779
// Ref
7880
const containerRef = useRef<HTMLDivElement>(null);
@@ -219,8 +221,8 @@ const Datepicker: React.FC<Props> = ({
219221
validDate && (startDate.isSame(endDate) || startDate.isBefore(endDate));
220222
if (condition) {
221223
setPeriod({
222-
start: formatDate(startDate, displayFormat),
223-
end: formatDate(endDate, displayFormat)
224+
start: formatDate(startDate),
225+
end: formatDate(endDate)
224226
});
225227
setInputText(
226228
`${formatDate(startDate, displayFormat)}${
@@ -287,7 +289,8 @@ const Datepicker: React.FC<Props> = ({
287289
maxDate,
288290
disabledDates,
289291
inputId,
290-
inputName
292+
inputName,
293+
startWeekOn
291294
};
292295
}, [
293296
asSingle,
@@ -313,7 +316,8 @@ const Datepicker: React.FC<Props> = ({
313316
maxDate,
314317
disabledDates,
315318
inputId,
316-
inputName
319+
inputName,
320+
startWeekOn
317321
]);
318322

319323
return (

‎src/contexts/DatepickerContext.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ interface DatepickerStore {
2727
inputClassName?: string | null;
2828
containerClassName?: string | null;
2929
readOnly?: boolean;
30+
startWeekOn?: string | null;
3031
displayFormat?: string;
3132
minDate?: DateType | null;
3233
maxDate?: DateType | null;
@@ -66,7 +67,8 @@ const DatepickerContext = createContext<DatepickerStore>({
6667
maxDate: null,
6768
disabledDates: null,
6869
inputId: undefined,
69-
inputName: undefined
70+
inputName: undefined,
71+
startWeekOn: "sun"
7072
});
7173

7274
export default DatepickerContext;

‎src/helpers/index.ts‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import dayjs from "dayjs";
2+
import weekday from "dayjs/plugin/weekday";
3+
4+
dayjs.extend(weekday);
25

36
export function classNames(...classes: (false | null | undefined | string)[]) {
47
return classes.filter(Boolean).join(" ");
@@ -127,15 +130,47 @@ export function getLastElementsInArray(array: number[] = [], size = 0) {
127130
return result.reverse();
128131
}
129132

130-
export function getNumberOfDay(dayString: string): number {
133+
export function getNumberOfDay(dayString: string, i18n: string, startWeekOn?: string): number {
131134
let number = 0;
135+
136+
let startDateModifier = 7 - dayjs().locale(i18n).weekday(0).get("day");
137+
138+
if (startWeekOn) {
139+
switch (startWeekOn) {
140+
case "mon":
141+
startDateModifier = 6;
142+
break;
143+
case "tue":
144+
startDateModifier = 5;
145+
break;
146+
case "wed":
147+
startDateModifier = 4;
148+
break;
149+
case "thu":
150+
startDateModifier = 3;
151+
break;
152+
case "fri":
153+
startDateModifier = 2;
154+
break;
155+
case "sat":
156+
startDateModifier = 1;
157+
break;
158+
case "sun":
159+
startDateModifier = 0;
160+
break;
161+
default:
162+
break;
163+
}
164+
}
165+
132166
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].forEach(
133167
(item, index) => {
134168
if (item.includes(dayString)) {
135-
number = index + 1;
169+
number = (index + startDateModifier) % 7;
136170
}
137171
}
138172
);
173+
139174
return number;
140175
}
141176

0 commit comments

Comments
 (0)