Skip to content
This repository was archived by the owner on Apr 17, 2022. It is now read-only.

Commit 18a06ce

Browse files
JasenkooJasenkoo
committed
fix: Calendar dates not matching dates from different time-zone (#62)
1 parent 075b83d commit 18a06ce

File tree

3 files changed

+51
-74
lines changed

3 files changed

+51
-74
lines changed

‎src/Vue3DatePicker/components/composition/calendar.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
isDateAfter,
1717
isDateBefore,
1818
isDateEqual,
19+
sanitizeDate,
1920
setDateMonthOrYear,
2021
setDateTime,
2122
} from '../../utils/date-utils';
@@ -132,19 +133,23 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
132133
* Check if date is between max and min date, or if it is included in filters
133134
*/
134135
const isDisabled = (date: Date): boolean => {
135-
const aboveMax = props.maxDate ? isDateAfter(date, props.maxDate) : false;
136-
const bellowMin = props.minDate ? isDateBefore(date, props.minDate) : false;
136+
const aboveMax = props.maxDate ? isDateAfter(sanitizeDate(date), sanitizeDate(new Date(props.maxDate))) : false;
137+
const bellowMin = props.minDate
138+
? isDateBefore(sanitizeDate(date), sanitizeDate(new Date(props.minDate)))
139+
: false;
137140
const inDisableArr =
138141
typeof props.disabledDates === 'function'
139142
? props.disabledDates(date)
140-
: props.disabledDates.some((disabledDate: Date | string) => isDateEqual(disabledDate, date));
143+
: props.disabledDates.some((disabledDate: Date | string) =>
144+
isDateEqual(sanitizeDate(new Date(disabledDate)), sanitizeDate(date)),
145+
);
141146
const disabledMonths = props.filters.months.length ? props.filters.months.map((month) => +month) : [];
142147
const inDisabledMonths = disabledMonths.includes(getDateMonth(date));
143148
const weekDayDisabled = props.disabledWeekDays.length
144149
? props.disabledWeekDays.some((day) => +day === getWeekDay(date))
145150
: false;
146151
const notInSpecific = props.allowedDates.length
147-
? !props.allowedDates.some((dateVal) => isDateEqual(new Date(dateVal), date))
152+
? !props.allowedDates.some((dateVal) => isDateEqual(sanitizeDate(new Date(dateVal)), sanitizeDate(date)))
148153
: false;
149154

150155
const dateYear = getDateYear(date);
@@ -575,9 +580,10 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
575580
}
576581
};
577582

578-
const getMarker = (date: UnwrapRef<ICalendarDay>): IMarker | undefined => {
579-
return props.markers.find((marker) => isDateEqual(new Date(date.value), new Date(marker.date)));
580-
};
583+
const getMarker = (date: UnwrapRef<ICalendarDay>): IMarker | undefined =>
584+
props.markers.find((marker) =>
585+
isDateEqual(sanitizeDate(new Date(date.value)), sanitizeDate(new Date(marker.date))),
586+
);
581587

582588
const selectCurrentDate = (): void => {
583589
if (!props.range) {

‎src/Vue3DatePicker/utils/date-utils.ts‎

Lines changed: 33 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import {
3434

3535
import { IMonthValue, InternalModuleValue, ITimeValue, WeekStartNum } from '../interfaces';
3636

37+
export const sanitizeDate = (date: Date) => new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
38+
3739
/**
3840
* it will try to parse date based on pattern and parts of the text value
3941
*/
@@ -59,9 +61,7 @@ export const resetDateTime = (value: Date | string): Date => {
5961
/**
6062
* Convert string value to date based on provided pattern
6163
*/
62-
export const parseDate = (date: string, pattern: string): Date => {
63-
return parse(date, pattern, new Date());
64-
};
64+
export const parseDate = (date: string, pattern: string): Date => parse(date, pattern, new Date());
6565

6666
/**
6767
* Check if provided date(s) is valid
@@ -114,9 +114,8 @@ export const setDateMonthOrYear = (date: Date | null, month?: number | null, yea
114114
return dateCopy;
115115
};
116116

117-
const getTimeFormat = (is24: boolean, seconds: boolean): string => {
118-
return is24 ? `HH:mm${seconds ? ':ss' : ''}` : `hh:mm${seconds ? ':ss' : ''} aa`;
119-
};
117+
const getTimeFormat = (is24: boolean, seconds: boolean): string =>
118+
is24 ? `HH:mm${seconds ? ':ss' : ''}` : `hh:mm${seconds ? ':ss' : ''} aa`;
120119

121120
export const getDefaultPattern = (
122121
pattern: string | null,
@@ -142,19 +141,18 @@ export const getDefaultPattern = (
142141
* Extract time value from the date for time picker
143142
*/
144143
export const getTimeVal = (date?: Date): ITimeValue => {
144+
const dateValue = date || new Date();
145145
return {
146-
hours: getHours(date || new Date()),
147-
minutes: getMinutes(date || new Date()),
148-
seconds: getSeconds(date || new Date()),
146+
hours: getHours(dateValue),
147+
minutes: getMinutes(dateValue),
148+
seconds: getSeconds(dateValue),
149149
};
150150
};
151151

152152
/**
153153
* Extract month value from the date for month picker
154154
*/
155-
export const getMonthVal = (date: Date): IMonthValue => {
156-
return { month: getMonth(date), year: getYear(date) };
157-
};
155+
export const getMonthVal = (date: Date): IMonthValue => ({ month: getMonth(date), year: getYear(date) });
158156

159157
/**
160158
* Map internal date value to the value that will be passed to v-model external on time picker
@@ -169,9 +167,7 @@ export const getTImeForExternal = (date: Date | Date[]): ITimeValue | ITimeValue
169167
/**
170168
* Map internal date vale to the value that will be passed to v-model external on month picker
171169
*/
172-
export const getMonthForExternal = (date: Date): IMonthValue => {
173-
return getMonthVal(date);
174-
};
170+
export const getMonthForExternal = (date: Date): IMonthValue => getMonthVal(date);
175171

176172
/**
177173
* Format date values for the input field based on provided pattern
@@ -187,16 +183,12 @@ export const formatDate = (value: Date | Date[], pattern: string): string => {
187183
/**
188184
* Get month value from the provided date
189185
*/
190-
export const getDateMonth = (date: Date): number => {
191-
return getMonth(date);
192-
};
186+
export const getDateMonth = (date: Date): number => getMonth(date);
193187

194188
/**
195189
* Get year value from the provided date
196190
*/
197-
export const getDateYear = (date: Date): number => {
198-
return getYear(date);
199-
};
191+
export const getDateYear = (date: Date): number => getYear(date);
200192

201193
/**
202194
* Check if the given date is after the provided date
@@ -231,23 +223,17 @@ export const isDateEqual = (date: Date | string | null, dateToCompare: Date | st
231223
/**
232224
* Return the ISO week number for the given date
233225
*/
234-
export const getWeekNumber = (date: Date): number => {
235-
return getISOWeek(new Date(date));
236-
};
226+
export const getWeekNumber = (date: Date): number => getISOWeek(new Date(date));
237227

238228
/**
239229
* Get hours from given date, if none, will return current hours
240230
*/
241-
export const getDateHours = (date?: Date): number => {
242-
return getHours(date || new Date());
243-
};
231+
export const getDateHours = (date?: Date): number => getHours(date || new Date());
244232

245233
/**
246234
* Get minutes from the given date, if none, will return current minutes
247235
*/
248-
export const getDateMinutes = (date?: Date): number => {
249-
return getMinutes(date || new Date());
250-
};
236+
export const getDateMinutes = (date?: Date): number => getMinutes(date || new Date());
251237

252238
export const getDateSeconds = (date?: Date): number => {
253239
return getSeconds(date || new Date());
@@ -256,45 +242,37 @@ export const getDateSeconds = (date?: Date): number => {
256242
/**
257243
* Add n amount of days to a given date
258244
*/
259-
export const getAddedDays = (date: Date, days: number): Date => {
260-
return addDays(date, days);
261-
};
245+
export const getAddedDays = (date: Date, days: number): Date => addDays(date, days);
262246

263247
/**
264248
* Add specific amount of hours to the previous hours
265249
*/
266-
export const addDateHours = (hours: number, toAdd: number): number => {
267-
return getHours(addHours(setHours(new Date(), hours), toAdd));
268-
};
250+
export const addDateHours = (hours: number, toAdd: number): number =>
251+
getHours(addHours(setHours(new Date(), hours), toAdd));
269252

270253
/**
271254
* Subtract specific amount of hours to the previous hours
272255
*/
273-
export const subDateHours = (hours: number, toSub: number): number => {
274-
return getHours(subHours(setHours(new Date(), hours), toSub));
275-
};
256+
export const subDateHours = (hours: number, toSub: number): number =>
257+
getHours(subHours(setHours(new Date(), hours), toSub));
276258

277259
/**
278260
* Add specific amount of minutes to the previous minutes
279261
*/
280-
export const addDateMinutes = (minutes: number, toAdd: number): number => {
281-
return getMinutes(addMinutes(setMinutes(new Date(), minutes), toAdd));
282-
};
262+
export const addDateMinutes = (minutes: number, toAdd: number): number =>
263+
getMinutes(addMinutes(setMinutes(new Date(), minutes), toAdd));
283264

284265
/**
285266
* Subtract specific amount of minutes to the previous minutes
286267
*/
287-
export const subDateMinutes = (minutes: number, toSub: number): number => {
288-
return getMinutes(subMinutes(setMinutes(new Date(), minutes), toSub));
289-
};
268+
export const subDateMinutes = (minutes: number, toSub: number): number =>
269+
getMinutes(subMinutes(setMinutes(new Date(), minutes), toSub));
290270

291-
export const addDateSeconds = (seconds: number, toAdd: number): number => {
292-
return getSeconds(addSeconds(setSeconds(new Date(), seconds), toAdd));
293-
};
271+
export const addDateSeconds = (seconds: number, toAdd: number): number =>
272+
getSeconds(addSeconds(setSeconds(new Date(), seconds), toAdd));
294273

295-
export const subDateSeconds = (seconds: number, toSub: number): number => {
296-
return getSeconds(subSeconds(setSeconds(new Date(), seconds), toSub));
297-
};
274+
export const subDateSeconds = (seconds: number, toSub: number): number =>
275+
getSeconds(subSeconds(setSeconds(new Date(), seconds), toSub));
298276

299277
export const getPreviousMonthYear = (month: number, year: number): { month: number; year: number } => {
300278
const date = subMonths(setYear(setMonth(new Date(), month), year), 1);
@@ -308,17 +286,12 @@ export const getNextYearMonth = (month: number, year: number): { month: number;
308286

309287
export const addMonthsToDate = (date: Date | string, amount = 1): Date => addMonths(new Date(date), amount);
310288

311-
export const getWeekDay = (date: string | Date): number => {
312-
return getDay(new Date(date));
313-
};
289+
export const getWeekDay = (date: string | Date): number => getDay(new Date(date));
314290

315-
export const getStartOfTheWeek = (date: Date, start: WeekStartNum): Date => {
316-
return startOfWeek(date, { weekStartsOn: start });
317-
};
291+
export const getStartOfTheWeek = (date: Date, start: WeekStartNum): Date => startOfWeek(date, { weekStartsOn: start });
318292

319-
const setTimeValue = (date: Date): Date => {
320-
return set(new Date(), { hours: getHours(date), minutes: getMinutes(date), seconds: getSeconds(date) });
321-
};
293+
const setTimeValue = (date: Date): Date =>
294+
set(new Date(), { hours: getHours(date), minutes: getMinutes(date), seconds: getSeconds(date) });
322295

323296
const getMinMaxTime = (time: ITimeValue): Date => {
324297
return set(new Date(), {

‎src/Vue3DatePicker/utils/util.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,15 @@ import {
1010
MaybeElementRef,
1111
WeekStartNum,
1212
} from '../interfaces';
13-
import { getAddedDays, getStartOfTheWeek, isDateEqual, resetDateTime } from './date-utils';
13+
import { getAddedDays, getDateMonth, getStartOfTheWeek, isDateEqual, resetDateTime } from './date-utils';
1414

1515
// Get 7 days from the provided start date, month is used to check whether the date is from the specified month or in the offset
1616
const getWeekDays = (startDay: Date, month: number, hideOffsetDates: boolean): ICalendarDay[] => {
1717
const startDate = new Date(JSON.parse(JSON.stringify(startDay)));
1818
const dates = [];
1919
for (let i = 0; i < 7; i++) {
20-
const next = new Date(new Date(JSON.parse(JSON.stringify(startDate))).getTime());
21-
next.setDate(startDate.getDate() + i);
22-
const isNext = JSON.parse(JSON.stringify(next.getMonth())) !== month;
20+
const next = getAddedDays(startDate, i);
21+
const isNext = getDateMonth(next) !== month;
2322
dates.push({
2423
text: hideOffsetDates && isNext ? '' : next.getDate(),
2524
value: next,
@@ -134,9 +133,8 @@ export const getDefaultTextInputOptions = (): ITextInputOptions => ({
134133
/**
135134
* Default filters to merge with user provided values
136135
*/
137-
export const getDefaultFilters = (filters: Partial<IDateFilter>): IDateFilter => {
138-
return Object.assign({ months: [], years: [], times: { hours: [], minutes: [], seconds: [] } }, filters);
139-
};
136+
export const getDefaultFilters = (filters: Partial<IDateFilter>): IDateFilter =>
137+
Object.assign({ months: [], years: [], times: { hours: [], minutes: [], seconds: [] } }, filters);
140138

141139
/**
142140
* For v-for loops randomize string value

0 commit comments

Comments
 (0)