hernansartorio · kbanach · Nov 11, 2021 · Nov 11, 2021 · Nov 14, 2021
diff --git a/index.d.ts b/index.d.ts
@@ -26,6 +26,7 @@ declare module "react-nice-dates" {
     maximumDate?: Date;
     modifiers?: Modifiers;
     modifiersClassNames?: ModifiersClassNames;
+    monthFormat?: string;
     weekdayFormat?: string;
   }
 

diff --git a/src/Calendar.js b/src/Calendar.js
@@ -17,6 +17,7 @@ export default function Calendar({
   onMonthChange,
   onDayHover,
   onDayClick,
+  monthFormat,
   weekdayFormat,
   touchDragEnabled
 }) {
@@ -34,6 +35,7 @@ export default function Calendar({
         minimumDate={minimumDate}
         maximumDate={maximumDate}
         month={month}
+        monthFormat={monthFormat}
         onMonthChange={setMonth}
       />
 
@@ -63,6 +65,7 @@ Calendar.propTypes = {
   onMonthChange: func,
   onDayHover: func,
   onDayClick: func,
+  monthFormat: string,
   weekdayFormat: string,
   touchDragEnabled: bool
 }
diff --git a/src/CalendarNavigation.js b/src/CalendarNavigation.js
@@ -1,9 +1,16 @@
 import React from 'react'
-import { func, instanceOf, object } from 'prop-types'
+import { func, instanceOf, object, string } from 'prop-types'
 import classNames from 'classnames'
 import { addMonths, getYear, startOfMonth, subMonths, format, isSameMonth } from 'date-fns'
 
-export default function CalendarNavigation({ locale, month, minimumDate, maximumDate, onMonthChange }) {
+export default function CalendarNavigation({ 
+  locale, 
+  month, 
+  minimumDate, 
+  maximumDate, 
+  monthFormat: receivedMonthFormat, 
+  onMonthChange
+}) {
   const handlePrevious = event => {
     onMonthChange(startOfMonth(subMonths(month, 1)))
     event.preventDefault()
@@ -14,6 +21,8 @@ export default function CalendarNavigation({ locale, month, minimumDate, maximum
     event.preventDefault()
   }
 
+  const monthFormat = receivedMonthFormat || (getYear(month) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy');
+
   return (
     <div className='nice-dates-navigation'>
       <a
@@ -24,8 +33,8 @@ export default function CalendarNavigation({ locale, month, minimumDate, maximum
         onTouchEnd={handlePrevious}
       />
 
-      <span className='nice-dates-navigation_current'>
-        {format(month, getYear(month) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy', { locale })}
+      <span className="nice-dates-navigation_current">
+        {format(month, monthFormat, { locale })}
       </span>
 
       <a
@@ -44,5 +53,6 @@ CalendarNavigation.propTypes = {
   month: instanceOf(Date).isRequired,
   minimumDate: instanceOf(Date),
   maximumDate: instanceOf(Date),
+  monthFormat: string,
   onMonthChange: func.isRequired
 }
diff --git a/src/DatePicker.js b/src/DatePicker.js
@@ -16,6 +16,7 @@ export default function DatePicker({
   maximumDate,
   modifiers,
   modifiersClassNames,
+  monthFormat,
   weekdayFormat,
   touchDragEnabled
 }) {
@@ -76,6 +77,7 @@ export default function DatePicker({
           maximumDate={maximumDate}
           modifiers={modifiers}
           modifiersClassNames={modifiersClassNames}
+          monthFormat={monthFormat}
           weekdayFormat={weekdayFormat}
           touchDragEnabled={touchDragEnabled}
         />
@@ -94,6 +96,7 @@ DatePicker.propTypes = {
   maximumDate: instanceOf(Date),
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
+  monthFormat: string,
   weekdayFormat: string,
   touchDragEnabled: bool
 }

diff --git a/src/DatePickerCalendar.js b/src/DatePickerCalendar.js
@@ -15,6 +15,7 @@ export default function DatePickerCalendar({
   maximumDate,
   modifiers: receivedModifiers,
   modifiersClassNames,
+  monthFormat,
   weekdayFormat,
   touchDragEnabled
 }) {
@@ -36,6 +37,7 @@ export default function DatePickerCalendar({
       maximumDate={maximumDate}
       modifiers={modifiers}
       modifiersClassNames={modifiersClassNames}
+      monthFormat={monthFormat}
       weekdayFormat={weekdayFormat}
       touchDragEnabled={touchDragEnabled}
     />
@@ -52,6 +54,7 @@ DatePickerCalendar.propTypes = {
   maximumDate: instanceOf(Date),
   modifiers: objectOf(func),
   modifiersClassNames: objectOf(string),
+  monthFormat: string,
   weekdayFormat: string,
   touchDragEnabled: bool
 }
diff --git a/website/examples/FormatsExample.js b/website/examples/FormatsExample.js
@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { enUS } from 'date-fns/locale'
+import { DatePicker } from '../../src'
+import Example from './Example'
+
+const code = `
+import React, { useState } from 'react'
+import { enUS } from 'date-fns/locale'
+import { DatePicker } from 'react-nice-dates'
+import 'react-nice-dates/build/style.css'
+
+export default function LocalesExample() {
+  const [date, setDate] = useState()
+
+  return (
+    <div>
+      <p>Month format:</p>
+
+      <DatePicker date={date} onDateChange={setDate} locale={enUS} monthFormat='GGGG yyyy, MMMM'>
+        {({ inputProps, focused }) => (
+          <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} placeholder='GGGG yyyy, MMMM' />
+        )}
+      </DatePicker>
+
+      <p>Weekday format:</p>
+
+      <DatePicker date={date} onDateChange={setDate} locale={enUS} weekdayFormat="eeee">
+        {({ inputProps, focused }) => (
+          <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} placeholder='eeee' />
+        )}
+      </DatePicker>
+    </div>
+  )
+}
+`;
+
+export default function FormatsExample() {
+  const [date, setDate] = useState()
+
+  return (
+    <Example code={code}>
+      <p>Month format:</p>
+
+      <DatePicker date={date} onDateChange={setDate} locale={enUS} monthFormat='GGGG yyyy, MMMM'>
+        {({ inputProps, focused }) => (
+          <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} placeholder='GGGG yyyy, MMMM' />
+        )}
+      </DatePicker>
+
+      <br />
+
+      <p>Weekday format:</p>
+
+      <DatePicker date={date} onDateChange={setDate} locale={enUS} weekdayFormat="eeee">
+        {({ inputProps, focused }) => (
+          <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} placeholder='eeee' />
+        )}
+      </DatePicker>
+    </Example>
+  )
+}
diff --git a/website/examples/MonthReactElementExample.js b/website/examples/MonthReactElementExample.js
@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react'
+import { format, setYear, subDays, addYears } from 'date-fns'
+import { enUS } from 'date-fns/locale'
+import { DatePicker } from '../../src'
+import Example from './Example'
+
+const code = `
+import React, { useEffect, useState } from 'react'
+import { format, setYear, subDays, addYears } from 'date-fns'
+import { enUS } from 'date-fns/locale'
+import { DatePicker } from 'react-nice-dates'
+import 'react-nice-dates/build/style.css'
+
+export default function LocalesExample() {
+  const [date, setDate] = useState()
+
+  return (
+    <div>
+    <p>Month format as React component:</p>
+
+    <DatePicker date={date} onDateChange={setDate} locale={enUS} 
+      minimumDate={subDays(new Date(), 7)}
+      maximumDate={addYears(new Date(), 2)}
+      monthFormat={({ currentMonth, onMonthChange, minimumDate, maximumDate }) => {
+        const [selectedYear, setSelectedYear] = useState(format(currentMonth, 'y'));
+
+        useEffect(() => {
+          setSelectedYear(format(currentMonth, 'y'))
+        }, [currentMonth])
+
+        const handleInputBlur = () => {
+          if (selectedYear.match(/^\d{4}$/)) {
+            onMonthChange(setYear(currentMonth, selectedYear))
+          } else {
+            setSelectedYear(format(currentMonth, 'y'))
+          }
+        }
+
+        const handleInputChange = evt => {
+          if (evt.target.value.match(/^\d{4}$/)) {
+            onMonthChange(setYear(currentMonth, evt.target.value))
+          }
+          setSelectedYear(evt.target.value)
+        }
+
+        return  (
+          <>
+            {format(currentMonth, 'MMMM')}
+            {' '}
+            <input 
+              type='number'
+              value={selectedYear} 
+              onChange={handleInputChange}
+              onBlur={handleInputBlur}
+              size={8}
+            />
+
+            <br />
+
+            <sup>
+              {minimumDate && \`min date: \${format(minimumDate, 'yyyy/MM/dd', {locale: enUS})}\`}
+              {' '}
+              {maximumDate && \`max date: \${format(maximumDate,  'yyyy/MM/dd', {locale: enUS})}\`}
+            </sup>
+          </>
+          )
+      }}
+    >
+      {({ inputProps, focused }) => (
+        <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} placeholder='' />
+      )}
+    </DatePicker>
+    </div>
+  )
+}
+`;
+
+export default function MonthReactElementExample() {
+  const [date, setDate] = useState()
+
+  return (
+    <Example code={code}>
+      <p>Month format as React component:</p>
+
+      <DatePicker date={date} onDateChange={setDate} locale={enUS} 
+        minimumDate={subDays(new Date(), 7)}
+        maximumDate={addYears(new Date(), 2)}
+        monthFormat={({ currentMonth, onMonthChange, minimumDate, maximumDate }) => {
+          const [selectedYear, setSelectedYear] = useState(format(currentMonth, 'y'));
+
+          useEffect(() => {
+            setSelectedYear(format(currentMonth, 'y'))
+          }, [currentMonth])
+
+          const handleInputBlur = () => {
+            if (selectedYear.match(/^\d{4}$/)) {
+              onMonthChange(setYear(currentMonth, selectedYear))
+            } else {
+              setSelectedYear(format(currentMonth, 'y'))
+            }
+          }
+
+          const handleInputChange = evt => {
+            if (evt.target.value.match(/^\d{4}$/)) {
+              onMonthChange(setYear(currentMonth, evt.target.value))
+            }
+            setSelectedYear(evt.target.value)
+          }
+
+          return  (
+            <>
+              {format(currentMonth, 'MMMM')}
+              {' '}
+              <input 
+                type='number'
+                value={selectedYear} 
+                onChange={handleInputChange}
+                onBlur={handleInputBlur}
+                size={8}
+              />
+
+              <br />
+
+              <sup>
+                {minimumDate && `min date: ${format(minimumDate, 'yyyy/MM/dd', {locale: enUS})}`}
+                {' '}
+                {maximumDate && `max date: ${format(maximumDate,  'yyyy/MM/dd', {locale: enUS})}`}
+              </sup>
+            </>
+            )
+        }}
+      >
+        {({ inputProps, focused }) => (
+          <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} placeholder='' />
+        )}
+      </DatePicker>
+    </Example>
+  )
+}
diff --git a/website/index.js b/website/index.js
@@ -7,6 +7,7 @@ import DateRangePickerCalendarExample from './examples/DateRangePickerCalendarEx
 import StandaloneInputExample from './examples/StandaloneInputExample'
 import DatePickerCalendarWithInputExample from './examples/DatePickerCalendarWithInputExample'
 import ModifiersExample from './examples/ModifiersExample'
+import FormatsExample from './examples/FormatsExample'
 import LocalesExample from './examples/LocalesExample'
 import CalendarExample from './examples/CalendarExample'
 import CodeBlock from './CodeBlock'
@@ -140,11 +141,20 @@ function App() {
 
       <DatePickerWithTimeInputExample />
 
-      <h3>Localization</h3>
+      <h3>Dates format</h3>
 
       <p>
         As you might have noticed, React Nice Dates relies of the awesome <a href='https://date-fns.org/'>date-fns</a>{' '}
-        library as a peer dependency. All components require a <code>locale</code> prop, which must be a{' '}
+        library as a peer dependency. Thanks to it you can configure format of visible dates.
+      </p>
+
+      <FormatsExample />
+
+      <h3>Localization</h3>
+
+      <p>
+         As mentioned above, React Nice Dates is using under the hood <a href='https://date-fns.org/'>date-fns</a>.
+         All components require a <code>locale</code> prop, which must be a{' '}
         <a href='https://date-fns.org/v2.9.0/docs/I18n'>date-fns locale object</a> of your desired language.
       </p>
 
@@ -233,6 +243,7 @@ minimumDate: instanceOf(Date), // See Calendar props
 maximumDate: instanceOf(Date), // See Calendar props
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
+monthFormat: string, // See Calendar props
 weekdayFormat: string, // See Calendar props
 touchDragEnabled: bool // See Calendar props `}
       />
@@ -272,6 +283,7 @@ minimumLength: number, // See DateRangePickerCalendar props
 maximumLength: number, // See DateRangePickerCalendar props
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
+monthFormat: string, // See Calendar props
 weekdayFormat: string, // See Calendar props
 touchDragEnabled: bool // See Calendar props `}
       />
@@ -308,6 +320,7 @@ minimumDate: instanceOf(Date), // See Calendar props
 maximumDate: instanceOf(Date), // See Calendar props
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
+monthFormat: string, // See Calendar props
 weekdayFormat: string, // See Calendar props
 touchDragEnabled: bool // See Calendar props`}
       />
@@ -333,6 +346,7 @@ minimumLength: number, // Minimum range selection length, defaults to 0
 maximumLength: number, // Maximum range selection length, defaults to null
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
+monthFormat: string, // See Calendar props
 weekdayFormat: string, // See Calendar props
 touchDragEnabled: bool // See Calendar props `}
       />
@@ -349,6 +363,7 @@ maximumDate: instanceOf(Date), // Days after maximumDate will be disabled
 modifiers: objectOf(func),
 modifiersClassNames: objectOf(string),
 month: instanceOf(Date), // Optional: Turns current month into a controlled prop
+monthFormat: string, // Optional: allows month name to be dynamically formatted (ex. "GGGG yyyy, MMMM")
 onMonthChange: func, // Optional: Turns current month into a controlled prop
 onDayHover: func,
 onDayClick: func,