Merge remote-tracking branch 'origin/master'

Author: onesine

CONTRIBUTING.md

@@ -0,0 +1,82 @@
+# Contributing
+
+Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to
+review this document **before submitting a pull request**.
+
+-   [Pull requests](#pull-requests)
+-   [Installation](#installation)
+-   [Coding standards](#coding-standards)
+-   [Running playground](#running-playgrounds)
+-   [Before you make a Pull Request](#before-you-make-a-pull-request)
+
+## Pull requests
+
+**Please ask first before starting work on any significant new features.**
+
+It's never a fun experience to have your pull request declined after investing a lot of time and
+effort into a new feature. To avoid this from happening, we request that contributors create
+[an issue](https://github.com/onesine/react-tailwindcss-datepicker/issues) to first discuss any
+significant new features.
+
+## Installation
+
+You only require a `yarn install` in the root directory to install everything you need.
+
+```sh
+yarn install
+```
+
+## Coding standards
+
+We use `prettier` for making sure that the codebase is formatted consistently. To automatically fix
+any style violations in your code, you can run:
+
+**Using yarn**
+
+```sh
+yarn pret:fix
+```
+
+**Using npm**
+
+```sh
+npm pret:fix
+```
+
+## Running playground
+
+We currently use `next.js` as server for live testing.
+
+You can run the `dev` script and open your browser to `http://localhost:8888`.
+
+See complete `props` usage in `pages/index.js` file.
+
+**Using yarn**
+
+```sh
+yarn dev
+```
+
+**Using npm**
+
+```sh
+npm dev
+```
+
+## Before you make a Pull Request
+
+We recommend to run these scripts in sequence before you make your commit message amd open a Pull
+Request
+
+**Let's clean the code first**
+
+```sh
+yarn pret:fix
+```
+
+**Test a build of your changes**
+
+```sh
+yarn build
+
+```

README.md

@@ -15,12 +15,13 @@
 </div>
 
 ## Contents
-* [Features](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#features)
-* [Documentation](https://react-tailwindcss-datepicker.vercel.app)
-* [Installation](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#installation)
-* [Simple Usage](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#simple-usage)
-* [Theming Options](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#theming-options)
-* [Playground](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#playground)
+* [Features](#features)
+* [Documentation](#documentation)
+* [Installation](#installation)
+* [Simple Usage](#simple-usage)
+* [Theming Options](#theming-options)
+* [Playground](#playground)
+* [Contributing](#contributing)
 
 ##  Features
 - ✅ Theming options
@@ -144,7 +145,11 @@ yarn install && yarn dev
 Open a browser and navigate to `http://localhost:8888`
 
 ## Contributing
-Got ideas on how to make this better? Open an issue!
+
+See [CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)
+
+## Official Documentation repo
+[https://github.com/onesine/react-tailwindcss-datepicker-doc](https://github.com/onesine/react-tailwindcss-datepicker-doc)
 
 ## Thanks to
 - [Litepie Datepicker](https://litepie.com/)

pages/index.js

@@ -21,13 +21,15 @@ export default function Playground() {
     const [disabled, setDisabled] = useState(false);
     const [inputClassName, setInputClassName] = useState("");
     const [containerClassName, setContainerClassName] = useState("");
+    const [toggleClassName, setToggleClassName] = useState("");
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
-    const [startFrom, setStartFrom] = useState("2023-01-02");
     const [minDate, setMinDate] = useState("");
     const [maxDate, setMaxDate] = useState("");
     const [disabledDates, setDisabledDates] = useState([]);
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
+    const [startFrom, setStartFrom] = useState("2023-03-01");
+    const [startWeekOn, setStartWeekOn] = useState("");
 
     return (
         <div className="px-4 py-8">
@@ -60,11 +62,13 @@ export default function Playground() {
                     disabled={disabled}
                     inputClassName={inputClassName}
                     containerClassName={containerClassName}
+                    toggleClassName={toggleClassName}
                     displayFormat={displayFormat}
                     readOnly={readOnly}
                     minDate={minDate}
                     maxDate={maxDate}
                     disabledDates={disabledDates}
+                    startWeekOn={startWeekOn}
                 />
             </div>
 
@@ -227,6 +231,19 @@ export default function Playground() {
                             }}
                         />
                     </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="maxDate">
+                            Maximum Date
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="maxDate"
+                            value={maxDate}
+                            onChange={e => {
+                                setMaxDate(e.target.value);
+                            }}
+                        />
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">
@@ -282,15 +299,28 @@ export default function Playground() {
                         />
                     </div>
                     <div className="mb-2">
-                        <label className="block" htmlFor="maxDate">
-                            Maximum Date
+                        <label className="block" htmlFor="containerClassName">
+                            Toggle Class
                         </label>
                         <input
                             className="rounded border px-4 py-2 w-full border-gray-200"
-                            id="maxDate"
-                            value={maxDate}
+                            id="toggleClassName"
+                            value={toggleClassName}
                             onChange={e => {
-                                setMaxDate(e.target.value);
+                                setToggleClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="startWeekOnClassName">
+                            Start Week On
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="startWeekOnClassName"
+                            value={startWeekOn}
+                            onChange={e => {
+                                setStartWeekOn(e.target.value);
                             }}
                         />
                     </div>

src/components/Calendar/Days.tsx

@@ -1,15 +1,9 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext } from "react";
 
-import { BG_COLOR } from "../../constants";
+import { BG_COLOR, TEXT_COLOR } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
-import {
-    formatDate,
-    getTextColorByPrimaryColor,
-    nextMonth,
-    previousMonth,
-    classNames as cn
-} from "../../helpers";
+import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
 
 const isBetween = require("dayjs/plugin/isBetween");
 dayjs.extend(isBetween);
@@ -53,7 +47,7 @@ const Days: React.FC<Props> = ({
                 item >= 10 ? item : "0" + item
             }`;
             if (formatDate(dayjs()) === formatDate(dayjs(itemDate)))
-                return getTextColorByPrimaryColor(primaryColor);
+                return TEXT_COLOR["500"][primaryColor as keyof (typeof TEXT_COLOR)["500"]];
             return "";
         },
         [calendarData.date, primaryColor]
@@ -210,7 +204,7 @@ const Days: React.FC<Props> = ({
                 day >= 10 ? day : "0" + day
             }`;
 
-            if (!disabledDates || disabledDates?.length <= 0) {
+            if (!disabledDates || (Array.isArray(disabledDates) && !disabledDates.length)) {
                 return false;
             }
 

src/components/Calendar/Week.tsx

@@ -1,20 +1,51 @@
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
 import React, { useContext } from "react";
 
 import DatepickerContext from "../../contexts/DatepickerContext";
 import { loadLanguageModule, shortString, ucFirst } from "../../helpers";
 
+dayjs.extend(weekday);
+
 const Week: React.FC = () => {
-    const { i18n } = useContext(DatepickerContext);
+    const { i18n, startWeekOn } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
+    let startDateModifier = dayjs().locale(i18n).weekday(0).get("day");
+    if (startWeekOn) {
+        switch (startWeekOn) {
+            case "mon":
+                startDateModifier = 1;
+                break;
+            case "tue":
+                startDateModifier = 2;
+                break;
+            case "wed":
+                startDateModifier = 3;
+                break;
+            case "thu":
+                startDateModifier = 4;
+                break;
+            case "fri":
+                startDateModifier = 5;
+                break;
+            case "sat":
+                startDateModifier = 6;
+                break;
+            case "sun":
+                startDateModifier = 0;
+                break;
+            default:
+                break;
+        }
+    }
 
     return (
         <div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
             {[0, 1, 2, 3, 4, 5, 6].map((item, index) => (
                 <div key={index} className="tracking-wide text-gray-500 text-center">
                     {ucFirst(
                         shortString(
-                            dayjs(`2022-11-${6 + item}`)
+                            dayjs(`2022-11-${6 + (item + startDateModifier)}`)
                                 .locale(i18n)
                                 .format("ddd")
                         )

src/components/Calendar/index.tsx

@@ -51,22 +51,22 @@ const Calendar: React.FC<Props> = ({
         changeDatepickerValue,
         hideDatepicker,
         asSingle,
-        i18n
+        i18n,
+        startWeekOn
     } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
 
     // States
     const [showMonths, setShowMonths] = useState(false);
     const [showYears, setShowYears] = useState(false);
     const [year, setYear] = useState(date.year());
-
     // Functions
     const previous = useCallback(() => {
         return getLastDaysInMonth(
             previousMonth(date),
-            getNumberOfDay(getFirstDayInMonth(date).ddd) - 1
+            getNumberOfDay(getFirstDayInMonth(date).ddd, i18n, startWeekOn)
         );
-    }, [date]);
+    }, [date, i18n, startWeekOn]);
 
     const current = useCallback(() => {
         return getDaysInMonth(formatDate(date));

src/components/Datepicker.tsx

@@ -40,12 +40,16 @@ interface Props {
     i18n?: string;
     disabled?: boolean;
     inputClassName?: string | null;
+    toggleClassName?: string | null;
+    inputId?: string;
+    inputName?: string;
     containerClassName?: string | null;
     displayFormat?: string;
     readOnly?: boolean;
     minDate?: DateType | null;
     maxDate?: DateType | null;
     disabledDates?: DateRangeType[] | null;
+    startWeekOn?: string | null;
 }
 
 const Datepicker: React.FC<Props> = ({
@@ -64,11 +68,15 @@ const Datepicker: React.FC<Props> = ({
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    toggleClassName = null,
     displayFormat = "YYYY-MM-DD",
     readOnly = false,
     minDate = null,
     maxDate = null,
-    disabledDates = null
+    disabledDates = null,
+    inputId,
+    inputName,
+    startWeekOn = "sun"
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -215,8 +223,8 @@ const Datepicker: React.FC<Props> = ({
                 validDate && (startDate.isSame(endDate) || startDate.isBefore(endDate));
             if (condition) {
                 setPeriod({
-                    start: formatDate(startDate, displayFormat),
-                    end: formatDate(endDate, displayFormat)
+                    start: formatDate(startDate),
+                    end: formatDate(endDate)
                 });
                 setInputText(
                     `${formatDate(startDate, displayFormat)}${
@@ -277,11 +285,15 @@ const Datepicker: React.FC<Props> = ({
             disabled,
             inputClassName,
             containerClassName,
+            toggleClassName,
             readOnly,
             displayFormat,
             minDate,
             maxDate,
-            disabledDates
+            disabledDates,
+            inputId,
+            inputName,
+            startWeekOn
         };
     }, [
         asSingle,
@@ -300,12 +312,16 @@ const Datepicker: React.FC<Props> = ({
         disabled,
         inputClassName,
         containerClassName,
+        toggleClassName,
         readOnly,
         displayFormat,
         firstGotoDate,
         minDate,
         maxDate,
-        disabledDates
+        disabledDates,
+        inputId,
+        inputName,
+        startWeekOn
     ]);
 
     return (