Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

Add week numbers #50

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Add week numbers #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9631e8d
Add weekOfYear function
krists Nov 16, 2020
2e7054b
WIP: Add component option to display week numbers
krists Nov 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/duet-date-picker/date-localization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export type DuetLocalizedText = {
dayNames: DayNames
monthNames: MonthsNames
monthNamesShort: MonthsNames
weekNumber: string
weekNumberShort: string
}

const localization: DuetLocalizedText = {
Expand Down Expand Up @@ -44,6 +46,8 @@ const localization: DuetLocalizedText = {
"December",
],
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
weekNumber: "Week",
weekNumberShort: "#",
}

export default localization
11 changes: 10 additions & 1 deletion src/components/duet-date-picker/date-picker-month.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { h, FunctionalComponent } from "@stencil/core"
import { DuetDateFormatter } from "./date-adapter"
import { DuetLocalizedText } from "./date-localization"
import { DatePickerDay, DatePickerDayProps } from "./date-picker-day"
import { getViewOfMonth, inRange, DaysOfWeek, isEqual } from "./date-utils"
import { getViewOfMonth, inRange, DaysOfWeek, isEqual, weekOfYear } from "./date-utils"

function chunk<T>(array: T[], chunkSize: number): T[][] {
const result = []
Expand Down Expand Up @@ -35,6 +35,7 @@ type DatePickerMonthProps = {
focusedDayRef: (element: HTMLButtonElement) => void
onFocusIn?: (e: FocusEvent) => void
onMouseDown?: (e: MouseEvent) => void
weekNumbers?: boolean
}

export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
Expand All @@ -51,6 +52,7 @@ export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
focusedDayRef,
onMouseDown,
onFocusIn,
weekNumbers,
}) => {
const today = new Date()
const days = getViewOfMonth(focusedDate, firstDayOfWeek)
Expand All @@ -66,6 +68,12 @@ export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
>
<thead>
<tr>
{weekNumbers && (
<th class="duet-date__table-header" scope="col">
<span aria-hidden="true">{localization.weekNumberShort}</span>
<span class="duet-date__vhidden">{localization.weekNumber}</span>
</th>
)}
{mapWithOffset(localization.dayNames, firstDayOfWeek, dayName => (
<th class="duet-date__table-header" scope="col">
<span aria-hidden="true">{dayName.substr(0, 2)}</span>
Expand All @@ -77,6 +85,7 @@ export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
<tbody>
{chunk(days, 7).map(week => (
<tr class="duet-date__row">
{weekNumbers && <td class="duet-date__week">{weekOfYear(week[0])}</td>}
Copy link
Contributor

Choose a reason for hiding this comment

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

I think you need scope="row" role="rowheader" here to properly indicate this is a header for the row.

{week.map(day => (
<td
class="duet-date__cell"
Expand Down
13 changes: 13 additions & 0 deletions src/components/duet-date-picker/date-utils.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
parseISODate,
printISODate,
DaysOfWeek,
weekOfYear,
} from "./date-utils"

describe("duet-date-picker/date-utils", () => {
Expand Down Expand Up @@ -341,4 +342,16 @@ describe("duet-date-picker/date-utils", () => {
assertMonth(getViewOfMonth(new Date(2020, 11, 10)), [30, ...range(1, 31), ...range(1, 3)])
})
})

describe("weekOfYear", () => {
it("returns the week number of given date", () => {
expect(weekOfYear(new Date(2019, 11, 24))).toEqual(52)
expect(weekOfYear(new Date(2019, 11, 31))).toEqual(1)
expect(weekOfYear(new Date(2020, 0, 1))).toEqual(1)
expect(weekOfYear(new Date(2020, 11, 24))).toEqual(52)
expect(weekOfYear(new Date(2020, 11, 31))).toEqual(53)
expect(weekOfYear(new Date(2021, 0, 3))).toEqual(53)
expect(weekOfYear(new Date(2021, 0, 4))).toEqual(1)
})
})
})
19 changes: 19 additions & 0 deletions src/components/duet-date-picker/date-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/
const MILLISECONDS_IN_WEEK = 604800000

export enum DaysOfWeek {
Sunday = 0,
Expand Down Expand Up @@ -209,3 +210,21 @@ export function chr4() {
export function createIdentifier(prefix) {
return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`
}

export function weekOfYear(date: Date): number {
const givenYear = date.getFullYear()
const fourthOfJanuaryOfGivenYear = startOfWeek(new Date(givenYear, 0, 4))
const fourthOfJanuaryOfNextYear = startOfWeek(new Date(givenYear + 1, 0, 4))
let startYear
if (date.getTime() >= fourthOfJanuaryOfNextYear.getTime()) {
startYear = givenYear + 1
} else if (date.getTime() >= fourthOfJanuaryOfGivenYear.getTime()) {
startYear = givenYear
} else {
startYear = givenYear - 1
}
const start = startOfWeek(new Date(startYear, 0, 4))
const end = startOfWeek(date)
const diff = end.getTime() - start.getTime()
return Math.round(diff / MILLISECONDS_IN_WEEK) + 1
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm curious about the implementation of this. It's very hard to know if this gives correct results for every possibility. Is this lifted from somewhere (which is fine but a link in a comment would be useful), or have you written it yourself? Are you able to give a walk through of what's going on here?

I'm curious about the use of 4th January. And also whether this would be affected by (and therefore should take as an argument) the first day of the week? I assume so

Copy link
Author

Choose a reason for hiding this comment

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

Here are the rules of how to determine week numbers https://en.wikipedia.org/wiki/Week#Week_numbering
This version returns ISO week number and is healivy inspired by momentjs and date-fns packages. Both of them use 4th january to find first week.

In my use-case iso week number made most sense as it matches values that PostgreSQL is returning(SELECT EXTRACT('isoyear' FROM '2021-01-03'::date), EXTRACT('week' FROM '2021-01-03'::date)) but there are other calendar apps with different logic. For example Apple Calendar 2020-12-28 is recognised as 1st week and not 53.

date-fns package getWeek function has two options - weekStartsOn and firstWeekContainsDate so solve this.

How do you feel about adding momentjs or date-fns as a dependency? Or should we just reimplement the function here as well?

Copy link
Author

Choose a reason for hiding this comment

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

@WickyNilliams Have you had time to decide how this could be continued?

Copy link
Contributor

Choose a reason for hiding this comment

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

Hey sorry about the delay @krists. Have a lot going on at the moment, so it's hard to find time to dedicate to this.

Oh that wikipedia article will be very useful. I started researching how to calculate this before and wasn't finding any good information.

I don't want to add date-fns or moment as a dependency, since we were very focused on making this picker as lightweight as possible.

I'll take a closer look at the logic here later in the week

Copy link
Author

Choose a reason for hiding this comment

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

@WickyNilliams understandable. jquery-ui library has similar functionality as well. It provides a option to override default implemenation.

}
7 changes: 7 additions & 0 deletions src/components/duet-date-picker/duet-date-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,13 @@
text-align: center;
}

.duet-date__week {
font-family: var(--duet-font);
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
font-weight: var(--duet-font-normal);
}

.duet-date__day {
-moz-appearance: none;
-webkit-appearance: none;
Expand Down
6 changes: 6 additions & 0 deletions src/components/duet-date-picker/duet-date-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,11 @@ export class DuetDatePicker implements ComponentInterface {
*/
@Prop() dateAdapter: DuetDateAdapter = isoAdapter

/**
* Should display week numbers
*/
@Prop() weeks: boolean = false

/**
* Events section.
*/
Expand Down Expand Up @@ -713,6 +718,7 @@ export class DuetDatePicker implements ComponentInterface {
min={minDate}
max={maxDate}
dateFormatter={this.dateAdapter.format}
weekNumbers={this.weeks}
/>
</div>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,13 @@ <h2>Required atrribute</h2>
alert("Submitted")
})
&lt;/script&gt;</code></pre>
<br />
<h2>Week numbers</h2>
<label for="date10">Choose a date</label>
<duet-date-picker weeks identifier="date10"></duet-date-picker>
<pre><code class="html">&lt;label for="date"&gt;Choose a date&lt;/label&gt;
&lt;duet-date-picker weeks identifier="date"&gt;&lt;/duet-date-picker&gt;
</code></pre>
<br />
<p>
© 2020 LocalTapiola Services Ltd /
Expand Down