Merge pull request #3896 from Sam-Apostel/master

Add prop `form` -  input form attribute

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

@@ -89,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";
@@ -456,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/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>
+    </>
+  );
+};

src/index.jsx

@@ -171,6 +171,7 @@ export default class DatePicker extends React.Component {
     ),
     filterDate: PropTypes.func,
     fixedHeight: PropTypes.bool,
+    form: PropTypes.string,
     formatWeekNumber: PropTypes.func,
     highlightDates: PropTypes.array,
     id: PropTypes.string,
@@ -1046,6 +1047,7 @@ export default class DatePicker extends React.Component {
       onKeyDown: this.onInputKeyDown,
       id: this.props.id,
       name: this.props.name,
+      form: this.props.form,
       autoFocus: this.props.autoFocus,
       placeholder: this.props.placeholderText,
       disabled: this.props.disabled,