Skip to content

Commit

Permalink
Timezone fix (#43)
Browse files Browse the repository at this point in the history 
* Implement timezone fix from wc-datepicker

* Refactor chrono-parser and fix remaining timezone bugs
  • Loading branch information
@fymmot
fymmot committed Jan 20, 2023
1 parent e05f5bf commit 7aac694
Show file tree
Hide file tree
Showing 9 changed files with 221 additions and 136 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-candles-type.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"inclusive-dates": patch
---

Add timezone handling
1 change: 0 additions & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
<a href="#demo" class="skip-link">Skip to the demo</a>
<h1>Inclusive datepicker 2.0</h1>
<p>Next version of <a href="https://github.com/fymmot/inclusive-dates"><code>fymmot/inclusive-dates</code></a>. <strong>Work in progress!</strong></p>
<p><strong>Note: Currently very buggy in certain timezones including U.S.. A fix is on the way!</strong></p>
<p>A human-friendly and fully accessible datepicker with support for natural language input. Now as a reusable Web Component!</p>
<p>
Forked from the excellent <a href="https://github.com/sqrrl/wc-datepicker"><code>sqrrl/wc-datepicker</code></a>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"start2": "concurrently --kill-others \"yarn sass:watch\" \"stencil build --dev --watch --serve\"",
"start:stencil": "stencil build --dev --watch --serve",
"start:docs": "concurrently --kill-others \"npm-watch build:docs\" \"serve docs-www\"",
"test": "stencil test --spec",
"test:watch": "stencil test --spec --watchAll",
"test": "TZ=UTC stencil test --spec",
"test:watch": "TZ=UTC stencil test --spec --watchAll",
"generate": "stencil generate",
"changeset": "changeset",
"version-packages": "changeset version",
Expand Down
15 changes: 10 additions & 5 deletions src/components/inclusive-dates-calendar/inclusive-dates-calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
isDateInRange,
isSameDay,
monthIsDisabled,
removeTimezoneOffset,
subDays
} from "../../utils/utils";
import { dateIsWithinBounds } from "../../utils/utils";
Expand Down Expand Up @@ -143,7 +144,9 @@ export class InclusiveDatesCalendar {

@Watch("startDate")
watchStartDate() {
this.currentDate = this.startDate ? new Date(this.startDate) : new Date();
this.currentDate = this.startDate
? removeTimezoneOffset(new Date(this.startDate))
: new Date();
}

@Watch("value")
Expand Down Expand Up @@ -181,7 +184,9 @@ export class InclusiveDatesCalendar {
}

private init = () => {
this.currentDate = this.startDate ? new Date(this.startDate) : new Date();
this.currentDate = this.startDate
? removeTimezoneOffset(new Date(this.startDate))
: new Date();
this.updateWeekdays();
};

Expand Down Expand Up @@ -339,7 +344,7 @@ export class InclusiveDatesCalendar {
return;
}

const date = new Date(target.dataset.date);
const date = removeTimezoneOffset(new Date(target.dataset.date));

this.updateCurrentDate(date);
this.onSelectDate(date);
Expand Down Expand Up @@ -417,8 +422,8 @@ export class InclusiveDatesCalendar {
return;
}

const date = new Date(
(event.target as HTMLElement).closest("td").dataset.date
const date = removeTimezoneOffset(
new Date((event.target as HTMLElement).closest("td").dataset.date)
);

this.hoveredDate = date;
Expand Down
39 changes: 21 additions & 18 deletions src/components/inclusive-dates/inclusive-dates.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ describe("inclusive-dates", () => {
consoleSpy.mockClear();
});

it;

it("Chrono.js correctly parses dates", async () => {
const page = await newSpecPage({
components: [InclusiveDates],
Expand All @@ -61,33 +63,33 @@ describe("inclusive-dates", () => {
let parsedDate = await datepicker.parseDate("January 15", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(`${referenceDate.getFullYear()}-01-15`);
expect(parsedDate.value).toEqual(`${referenceDate.getFullYear()}-01-15`);
parsedDate = await datepicker.parseDate("February tenth ", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(`${referenceDate.getFullYear()}-02-10`);
expect(parsedDate.value).toEqual(`${referenceDate.getFullYear()}-02-10`);
parsedDate = await datepicker.parseDate("01-10-24", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual("2024-01-10");
expect(parsedDate.value).toEqual("2024-01-10");
parsedDate = await datepicker.parseDate(
"Twenty second of September",
false,
{ referenceDate: referenceDate }
);
expect(parsedDate.date).toEqual("2023-09-22");
expect(parsedDate.value).toEqual("2023-09-22");
parsedDate = await datepicker.parseDate(
"I want to book a ticket on the tenth of september",
false,
{ referenceDate: referenceDate }
);
expect(parsedDate.date).toEqual("2023-09-10");
expect(parsedDate.value).toEqual("2023-09-10");

// Relative dates
parsedDate = await datepicker.parseDate("in ten days", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(
expect(parsedDate.value).toEqual(
new Date(
new Date(referenceDate).setDate(new Date(referenceDate).getDate() + 10)
)
Expand All @@ -97,7 +99,7 @@ describe("inclusive-dates", () => {
parsedDate = await datepicker.parseDate("yesterday", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(
expect(parsedDate.value).toEqual(
new Date(
new Date(referenceDate).setDate(new Date(referenceDate).getDate() - 1)
)
Expand All @@ -107,7 +109,7 @@ describe("inclusive-dates", () => {
parsedDate = await datepicker.parseDate("tomorrow", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(
expect(parsedDate.value).toEqual(
new Date(
new Date(referenceDate).setDate(new Date(referenceDate).getDate() + 1)
)
Expand All @@ -117,7 +119,7 @@ describe("inclusive-dates", () => {
parsedDate = await datepicker.parseDate("next year", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(
expect(parsedDate.value).toEqual(
new Date(
new Date(referenceDate).setFullYear(
new Date(referenceDate).getFullYear() + 1
Expand All @@ -129,7 +131,7 @@ describe("inclusive-dates", () => {
parsedDate = await datepicker.parseDate("Let's go in three weeks", false, {
referenceDate: referenceDate
});
expect(parsedDate.date).toEqual(
expect(parsedDate.value).toEqual(
new Date(
new Date(referenceDate).setDate(new Date(referenceDate).getDate() + 21)
)
Expand All @@ -148,9 +150,9 @@ describe("inclusive-dates", () => {
const datepicker = getDatePicker(page);

let parsedDate = await datepicker.parseDate("in ten days");
expect(parsedDate.date).toEqual(undefined);
expect(parsedDate.value).toEqual(undefined);
parsedDate = await datepicker.parseDate("January 5");
expect(parsedDate.date).toEqual(undefined);
expect(parsedDate.value).toEqual(undefined);
expect(consoleSpy).toHaveBeenCalledWith(
`inclusive-dates: The chosen locale "sv-SE" is not supported by Chrono.js. Date parsing has been disabled`
);
Expand All @@ -166,7 +168,7 @@ describe("inclusive-dates", () => {
const datepicker = getDatePicker(page);

let parsedDate = await datepicker.parseDate("2023-02-02");
expect(parsedDate.date).toEqual("2023-02-02");
expect(parsedDate.value).toEqual("2023-02-02");
});

it("Chrono returns error when date is out of bounds", async () => {
Expand All @@ -178,14 +180,15 @@ describe("inclusive-dates", () => {
const datepicker = getDatePicker(page);

let parsedDate = await datepicker.parseDate("January first 2023");
expect(parsedDate.date).toEqual(undefined);
expect(parsedDate.value).toEqual(undefined);
expect(parsedDate.value).toEqual(undefined);
parsedDate = await datepicker.parseDate("January 31 2023");
expect(parsedDate.date).toEqual(undefined);
expect(parsedDate.value).toEqual(undefined);
parsedDate = await datepicker.parseDate("January 17 2023");
expect(parsedDate.date).toEqual("2023-01-17");
expect(parsedDate.value).toEqual("2023-01-17");
parsedDate = await datepicker.parseDate("January 30 2023");
expect(parsedDate.date).toEqual("2023-01-30");
expect(parsedDate.value).toEqual("2023-01-30");
parsedDate = await datepicker.parseDate("January 15 2023");
expect(parsedDate.date).toEqual("2023-01-15");
expect(parsedDate.value).toEqual("2023-01-15");
});
});

1 comment on commit 7aac694

@vercel
Copy link

@vercel vercel bot commented on 7aac694 Jan 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

inclusive-dates – ./

inclusive-dates-git-main-fymmot.vercel.app
inclusive-dates-fymmot.vercel.app
inclusive-dates.vercel.app

Please sign in to comment.