Merge pull request gpbl#518 from gpbl/momentless

Replace moment specifier with format/parse functions
kimamula · Nov 25, 2017 · b8cd0b7 · b8cd0b7
2 parents b241922 + 7b10dca
commit b8cd0b7
Show file tree

Hide file tree

Showing 23 changed files with 507 additions and 209 deletions.
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
@@ -44,6 +44,10 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
               __dirname,
               '../src/DayPickerInput.js'
             ),
+            'react-day-picker/moment$': path.resolve(
+              __dirname,
+              '../src/addons/MomentLocaleUtils.js'
+            ),
           },
         },
       });

diff --git a/docs/src/code-samples/examples/input-custom-overlay.js b/docs/src/code-samples/examples/input-custom-overlay.js
@@ -1,8 +1,5 @@
 import React from 'react';
-
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { LocaleUtils } from 'react-day-picker';
-
 import 'react-day-picker/lib/style.css';
 
 function CustomOverlay({ classNames, selectedDay, children }) {
@@ -23,7 +20,6 @@ function CustomOverlay({ classNames, selectedDay, children }) {
 export default function Example() {
   return (
     <DayPickerInput
-      placeholder="MM/DD/YYYY"
       overlayComponent={CustomOverlay}
       dayPickerProps={{
         todayButton: 'Today',

diff --git a/docs/src/code-samples/examples/input-from-to.js b/docs/src/code-samples/examples/input-from-to.js
@@ -5,6 +5,8 @@ import Helmet from 'react-helmet';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import 'react-day-picker/lib/style.css';
 
+import { formatDate, parseDate } from 'react-day-picker/moment';
+
 export default class Example extends React.Component {
   constructor(props) {
     super(props);
@@ -34,46 +36,44 @@ export default class Example extends React.Component {
   }
   handleFromChange(from) {
     // Change the from date and focus the "to" input field
-    this.setState({ from: from ? from.toDate() : undefined }, () => {
+    this.setState({ from }, () => {
       if (!this.state.to) {
         this.focusTo();
       }
     });
   }
-  handleToChange(day) {
-    const to = day ? day.toDate() : undefined;
+  handleToChange(to) {
     this.setState({ to }, this.showFromMonth);
   }
   render() {
-    const format = 'YYYY-MM-DD';
     const { from, to } = this.state;
-    const fromFormatted = from ? moment(from).format(format) : '';
-    const toFormatted = to ? moment(to).format(format) : '';
     const modifiers = { start: from, end: to };
     return (
       <div className="InputFromTo">
         <DayPickerInput
-          value={fromFormatted}
-          onDayChange={this.handleFromChange}
+          value={from}
           placeholder="From"
-          format={format}
+          format="LL"
+          formatDate={formatDate}
+          parseDate={parseDate}
           dayPickerProps={{
             selectedDays: [from, { from, to }],
             disabledDays: { after: to },
             toMonth: to,
             modifiers,
             numberOfMonths: 2,
           }}
+          onDayChange={this.handleFromChange}
         />{' '}
         —{' '}
         <span className="InputFromTo-to">
           <DayPickerInput
             ref={el => (this.to = el)}
-            value={toFormatted}
-            onDayChange={this.handleToChange}
+            value={to}
             placeholder="To"
-            format={format}
-            hideOnDayClick={false}
+            format="LL"
+            formatDate={formatDate}
+            parseDate={parseDate}
             dayPickerProps={{
               selectedDays: [from, { from, to }],
               disabledDays: { before: from },
@@ -82,6 +82,7 @@ export default class Example extends React.Component {
               fromMonth: from,
               numberOfMonths: 2,
             }}
+            onDayChange={this.handleToChange}
           />
         </span>
         <Helmet>
@@ -105,7 +106,7 @@ export default class Example extends React.Component {
     width: 550px;
   }
   .InputFromTo-to .DayPickerInput-Overlay {
-    margin-left: -198px;
+    margin-left: -224.5px;
   }
 `}</style>
         </Helmet>

diff --git a/docs/src/code-samples/examples/input-moment.js b/docs/src/code-samples/examples/input-moment.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import 'react-day-picker/lib/style.css';
+
+import MomentLocaleUtils, {
+  formatDate,
+  parseDate,
+} from 'react-day-picker/moment';
+
+import 'moment/locale/it';
+
+export default function Example() {
+  return (
+    <div>
+      <p>In English (default):</p>
+      <DayPickerInput
+        formatDate={formatDate}
+        parseDate={parseDate}
+        placeholder={`${formatDate(new Date())}`}
+      />
+      <p>
+        In Italian, using <code>{'format="LL"'}</code>:
+      </p>
+      <DayPickerInput
+        formatDate={formatDate}
+        parseDate={parseDate}
+        format="LL"
+        placeholder={`${formatDate(new Date(), 'LL', 'it')}`}
+        dayPickerProps={{
+          locale: 'it',
+          localeUtils: MomentLocaleUtils,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/code-samples/examples/input-state.js b/docs/src/code-samples/examples/input-state.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import 'react-day-picker/lib/style.css';
 
@@ -15,29 +14,25 @@ export default class Example extends React.Component {
   handleDayChange(selectedDay, modifiers) {
     this.setState({
       selectedDay,
-      isDisabled: modifiers.disabled,
+      isDisabled: modifiers.disabled === true,
     });
   }
   render() {
     const { selectedDay, isDisabled } = this.state;
-    const formattedDay = selectedDay
-      ? moment(selectedDay).format('DD/MM/YYYY')
-      : '';
     return (
       <div>
         <p>
           {!selectedDay && '🤔 Type or pick a valid day'}
           {selectedDay && isDisabled && '😡 This day is disabled'}
-          {selectedDay && !isDisabled && `😄 You chose ${formattedDay}`}
+          {selectedDay &&
+            !isDisabled &&
+            `😄 You chose ${selectedDay.toLocaleDateString()}`}
         </p>
         <DayPickerInput
-          value={formattedDay}
+          value={selectedDay}
           onDayChange={this.handleDayChange}
-          format="DD/MM/YYYY"
-          placeholder={`E.g. ${moment()
-            .locale('en')
-            .format('DD/MM/YYYY')}`}
           dayPickerProps={{
+            selectedDays: selectedDay,
             disabledDays: {
               daysOfWeek: [0, 6],
             },

diff --git a/docs/src/code-samples/examples/input.js b/docs/src/code-samples/examples/input.js
@@ -6,10 +6,7 @@ export default function Example() {
   return (
     <div>
       <p>Please type a day:</p>
-      <DayPickerInput
-        onDayChange={day => console.log(day)}
-        placeholder="MM/DD/YYYY"
-      />
+      <DayPickerInput onDayChange={day => console.log(day)} />
     </div>
   );
 }
diff --git a/docs/src/code-samples/input-01.js b/docs/src/code-samples/input-01.js
@@ -17,13 +17,9 @@ export default class MyForm extends React.Component {
     const { selectedDay } = this.state;
     return (
       <div>
-        <DayPickerInput
-          name="birthday"
-          placeholder="DD/MM/YYYY"
-          format="DD/MM/YYYY"
-          onDayChange={this.handleDayChange}
-        />
-        {selectedDay && <p>Selected: {<p>{selectedDay.format('LLL')}</p>}</p>}
+        {selectedDay && <p>Day: {selectedDay.toLocaleDateString()}</p>}
+        {!selectedDay && <p>Choose a day</p>}
+        <DayPickerInput onDayChange={this.handleDayChange} />
       </div>
     );
   }

diff --git a/docs/src/code-samples/input-02.js b/docs/src/code-samples/input-02.js
@@ -5,12 +5,10 @@ import 'react-day-picker/lib/style.css';
 export default function MyDatePicker() {
   return (
     <DayPickerInput
-      name="birthday"
-      placeholder="DD/MM/YYYY"
-      format="DD/MM/YYYY"
       dayPickerProps={{
         month: new Date(2018, 10),
         showWeekNumbers: true,
+        todayButton: 'Today',
       }}
     />
   );

diff --git a/docs/src/containers/DocPage.js b/docs/src/containers/DocPage.js
@@ -23,7 +23,7 @@ export default function DocPage({ title, children }) {
               <Menu.Item to="/docs/matching-days">Matching days</Menu.Item>
               <Menu.Item to="/docs/styling">Styling</Menu.Item>
               <Menu.Item to="/docs/localization">Localization</Menu.Item>
-              <Menu.Item to="/docs/input">Using the input field</Menu.Item>
+              <Menu.Item to="/docs/input">DayPickerInput</Menu.Item>
             </Menu>
             <Menu title="API">
               <Menu.Item to="/api/DayPicker">DayPicker</Menu.Item>

diff --git a/docs/src/containers/ExamplePage.js b/docs/src/containers/ExamplePage.js
@@ -89,6 +89,9 @@ export default function ExamplePage({ children, title }) {
               <Menu.Item to="/examples/input-custom-overlay">
                 Customize the overlay
               </Menu.Item>
+              <Menu.Item to="/examples/input-moment">
+                Using moment.js to parse and format dates
+              </Menu.Item>
               <Menu.Item to="/examples/input-from-to">
                 Range with two inputs
               </Menu.Item>

diff --git a/docs/src/pages/api/DayPickerInput.js b/docs/src/pages/api/DayPickerInput.js
@@ -18,11 +18,12 @@ export default () => (
       <a href="#clickUnselectsDay">clickUnselectsDay</a>,{' '}
       <a href="#component">component</a>,{' '}
       <a href="#dayPickerProps">dayPickerProps</a>, <a href="#format">format</a>,{' '}
+      <a href="#formatDate">formatDate</a>,{' '}
       <a href="#hideOnDayClick">hideOnDayClick</a>,{' '}
       <a href="#inputProps">inputProps</a>,{' '}
       <a href="#overlayComponent">overlayComponent</a>,{' '}
-      <a href="#placeholder">placeholder</a>,{' '}
-      <a href="#showOverlay">showOverlay</a>
+      <a href="#parseDate">parseDate</a>, <a href="#placeholder">placeholder</a>,{' '}
+      <a href="#showOverlay">showOverlay</a>, <a href="#value">value</a>
     </p>
     <h4>Event handlers</h4>
     <p>
@@ -108,15 +109,45 @@ function MyDayPickerInput(props) {
 
       <h3>
         <Anchor id="format" />
-        format <code>string | [string]</code>
+        format <code>string</code>
       </h3>
       <p>
-        The format strings used for parsing the date entered in the input field.
-        It accepts all the{' '}
-        <a href="https://momentjs.com/docs/#/displaying/format/">
-          format strings
+        The format strings used for formatting and parsing dates. It works with{' '}
+        <a href="#parseDate">
+          <code>parseDate</code>
         </a>{' '}
-        used by moment.js.
+        and{' '}
+        <a href="#formatDate">
+          <code>formatDate</code>
+        </a>
+      </p>
+
+      <h3>
+        <Anchor id="formatDate" />
+        formatDate{' '}
+        <code>(date: Date?, format: string?, locale: string?) ⇒ string</code>
+      </h3>
+      <p>
+        Date formatter used for displaying the selected date as value of the
+        input field. As default, it returns dates formatted as{' '}
+        <code>YYYY-M-D</code>.<br />
+        Arguments: <code>format</code> is the value coming from the{' '}
+        <a href="#format">
+          <code>format</code>
+        </a>{' '}
+        prop, while <code>locale</code> is from{' '}
+        <a href="#dayPickerProps">
+          <code>dayPickerProps</code>
+        </a>.<br />
+        See also{' '}
+        <a href="#parseDate">
+          <code>parseDate</code>
+        </a>.
+      </p>
+      <p>
+        If you are using <a href="http://momentjs.com/">moment.js</a> in your
+        app, we already provide this function as addon: see{' '}
+        <Link to="/examples/input-moment">this example</Link>.
       </p>
 
       <h3>
@@ -159,6 +190,34 @@ function MyDayPickerInput(props) {
       <p>
         See also <Link to="/examples/input-custom-overlay">this example</Link>.
       </p>
+
+      <h3>
+        <Anchor id="parseDate" />
+        parseDate{' '}
+        <code>(str: string?, format: string?, locale: string?) ⇒ string</code>
+      </h3>
+      <p>
+        Date parser used for parsing the string typed in the input field. As
+        default, it parses only dates formatted as <code>YYYY-M-D</code>.
+        <br />
+        Arguments: <code>format</code> is the value coming from the{' '}
+        <a href="#format">
+          <code>format</code>
+        </a>{' '}
+        prop, while <code>locale</code> is from{' '}
+        <a href="#dayPickerProps">
+          <code>dayPickerProps</code>
+        </a>.<br />See also{' '}
+        <a href="#formatDate">
+          <code>formatDate</code>
+        </a>.
+      </p>
+      <p>
+        If you are using <a href="http://momentjs.com/">moment.js</a> in your
+        app, we already provide this function as addon: see{' '}
+        <Link to="/examples/input-moment">this example</Link>.
+      </p>
+
       <h3>
         <Anchor id="placeholder" />
         placeholder <code>string</code>
@@ -174,6 +233,13 @@ function MyDayPickerInput(props) {
         Show the overlay during the initial rendering of the component. This is
         useful if you want to keep the overlay visibile while styling it.
       </p>
+      <h3>
+        <Anchor id="value" />
+        value <code>string | Date</code>
+      </h3>
+      <p>
+        The value of the <code>input</code> field.
+      </p>
 
       <hr />
       <h2>Event handlers</h2>

diff --git a/docs/src/pages/docs/getting-started.js b/docs/src/pages/docs/getting-started.js
@@ -37,14 +37,6 @@ export default () => (
 $ yarn add react-day-picker`}
     </CodeBlock>
 
-    <blockquote>
-      <p>
-        If you want to use the{' '}
-        <Link to="/api/DayPickerInput">DayPickerInput component</Link>, you must
-        install moment.js as well.
-      </p>
-    </blockquote>
-
     <p>Then import the component and its style into your component:</p>
 
     <CodeBlock>