@acusti/date-picker 0.0.3 → 0.0.5

package/README.md

@@ -1,9 +1,9 @@
 # @acusti/date-picker
 
-[![latest version](https://img.shields.io/npm/v/@acusti/css-value-input?style=for-the-badge)](https://www.npmjs.com/package/@acusti/css-value-input)
-[![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/css-value-input?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fcss-value-input)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/css-value-input?style=for-the-badge)](https://bundlephobia.com/package/@acusti/css-value-input)
-[![downloads per month](https://img.shields.io/npm/dm/@acusti/css-value-input?style=for-the-badge)](https://www.npmjs.com/package/@acusti/css-value-input)
+[![latest version](https://img.shields.io/npm/v/@acusti/date-picker?style=for-the-badge)](https://www.npmjs.com/package/@acusti/date-picker)
+[![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/date-picker?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fdate-picker)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/date-picker?style=for-the-badge)](https://bundlephobia.com/package/@acusti/date-picker)
+[![downloads per month](https://img.shields.io/npm/dm/@acusti/date-picker?style=for-the-badge)](https://www.npmjs.com/package/@acusti/date-picker)
 
 A group of React components and utils for rendering a date picker with
 support for ranges via a two-up month calendar view.

package/dist/DatePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type Props = {
+    className?: string;
+    dateEnd?: Date | string | number;
+    dateStart?: Date | string | number;
+    initialMonth?: number;
+    isTwoUp?: boolean;
+    monthLimitFirst?: number;
+    monthLimitLast?: number;
+    useMonthAbbreviations?: boolean;
+};
+export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, useMonthAbbreviations, }: Props): JSX.Element;

package/dist/DatePicker.js

@@ -0,0 +1,53 @@
+import { Style } from '@acusti/styling';
+import clsx from 'clsx';
+import * as React from 'react';
+import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
+import MonthCalendar from './MonthCalendar.js';
+const { Fragment, useCallback, useState } = React;
+const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, useMonthAbbreviations, }) {
+    if (initialMonth == null) {
+        // Use dateStart if it’s set
+        const initialDate = dateStart == null ? new Date() : new Date(dateStart);
+        initialMonth = getMonthFromDate(initialDate);
+        if (isTwoUp && dateStart == null) {
+            initialMonth -= 1;
+        }
+    }
+    const [month, setMonth] = useState(initialMonth);
+    // In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
+    if (isTwoUp && monthLimitLast != null) {
+        monthLimitLast -= 1;
+    }
+    const handleClickLeftArrow = useCallback(() => {
+        setMonth((existingMonth) => monthLimitFirst == null || existingMonth > monthLimitFirst
+            ? existingMonth - 1
+            : existingMonth);
+    }, [monthLimitFirst]);
+    const handleClickRightArrow = useCallback(() => {
+        setMonth((existingMonth) => monthLimitLast == null || existingMonth < monthLimitLast
+            ? existingMonth + 1
+            : existingMonth);
+    }, [monthLimitLast]);
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, null, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className, {
+                'two-up': isTwoUp,
+            }) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-range-arrow-wrap` },
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+                        disabled: monthLimitFirst != null && month <= monthLimitFirst,
+                    }), onClick: handleClickLeftArrow }),
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+                        disabled: monthLimitLast != null && month >= monthLimitLast,
+                    }), onClick: handleClickRightArrow })),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-container` },
+                React.createElement(MonthCalendar, { dateEnd: dateEnd, dateStart: dateStart, month: month, title: useMonthAbbreviations
+                        ? getAbbreviatedMonthTitle(month)
+                        : undefined }),
+                isTwoUp ? (React.createElement(MonthCalendar, { dateEnd: dateEnd, dateStart: dateStart, month: month + 1, title: useMonthAbbreviations
+                        ? getAbbreviatedMonthTitle(month + 1)
+                        : undefined })) : null))));
+}
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for DatePicker
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */
+
+export type Props = {|
+  className?: string,
+  dateEnd?: Date | string | number,
+  dateStart?: Date | string | number,
+  initialMonth?: number,
+  isTwoUp?: boolean,
+  monthLimitFirst?: number,
+  monthLimitLast?: number,
+  useMonthAbbreviations?: boolean,
+|};
+declare export default function DatePicker(x: Props): React$Node;

package/dist/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/MonthCalendar.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 export type Props = {
     className?: string;
+    dateStart?: Date | string | number;
+    dateEnd?: Date | string | number;
     month: number;
     onChange?: (event: React.SyntheticEvent<HTMLElement>) => void;
     title?: string;
 };
-export default function MonthCalendar({ className, month, onChange, title }: Props): JSX.Element;
+export default function MonthCalendar({ className, dateEnd, dateStart, month, onChange, title, }: Props): JSX.Element;

package/dist/MonthCalendar.js

@@ -1,11 +1,11 @@
 import { Style } from '@acusti/styling';
 import clsx from 'clsx';
 import * as React from 'react';
-import { getMonthNameFromMonth, getYearFromMonth } from './utils.js';
+import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
 import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
 const { Fragment, useCallback } = React;
 const DAYS = Array(7).fill(null);
-export default function MonthCalendar({ className, month, onChange, title }) {
+export default function MonthCalendar({ className, dateEnd, dateStart, month, onChange, title, }) {
     const year = getYearFromMonth(month);
     title = title || `${getMonthNameFromMonth(month)} ${year}`;
     const monthWithinYear = month % 12;
@@ -17,6 +17,33 @@ export default function MonthCalendar({ className, month, onChange, title }) {
     const firstDay = firstDate.getDay();
     const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
     const daySpaces = totalDays + firstDay + spacesAfterLastDay;
+    const [dateRangeStartDay, dateRangeEndDay] = [
+        dateStart,
+        dateEnd,
+    ].reduce((acc, date, index) => {
+        if (date != null && !(date instanceof Date)) {
+            date = new Date(date);
+        }
+        if (date == null || Number.isNaN(date.getTime()))
+            return acc;
+        const dateMonth = getMonthFromDate(date);
+        if (dateMonth < month)
+            acc[index] = -1;
+        else if (dateMonth > month)
+            acc[index] = totalDays + 1;
+        else
+            acc[index] = date.getDate();
+        if (index === 1) {
+            const startDay = acc[index - 1];
+            const endDay = acc[index];
+            // Ensure that end date is after start date and swap them if not
+            if (startDay != null && endDay != null && startDay > endDay) {
+                acc[index - 1] = endDay;
+                acc[index] = startDay;
+            }
+        }
+        return acc;
+    }, [null, null]);
     const handleClickDay = useCallback((event) => {
         if (onChange)
             onChange(event);
@@ -41,15 +68,26 @@ export default function MonthCalendar({ className, month, onChange, title }) {
                     React.createElement("span", { className: "week-day-item-text" }, "Fr")),
                 React.createElement("div", { className: "week-day-item" },
                     React.createElement("span", { className: "week-day-item-text" }, "Sa"))),
-            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.ceil(daySpaces / 7))
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.floor(daySpaces / 7))
                 .fill(null)
                 .map((_, weekIndex) => (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-row`, key: `MonthRow-${weekIndex}` }, DAYS.map((_, dayIndex) => {
                 dayIndex += weekIndex * 7;
                 const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
-                return (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-day-item`, key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay },
-                    React.createElement("span", { className: "month-day-item-text" }, dayNumber < 1 || dayNumber > totalDays
-                        ? ''
-                        : dayNumber)));
+                const isEmpty = dayNumber < 1 || dayNumber > totalDays;
+                const isAfterDateRangeStart = dateRangeStartDay != null &&
+                    dayNumber > dateRangeStartDay;
+                const isBeforeDateRangeEnd = dateRangeEndDay != null &&
+                    dayNumber < dateRangeEndDay;
+                return (React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-month-day-item`, {
+                        'is-empty': isEmpty,
+                        'is-selected': !isEmpty &&
+                            isAfterDateRangeStart &&
+                            isBeforeDateRangeEnd,
+                        'end-date': !isEmpty &&
+                            dayNumber === dateRangeEndDay,
+                        'start-date': !isEmpty &&
+                            dayNumber === dateRangeStartDay,
+                    }), key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
             }))))))));
 }
 //# sourceMappingURL=MonthCalendar.js.map

package/dist/MonthCalendar.js.flow

@@ -8,6 +8,8 @@
 import * as React from "react";
 export type Props = {|
   className?: string,
+  dateStart?: Date | string | number,
+  dateEnd?: Date | string | number,
   month: number,
   onChange?: (event: SyntheticEvent<HTMLElement>) => void,
   title?: string,

package/dist/MonthCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}

package/dist/styles/date-picker.d.ts

@@ -0,0 +1,2 @@
+export declare const ROOT_CLASS_NAME = "uktdatepicker";
+export declare const STYLES: string;

package/dist/styles/date-picker.js

@@ -0,0 +1,62 @@
+export const ROOT_CLASS_NAME = 'uktdatepicker';
+export const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    box-sizing: border-box;
+    padding: 40px 60px 60px;
+    flex: 1 1 auto;
+    position: relative;
+    max-width: 450px;
+}
+
+.${ROOT_CLASS_NAME}.two-up {
+    max-width: 820px;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow-wrap {
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    height: 0px;
+    width: 100%;
+    padding: 0px 60px;
+    box-sizing: border-box;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow:active {
+    transform: translateY(1px);
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.left-arrow:after,
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "‹";
+    font-size: 24px;
+    line-height: 35px;
+    font-weight: bold;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "›";
+}
+
+.${ROOT_CLASS_NAME}-month-container {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+}
+`;
+//# sourceMappingURL=date-picker.js.map

package/dist/styles/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;;GASf,eAAe;;;;GAIf,eAAe;;;;;;;;;;;;GAYf,eAAe;;;;;;;GAOf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;GACf,eAAe;;;;;;;GAOf,eAAe;;;;GAIf,eAAe;;;;;CAKjB,CAAC"}

package/dist/styles/month-calendar.js

@@ -76,7 +76,7 @@ h3.${ROOT_CLASS_NAME}-month-title-text {
     cursor: pointer;
 }
 
-.${ROOT_CLASS_NAME}-month-day-item.selected {
+.${ROOT_CLASS_NAME}-month-day-item.is-selected {
     background-color: #f8f8f8;
 }
 
@@ -131,6 +131,10 @@ h3.${ROOT_CLASS_NAME}-month-title-text {
     visibility: hidden;
 }
 
+.${ROOT_CLASS_NAME}-month-day-item.is-empty:after {
+    content: none;
+}
+
 .${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
     text-align: center;
     font-size: 13px;

package/dist/styles/month-calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;GAQf,eAAe;;;;;;;;;KASb,eAAe;;;;;;;;;GASjB,eAAe;;;;;;;;;;GAUf,eAAe;;;;;;;GAOf,eAAe;;;;;;;;GAQf,eAAe;;;;;;GAMf,eAAe;;;;;;;;;GASf,eAAe;;;;;;;;;;GAUf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;;;;;;CASjB,CAAC"}
+{"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;GAQf,eAAe;;;;;;;;;KASb,eAAe;;;;;;;;;GASjB,eAAe;;;;;;;;;;GAUf,eAAe;;;;;;;GAOf,eAAe;;;;;;;;GAQf,eAAe;;;;;;GAMf,eAAe;;;;;;;;;GASf,eAAe;;;;;;;;;;GAUf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;GAIf,eAAe;;;;;;;;;CASjB,CAAC"}

package/dist/utils.js

@@ -18,7 +18,14 @@ const MONTH_NAMES = [
 const getYearFromDate = (date) => date.getFullYear() - START_YEAR;
 export const getMonthFromDate = (date) => date.getMonth() + (getYearFromDate(date) * 12); // prettier-ignore
 export const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
-export const getMonthNameFromMonth = (month) => MONTH_NAMES[month % 12];
+export const getMonthNameFromMonth = (month) => {
+    let index = month % 12;
+    if (Number.isNaN(index))
+        return '';
+    if (index < 0)
+        index = 12 + index;
+    return MONTH_NAMES[index];
+};
 export const getMonthAbbreviationFromMonth = (month) => {
     const monthName = getMonthNameFromMonth(month);
     if (monthName === 'September')

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE,CAC3C,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,kBAAkB;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;AAEhF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE,CAC3C,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,kBAAkB;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3D,IAAI,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACvB,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/date-picker",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "React component that renders a date picker with the option to choose a range",
     "keywords": [
         "react",

package/src/DatePicker.tsx

@@ -0,0 +1,119 @@
+import { Style } from '@acusti/styling';
+import clsx from 'clsx';
+import * as React from 'react';
+
+import {
+    getMonthAbbreviationFromMonth,
+    getMonthFromDate,
+    getYearFromMonth,
+} from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
+
+import MonthCalendar from './MonthCalendar.js';
+
+export type Props = {
+    className?: string;
+    dateEnd?: Date | string | number;
+    dateStart?: Date | string | number;
+    initialMonth?: number;
+    isTwoUp?: boolean;
+    monthLimitFirst?: number;
+    monthLimitLast?: number;
+    useMonthAbbreviations?: boolean;
+};
+
+const { Fragment, useCallback, useState } = React;
+
+const getAbbreviatedMonthTitle = (month: number) =>
+    `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+
+export default function DatePicker({
+    className,
+    dateEnd,
+    dateStart,
+    isTwoUp,
+    initialMonth,
+    monthLimitFirst,
+    monthLimitLast,
+    useMonthAbbreviations,
+}: Props) {
+    if (initialMonth == null) {
+        // Use dateStart if it’s set
+        const initialDate = dateStart == null ? new Date() : new Date(dateStart);
+        initialMonth = getMonthFromDate(initialDate);
+        if (isTwoUp && dateStart == null) {
+            initialMonth -= 1;
+        }
+    }
+    const [month, setMonth] = useState(initialMonth);
+    // In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
+    if (isTwoUp && monthLimitLast != null) {
+        monthLimitLast -= 1;
+    }
+
+    const handleClickLeftArrow = useCallback(() => {
+        setMonth((existingMonth) =>
+            monthLimitFirst == null || existingMonth > monthLimitFirst
+                ? existingMonth - 1
+                : existingMonth,
+        );
+    }, [monthLimitFirst]);
+
+    const handleClickRightArrow = useCallback(() => {
+        setMonth((existingMonth) =>
+            monthLimitLast == null || existingMonth < monthLimitLast
+                ? existingMonth + 1
+                : existingMonth,
+        );
+    }, [monthLimitLast]);
+
+    return (
+        <Fragment>
+            <Style>{STYLES}</Style>
+            <div
+                className={clsx(ROOT_CLASS_NAME, className, {
+                    'two-up': isTwoUp,
+                })}
+            >
+                <div className={`${ROOT_CLASS_NAME}-range-arrow-wrap`}>
+                    <div
+                        className={clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+                            disabled: monthLimitFirst != null && month <= monthLimitFirst,
+                        })}
+                        onClick={handleClickLeftArrow}
+                    />
+                    <div
+                        className={clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+                            disabled: monthLimitLast != null && month >= monthLimitLast,
+                        })}
+                        onClick={handleClickRightArrow}
+                    />
+                </div>
+                <div className={`${ROOT_CLASS_NAME}-month-container`}>
+                    <MonthCalendar
+                        dateEnd={dateEnd}
+                        dateStart={dateStart}
+                        month={month}
+                        title={
+                            useMonthAbbreviations
+                                ? getAbbreviatedMonthTitle(month)
+                                : undefined
+                        }
+                    />
+                    {isTwoUp ? (
+                        <MonthCalendar
+                            dateEnd={dateEnd}
+                            dateStart={dateStart}
+                            month={month + 1}
+                            title={
+                                useMonthAbbreviations
+                                    ? getAbbreviatedMonthTitle(month + 1)
+                                    : undefined
+                            }
+                        />
+                    ) : null}
+                </div>
+            </div>
+        </Fragment>
+    );
+}

package/src/MonthCalendar.tsx

@@ -2,21 +2,32 @@ import { Style } from '@acusti/styling';
 import clsx from 'clsx';
 import * as React from 'react';
 
-import { getMonthNameFromMonth, getYearFromMonth } from './utils.js';
+import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
 import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
 
 export type Props = {
     className?: string;
+    dateStart?: Date | string | number;
+    dateEnd?: Date | string | number;
     month: number; // a unique numerical value representing the number of months since jan 1970
     onChange?: (event: React.SyntheticEvent<HTMLElement>) => void;
     title?: string;
 };
 
+type DateRangeDays = [number | null, number | null];
+
 const { Fragment, useCallback } = React;
 
 const DAYS = Array(7).fill(null);
 
-export default function MonthCalendar({ className, month, onChange, title }: Props) {
+export default function MonthCalendar({
+    className,
+    dateEnd,
+    dateStart,
+    month,
+    onChange,
+    title,
+}: Props) {
     const year = getYearFromMonth(month);
     title = title || `${getMonthNameFromMonth(month)} ${year}`;
     const monthWithinYear = month % 12;
@@ -29,6 +40,35 @@ export default function MonthCalendar({ className, month, onChange, title }: Pro
     const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
     const daySpaces = totalDays + firstDay + spacesAfterLastDay;
 
+    const [dateRangeStartDay, dateRangeEndDay]: DateRangeDays = [
+        dateStart,
+        dateEnd,
+    ].reduce(
+        (acc: DateRangeDays, date, index) => {
+            if (date != null && !(date instanceof Date)) {
+                date = new Date(date);
+            }
+            if (date == null || Number.isNaN(date.getTime())) return acc;
+
+            const dateMonth = getMonthFromDate(date);
+            if (dateMonth < month) acc[index] = -1;
+            else if (dateMonth > month) acc[index] = totalDays + 1;
+            else acc[index] = date.getDate();
+            if (index === 1) {
+                const startDay = acc[index - 1];
+                const endDay = acc[index];
+                // Ensure that end date is after start date and swap them if not
+                if (startDay != null && endDay != null && startDay > endDay) {
+                    acc[index - 1] = endDay;
+                    acc[index] = startDay;
+                }
+            }
+
+            return acc;
+        },
+        [null, null],
+    );
+
     const handleClickDay = useCallback(
         (event: React.SyntheticEvent<HTMLElement>) => {
             if (onChange) onChange(event);
@@ -67,7 +107,7 @@ export default function MonthCalendar({ className, month, onChange, title }: Pro
                     </div>
                 </div>
                 <div className={`${ROOT_CLASS_NAME}-month-days`}>
-                    {Array(Math.ceil(daySpaces / 7))
+                    {Array(Math.floor(daySpaces / 7))
                         .fill(null)
                         .map((_, weekIndex) => (
                             <div
@@ -77,17 +117,41 @@ export default function MonthCalendar({ className, month, onChange, title }: Pro
                                 {DAYS.map((_, dayIndex) => {
                                     dayIndex += weekIndex * 7;
                                     const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
+                                    const isEmpty =
+                                        dayNumber < 1 || dayNumber > totalDays;
+                                    const isAfterDateRangeStart =
+                                        dateRangeStartDay != null &&
+                                        dayNumber > dateRangeStartDay;
+                                    const isBeforeDateRangeEnd =
+                                        dateRangeEndDay != null &&
+                                        dayNumber < dateRangeEndDay;
+
                                     return (
                                         <div
-                                            className={`${ROOT_CLASS_NAME}-month-day-item`}
+                                            className={clsx(
+                                                `${ROOT_CLASS_NAME}-month-day-item`,
+                                                {
+                                                    'is-empty': isEmpty,
+                                                    'is-selected':
+                                                        !isEmpty &&
+                                                        isAfterDateRangeStart &&
+                                                        isBeforeDateRangeEnd,
+                                                    'end-date':
+                                                        !isEmpty &&
+                                                        dayNumber === dateRangeEndDay,
+                                                    'start-date':
+                                                        !isEmpty &&
+                                                        dayNumber === dateRangeStartDay,
+                                                },
+                                            )}
                                             key={`MonthDayItem-${dayNumber}`}
                                             onClick={handleClickDay}
                                         >
-                                            <span className="month-day-item-text">
-                                                {dayNumber < 1 || dayNumber > totalDays
-                                                    ? ''
-                                                    : dayNumber}
-                                            </span>
+                                            {isEmpty ? null : (
+                                                <span className="month-day-item-text">
+                                                    {dayNumber}
+                                                </span>
+                                            )}
                                         </div>
                                     );
                                 })}

package/src/styles/date-picker.ts

@@ -0,0 +1,62 @@
+export const ROOT_CLASS_NAME = 'uktdatepicker';
+
+export const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    box-sizing: border-box;
+    padding: 40px 60px 60px;
+    flex: 1 1 auto;
+    position: relative;
+    max-width: 450px;
+}
+
+.${ROOT_CLASS_NAME}.two-up {
+    max-width: 820px;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow-wrap {
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    display: flex;
+    justify-content: space-between;
+    height: 0px;
+    width: 100%;
+    padding: 0px 60px;
+    box-sizing: border-box;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow:active {
+    transform: translateY(1px);
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.left-arrow:after,
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "‹";
+    font-size: 24px;
+    line-height: 35px;
+    font-weight: bold;
+}
+
+.${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
+    content: "›";
+}
+
+.${ROOT_CLASS_NAME}-month-container {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+}
+`;

package/src/styles/month-calendar.ts

@@ -77,7 +77,7 @@ h3.${ROOT_CLASS_NAME}-month-title-text {
     cursor: pointer;
 }
 
-.${ROOT_CLASS_NAME}-month-day-item.selected {
+.${ROOT_CLASS_NAME}-month-day-item.is-selected {
     background-color: #f8f8f8;
 }
 
@@ -132,6 +132,10 @@ h3.${ROOT_CLASS_NAME}-month-title-text {
     visibility: hidden;
 }
 
+.${ROOT_CLASS_NAME}-month-day-item.is-empty:after {
+    content: none;
+}
+
 .${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
     text-align: center;
     font-size: 13px;

package/src/utils.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { getMonthFromDate, getMonthNameFromMonth } from './utils.js';
+
+describe('@acusti/date-picker', () => {
+    describe('utils', () => {
+        describe('getMonthNameFromMonth', () => {
+            it('returns the correct month name for a post-unix epoch month', () => {
+                expect(
+                    getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19))),
+                ).toBe('June');
+            });
+
+            it('returns the correct month name for a pre-unix epoch month', () => {
+                expect(
+                    getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 19))),
+                ).toBe('June');
+            });
+
+            it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
+                expect(getMonthNameFromMonth(getMonthFromDate(new Date('')))).toBe('');
+            });
+        });
+    });
+});

package/src/utils.ts

@@ -23,7 +23,12 @@ export const getMonthFromDate = (date: Date) =>
 
 export const getYearFromMonth = (month: number) => Math.floor(month / 12) + START_YEAR;
 
-export const getMonthNameFromMonth = (month: number) => MONTH_NAMES[month % 12];
+export const getMonthNameFromMonth = (month: number): string => {
+    let index = month % 12;
+    if (Number.isNaN(index)) return '';
+    if (index < 0) index = 12 + index;
+    return MONTH_NAMES[index];
+};
 
 export const getMonthAbbreviationFromMonth = (month: number) => {
     const monthName = getMonthNameFromMonth(month);