feat(Calendar, DatePicker, DateRangePicker): allow to select weeks, months, and years

Author: mrholek

js/src/calendar.js

@@ -11,6 +11,7 @@ import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import { defineJQueryPlugin } from './util/index.js'
 import {
+  convertToDateObject,
   createGroupsInArray,
   getMonthDetails,
   getMonthsNames,
@@ -59,6 +60,7 @@ const Default = {
   range: true,
   selectAdjacementDays: false,
   selectEndDate: false,
+  selectionType: 'day',
   showAdjacementDays: true,
   showWeekNumber: false,
   startDate: null,
@@ -78,6 +80,7 @@ const DefaultType = {
   range: 'boolean',
   selectAdjacementDays: 'boolean',
   selectEndDate: 'boolean',
+  selectionType: 'string',
   showAdjacementDays: 'boolean',
   showWeekNumber: 'boolean',
   startDate: '(date|string|null)',
@@ -94,13 +97,17 @@ class Calendar extends BaseComponent {
     super(element)
 
     this._config = this._getConfig(config)
-    this._calendarDate = this._config.calendarDate
-    this._startDate = this._config.startDate
-    this._endDate = this._config.endDate
+    this._calendarDate = convertToDateObject(this._config.calendarDate, this._config.selectionType)
+    this._startDate = convertToDateObject(this._config.startDate, this._config.selectionType)
+    this._endDate = convertToDateObject(this._config.endDate, this._config.selectionType)
     this._hoverDate = null
     this._selectEndDate = this._config.selectEndDate
     this._view = 'days'
 
+    if (this._config.selectionTyp === 'year') {
+      this._view = 'years'
+    }
+
     this._createCalendar()
     this._addEventListeners()
   }
@@ -368,9 +375,7 @@ class Calendar extends BaseComponent {
         ${this._view === 'days' ? monthDetails.map(week => (
           `<tr class="calendar-row">
             ${this._config.showWeekNumber ?
-              `<td class="calendar-cell week-number">
-                <div class="calendar-cell-inner">${week.weekNumber}</div>
-              </td>` : ''
+              `<th class="calendar-cell-week-number">${week.weekNumber}</td>` : ''
             }
             ${week.days.map(({ date, month }) => (
             month === 'current' || this._config.showAdjacementDays ?

js/src/util/calendar.js

@@ -1,50 +1,63 @@
-export const convertToLocalDate = (d, locale, options = {}) => d.toLocaleDateString(locale, options)
+export const convertIsoWeekToDate = isoWeek => {
+  const [year, week] = isoWeek.split(/w/i)
+  // Get date for 4th of January for year
+  const date = new Date(Number(year), 0, 4)
+  // Get previous Monday, add 7 days for each week after first
+  date.setDate(
+    // eslint-disable-next-line no-mixed-operators
+    date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7
+  )
+  return date
+}
+
+export const convertToDateObject = (date, selectionType) => {
+  if (date instanceof Date) {
+    return date
+  }
+
+  if (selectionType === 'week') {
+    return convertIsoWeekToDate(date)
+  }
 
-export const convertToLocalTime = (d, locale, options = {}) => d.toLocaleTimeString(locale, options)
+  return new Date(date)
+}
+
+export const convertToLocalDate = (d, locale, options = {}) =>
+  d.toLocaleDateString(locale, options)
+
+export const convertToLocalTime = (d, locale, options = {}) =>
+  d.toLocaleTimeString(locale, options)
 
 export const createGroupsInArray = (arr, numberOfGroups) => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
-  // eslint-disable-next-line unicorn/no-new-array
-  return new Array(numberOfGroups)
-        .fill('')
-        .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
+  return Array.from({ length: numberOfGroups })
+    .fill('')
+    .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
 }
 
 export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
-export const getLocalDateFromString = (string, locale, time) => {
-  const date = new Date(2013, 11, 31, 17, 19, 22)
-  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
-  regex = regex
-        .replace('2013', '(?<year>[0-9]{2,4})')
-        .replace('12', '(?<month>[0-9]{1,2})')
-        .replace('31', '(?<day>[0-9]{1,2})')
-  if (time) {
-    regex = regex
-            .replace('5', '(?<hour>[0-9]{1,2})')
-            .replace('17', '(?<hour>[0-9]{1,2})')
-            .replace('19', '(?<minute>[0-9]{1,2})')
-            .replace('22', '(?<second>[0-9]{1,2})')
-            .replace('PM', '(?<ampm>[A-Z]{2})')
+export const getDateBySelectionType = (date, selectionType) => {
+  if (date === null) {
+    return null
   }
 
-  const rgx = new RegExp(`${regex}`)
-  const partials = string.match(rgx)
-  if (partials === null) {
-    return
+  if (selectionType === 'week') {
+    return `${date.getFullYear()}W${getWeekNumber(date)}`
   }
 
-  const newDate = partials.groups &&
-        (time ?
-          new Date(Number(partials.groups.year, 10), Number(partials.groups.month, 10) - 1, Number(partials.groups.day), partials.groups.ampm ?
-            (partials.groups.ampm === 'PM' ?
-              Number(partials.groups.hour) + 12 :
-              Number(partials.groups.hour)) :
-            Number(partials.groups.hour), Number(partials.groups.minute), Number(partials.groups.second)) :
-          new Date(Number(partials.groups.year), Number(partials.groups.month) - 1, Number(partials.groups.day)))
-  return newDate
+  if (selectionType === 'month') {
+    const monthNumber = `0${date.getMonth() + 1}`.slice(-2)
+    return `${date.getFullYear()}-${monthNumber}`
+  }
+
+  if (selectionType === 'year') {
+    return `${date.getFullYear()}`
+  }
+
+  return date
 }
 
 export const getMonthName = (month, locale) => {
@@ -58,6 +71,7 @@ export const getMonthsNames = locale => {
   const months = []
   const d = new Date()
   d.setDate(1)
+
   for (let i = 0; i < 12; i++) {
     d.setMonth(i)
     months.push(d.toLocaleString(locale, { month: 'short' }))
@@ -84,6 +98,7 @@ const getLeadingDays = (year, month, firstDayOfWeek) => {
   const m = d.getMonth()
   const firstWeekday = new Date(y, m, 1).getDay()
   let leadingDays = 6 - (6 - firstWeekday) - firstDayOfWeek
+
   if (firstDayOfWeek) {
     leadingDays = leadingDays < 0 ? 7 + leadingDays : leadingDays
   }
@@ -125,16 +140,67 @@ const getTrailingDays = (year, month, leadingDays, monthDays) => {
 }
 
 export const getDayNumber = date =>
-  Math.ceil((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
+  Math.ceil((Number(date) - Number(new Date(date.getFullYear(), 0, 0))) / 1000 / 60 / 60 / 24)
 
-export const getWeekNumber = date => Math.ceil(getDayNumber(date) / 7)
+export const getLocalDateFromString = (string, locale, time) => {
+  const date = new Date(2013, 11, 31, 17, 19, 22)
+  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+  regex = regex
+        .replace('2013', '(?<year>[0-9]{2,4})')
+        .replace('12', '(?<month>[0-9]{1,2})')
+        .replace('31', '(?<day>[0-9]{1,2})')
+  if (time) {
+    regex = regex
+            .replace('5', '(?<hour>[0-9]{1,2})')
+            .replace('17', '(?<hour>[0-9]{1,2})')
+            .replace('19', '(?<minute>[0-9]{1,2})')
+            .replace('22', '(?<second>[0-9]{1,2})')
+            .replace('PM', '(?<ampm>[A-Z]{2})')
+  }
+
+  const rgx = new RegExp(`${regex}`)
+  const partials = string.match(rgx)
+  if (partials === null) {
+    return
+  }
+
+  const newDate = partials.groups &&
+        (time ?
+          new Date(Number(partials.groups.year, 10), Number(partials.groups.month, 10) - 1, Number(partials.groups.day), partials.groups.ampm ?
+            (partials.groups.ampm === 'PM' ?
+              Number(partials.groups.hour) + 12 :
+              Number(partials.groups.hour)) :
+            Number(partials.groups.hour), Number(partials.groups.minute), Number(partials.groups.second)) :
+          new Date(Number(partials.groups.year), Number(partials.groups.month) - 1, Number(partials.groups.day)))
+  return newDate
+}
+
+export const getWeekNumber = date => {
+  const week1 = new Date(date.getFullYear(), 0, 4)
+  return (
+    1 +
+    Math.round(
+      // eslint-disable-next-line no-mixed-operators
+      ((date.getTime() - week1.getTime()) / 86400000 -
+        3 +
+        ((week1.getDay() + 6) % 7)) /
+        7
+    )
+  )
+}
 
 export const getMonthDetails = (year, month, firstDayOfWeek) => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
-  const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
+  const daysNextMonth = getTrailingDays(
+    year,
+    month,
+    daysPrevMonth,
+    daysThisMonth
+  )
   const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
   const weeks = []
+
   for (const [index, day] of days.entries()) {
     if (index % 7 === 0 || weeks.length === 0) {
       weeks.push({
@@ -143,7 +209,7 @@ export const getMonthDetails = (year, month, firstDayOfWeek) => {
     }
 
     if ((index + 1) % 7 === 0) {
-      weeks[weeks.length - 1].weekNumber = Math.ceil(getDayNumber(day.date) / 7)
+      weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date)
     }
 
     weeks[weeks.length - 1].days.push(day)
@@ -156,6 +222,7 @@ export const isDisableDateInRange = (startDate, endDate, dates) => {
   if (startDate && endDate) {
     const date = new Date(startDate)
     let disabled = false
+
     // eslint-disable-next-line no-unmodified-loop-condition
     while (date < endDate) {
       date.setDate(date.getDate() + 1)
@@ -201,7 +268,9 @@ export const isDateInRange = (date, start, end) => {
 }
 
 export const isDateSelected = (date, start, end) => {
-  return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date))
+  return (
+    (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date))
+  )
 }
 
 export const isEndDate = (date, start, end) => {
@@ -211,15 +280,18 @@ export const isEndDate = (date, start, end) => {
 export const isLastDayOfMonth = date => {
   const test = new Date(date.getTime())
   const month = test.getMonth()
+
   test.setDate(test.getDate() + 1)
   return test.getMonth() !== month
 }
 
 export const isSameDateAs = (date, date2) => {
   if (date instanceof Date && date2 instanceof Date) {
-    return (date.getDate() === date2.getDate() &&
-            date.getMonth() === date2.getMonth() &&
-            date.getFullYear() === date2.getFullYear())
+    return (
+      date.getDate() === date2.getDate() &&
+      date.getMonth() === date2.getMonth() &&
+      date.getFullYear() === date2.getFullYear()
+    )
   }
 
   if (date === null && date2 === null) {
@@ -235,9 +307,11 @@ export const isStartDate = (date, start, end) => {
 
 export const isToday = date => {
   const today = new Date()
-  return (date.getDate() === today.getDate() &&
-        date.getMonth() === today.getMonth() &&
-        date.getFullYear() === today.getFullYear())
+  return (
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+  )
 }
 
 export const isValidDate = date => {