Merge branch 'master' into pr/3709

Author: martijnrusschen

CONTRIBUTING.md

@@ -24,7 +24,7 @@ Start reading our code, and you'll get the hang of it. We optimize for readabili
 
 Local development configuration is pretty snappy. Here's how to get set up:
 
-1. Install/use node >=11.10.1
+1. Install/use node >=16.0.0
 1. Run `yarn link` from project root
 1. Run `cd docs-site && yarn link react-datepicker`
 1. Run `yarn install` from project root

README.md

@@ -4,8 +4,6 @@
 [![Test suite](https://github.com/Hacker0x01/react-datepicker/actions/workflows/test.yml/badge.svg)](https://github.com/Hacker0x01/react-datepicker/actions/workflows/test.yml)
 [![codecov](https://codecov.io/gh/Hacker0x01/react-datepicker/branch/master/graph/badge.svg)](https://codecov.io/gh/Hacker0x01/react-datepicker)
 [![Downloads](https://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)
-[![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/Hacker0x01/react-datepicker.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/context:javascript)
-[![Total Alerts](https://img.shields.io/lgtm/alerts/g/Hacker0x01/react-datepicker.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/alerts)
 
 A simple and reusable Datepicker component for React ([Demo](https://reactdatepicker.com/))
 
@@ -39,7 +37,7 @@ import "react-datepicker/dist/react-datepicker.css";
 const Example = () => {
   const [startDate, setStartDate] = useState(new Date());
   return (
-    <DatePicker selected={startDate} onChange={(date:Date) => setStartDate(date)} />
+    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
   );
 };
 ```
@@ -170,4 +168,4 @@ The examples are hosted within the docs folder and are ran in the simple app tha
 
 ## License
 
-Copyright (c) 2014-2021 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
+Copyright (c) 2014-2023 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.

docs-site/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "highlight.js": "^11.5.1",
-    "react": "^18.1.0",
+    "highlight.js": "^11.7.0",
+    "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-live": "^2.4.1",
     "react-scripts": "4.0.3"
   },
@@ -32,7 +32,7 @@
     ]
   },
   "devDependencies": {
-    "sass": "^1.52.2",
+    "sass": "^1.57.1",
     "raw-loader": "^4.0.2"
   }
 }

docs-site/src/components/Examples/index.js

@@ -29,10 +29,12 @@ import LocaleWithTime from "../../examples/localeWithTime";
 import LocaleWithoutGlobalVariable from "../../examples/localeWithoutGlobalVariable";
 import ExcludeDates from "../../examples/excludeDates";
 import ExcludeDateIntervals from "../../examples/excludeDateIntervals";
+import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker";
 import HighlightDates from "../../examples/highlightDates";
 import HighlightDatesRanges from "../../examples/highlightDatesRanges";
 import IncludeDates from "../../examples/includeDates";
 import IncludeDateIntervals from "../../examples/includeDateIntervals";
+import IncludeDatesMonthPicker from "../../examples/includeDatesMonthPicker";
 import FilterDates from "../../examples/filterDates";
 import DateRange from "../../examples/dateRange";
 import DateRangeInputWithClearButton from "../../examples/dateRangeInputWithClearButton";
@@ -87,6 +89,7 @@ import CloseOnScrollCallback from "../../examples/closeOnScrollCallback";
 import SelectsRange from "../../examples/selectsRange";
 import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates";
 import CalendarStartDay from "../../examples/calendarStartDay";
+import ExternalForm from "../../examples/externalForm";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
@@ -230,6 +233,10 @@ export default class exampleComponents extends React.Component {
       title: "Exclude date intervals",
       component: ExcludeDateIntervals,
     },
+    {
+      title: "Exclude Months in Month Picker",
+      component: ExcludeDatesMonthPicker,
+    },
     {
       title: "Exclude Times",
       component: ExcludeTimes,
@@ -266,6 +273,10 @@ export default class exampleComponents extends React.Component {
       title: "Include date intervals",
       component: IncludeDateIntervals,
     },
+    {
+      title: "Include Months in Month Picker",
+      component: IncludeDatesMonthPicker,
+    },
     {
       title: "Include Times",
       component: IncludeTimes,
@@ -446,6 +457,10 @@ export default class exampleComponents extends React.Component {
       title: "Calendar Start day",
       component: CalendarStartDay,
     },
+    {
+      title: "External Form",
+      component: ExternalForm,
+    },
   ];
 
   handleAnchorClick = (e, id) => {

docs-site/src/examples/excludeDatesMonthPicker.js

@@ -0,0 +1,14 @@
+() => {
+  const [startDate, setStartDate] = useState(1659312000000);
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      excludeDates={[
+        1661990400000, 1664582400000, 1667260800000, 1672531200000,
+      ]}
+      showMonthYearPicker
+    />
+  );
+};

docs-site/src/examples/externalForm.js

@@ -0,0 +1,17 @@
+() => {
+  const [startDate, setStartDate] = useState(null);
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date) => setStartDate(date)}
+        required
+        form="external-form"
+      />
+      <form id="external-form">
+        <input type="submit" />
+      </form>
+    </>
+  );
+};

docs-site/src/examples/includeDatesMonthPicker.js

@@ -0,0 +1,14 @@
+() => {
+  const [startDate, setStartDate] = useState(1661990400000);
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      includeDates={[
+        1661990400000, 1664582400000, 1667260800000, 1672531200000,
+      ]}
+      showMonthYearPicker
+    />
+  );
+};