[Issue 25] Unopinionated month and year selection support #1106

GoGoCarl · 2018-04-06T22:17:12Z

After tracking #25, which has been plaguing many users, myself included, I hope to have implemented, minimally, a stopgap solution to allow users to traverse months and years on the calendar, based on the excellent work contributed by @jvanderz22.

From the comments in the issue, it seems that the major sticking point for the past few months has been around design/UX. For this proposed solution, there is no design required from the maintainers; the caller is 100% responsible for the rendering.

To achieve this, this PR adds a single prop, renderCaption, which is expected to be a function that receives a data object as a param and returns a renderable custom caption (i.e. string, number, node). The data object passed to renderCaption contains the following parameters:

month -- a moment object for the current month
onMonthSelect -- a callback function that takes two params
- month - the month moment object
- value - the integer value of the month to change to
onYearSelect -- a callback function that takes two params
- month - the month moment object
- value - the integer value of the year to change to

Here is some sample code of how this could work with simple select inputs (this sample is also available in the storybook in this PR):

    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div>
        <select
          value={month.month()}
          onChange={(e) => { onMonthSelect(month, e.target.value); }}
        >
          {moment.months().map((label, value) => (
            <option value={value}>{label}</option>
          ))}
        </select>
      </div>
      <div>
        <select
          value={month.year()}
          onChange={(e) => { onYearSelect(month, e.target.value); }}
        >
          <option value={moment().year() - 1}>Last year</option>
          <option value={moment().year()}>{moment().year()}</option>
          <option value={moment().year() + 1}>Next year</option>
        </select>
      </div>
    </div>

Even if there is a solution later to present a pre-designed interface for selecting months and years, it would still be nice to have something like renderCaption to allow users to provide their own custom implementation.

As of this writing, this PR passes all tests and is updated to version 16.5.0.

coveralls · 2018-04-06T22:22:49Z

Coverage decreased (-0.6%) to 84.785% when pulling 08c997c on GoGoCarl:month-year-selection-support into 4c641de on airbnb:master.

majapw · 2018-04-12T17:14:23Z

This is awesome, and I'll review it a bit more thoroughly today! :)

ljharb · 2018-04-12T18:07:11Z

src/components/CalendarMonth.jsx

@@ -185,7 +194,8 @@ class CalendarMonth extends React.Component {
            verticalScrollable && styles.CalendarMonth_caption__verticalScrollable,
          )}
        >
-          <strong>{monthTitle}</strong>
+          {renderCaption && renderCaption({ month, onMonthSelect, onYearSelect })}
+          {!renderCaption && <strong>{monthTitle}</strong>}


any reason not to make this be the default function for renderCaption?

Nope, sounds great, I'll update that.

Actually, monthTitle here is potentially derived from the renderMonth props, so can't make this explicitly a defaultProp. But can still certainly clean this bit of code up.

ljharb · 2018-04-12T18:07:54Z

src/components/CalendarMonthGrid.jsx

+      initialMonthSubtraction -= 1;
+    }
+    newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
+    this.props.onMonthChange(newMonth);


Please destructure this out, so the “this” value of the function isn’t the props object.

Gotcha 👍

ljharb · 2018-04-12T18:07:59Z

src/components/CalendarMonthGrid.jsx

+      initialMonthSubtraction -= 1;
+    }
+    newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months');
+    this.props.onYearChange(newMonth);


Please destructure this out, so the “this” value of the function isn’t the props object.

ljharb · 2018-04-12T18:09:02Z

src/utils/isNextMonth.js

+import moment from 'moment';
+
+export default function isNextMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;


what non-moment values do you expect in these functions? I’d prefer a throw when it’s an unexpected value.

I'll update this and the other spot, thanks.

I think this is to allow one or both of a and b to be null (startDate and endDate are sometimes null)

ljharb · 2018-04-12T18:09:09Z

src/utils/isPrevMonth.js

+import moment from 'moment';
+
+export default function isPrevMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;


GoGoCarl

Thanks for the review, I'll push an update to address your comments.

GoGoCarl · 2018-04-12T19:06:32Z

src/components/CalendarMonth.jsx

@@ -185,7 +194,8 @@ class CalendarMonth extends React.Component {
            verticalScrollable && styles.CalendarMonth_caption__verticalScrollable,
          )}
        >
-          <strong>{monthTitle}</strong>
+          {renderCaption && renderCaption({ month, onMonthSelect, onYearSelect })}
+          {!renderCaption && <strong>{monthTitle}</strong>}


Nope, sounds great, I'll update that.

GoGoCarl · 2018-04-12T19:07:22Z

src/components/CalendarMonthGrid.jsx

+      initialMonthSubtraction -= 1;
+    }
+    newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months');
+    this.props.onMonthChange(newMonth);


Gotcha 👍

GoGoCarl · 2018-04-12T19:08:47Z

src/utils/isNextMonth.js

+import moment from 'moment';
+
+export default function isNextMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;


I'll update this and the other spot, thanks.

GoGoCarl · 2018-04-13T15:01:15Z

@ljharb I pushed a change to address a couple of your notes, but after some further review I left the type checks in the utils classes in place. The reason was because all the other similar utility classes, (i.e. https://github.com/airbnb/react-dates/blob/master/src/utils/isAfterDay.js) also do this check, so I think the code and behavior should remain consistent with what's already in place there. Thoughts?

ljharb · 2018-04-13T15:26:31Z

Looks good; I’ll defer to @majapw about those functions (but consistency is probably better)

kevinnio · 2018-04-30T19:10:25Z

My team is interested in having this PR merged. Can we have an estimate of when is this going to happen?

jgnieuwhof · 2018-05-07T18:53:58Z

+1 on this, we have a team here waiting on this feature to go in, is there an estimate on when this will be merged?

gvincentlh · 2018-05-08T23:10:56Z

We would really appreciate a merge as well 🙏

majapw

omg, i am so sorry for how long it has taken me to review this. @GoGoCarl I can address some of the comments I've made if that'll be easier. I think this is reasonable?

There are def some rough things about the react-dates architecture that makes this harder than it should be... :x

majapw · 2018-05-09T07:24:33Z

README.md

@@ -147,6 +147,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
+renderCaption: PropTypes.func,


Can we add what these render functions expect to the README? Something like:

renderCaption: PropTypes.func, // ({ month, onMonthSelect, onYearSelect }) => PropTypes.node,

Certainly! I can also document the callbacks.

majapw · 2018-05-09T07:33:42Z

src/components/CalendarMonth.jsx

      renderMonth,
      renderCalendarDay,
      renderDayContents,
+      renderCaption,


is it weird to have both renderCaption and renderMonth? Should we better differentiate between the two?

I do agree it is a bit weird.

My original thought was to modify the method signature of renderMonth to be something like renderMonth(month, { onMonthSelect, onYearSelect }). In order to do that, though, and keep compatible with the current UI, the resulting monthTitle would need to be wrapped in a <strong> tag only if it was a string, and I didn't know if adding that type check was the way to go.

So, I went with adding a new function instead mainly to preserve the old functionality of renderMonth without additional type checks. But if you think it makes more sense to do the above, I'm for it.

Otherwise, we can keep the two separate and having something like renderMonth and renderMonthElement, the latter being a rename of renderCaption that emphasizes the expected return value a bit better and linking the two functions.

I'm open to ideas. :)

Let's leave renderMonth for right now and make the change to renderMonthElement in a follow-up PR (so as to separate out the breaking aspects)

majapw · 2018-05-09T10:04:44Z

src/components/CalendarMonthGrid.jsx

@@ -204,6 +216,32 @@ class CalendarMonthGrid extends React.Component {
    onMonthTransitionEnd();
  }

+  onMonthSelect(currentMonth, newMonthVal) {


currentMonth is a momentObject, whereas newMonthVal is a zero-indexed integer?

Yes; similar to how currentMonth passes the full momentObject. So, really, currentMonth is currentDate. newMonthVal is a value compatible with momentObject.month(val) -- which indeed is a zero-indexed integer.

majapw · 2018-05-09T10:09:04Z

src/components/DayPicker.jsx

@@ -419,6 +430,30 @@ class DayPicker extends React.Component {
    });
  }

+  onMonthChange(currentMonth) {
+    // Translation value is a hack to force an invisible transition that


Very much open to suggestions, but the transition (or something like it) is needed for the re-render.

majapw · 2018-05-09T10:11:59Z

src/components/DayPickerSingleDateController.jsx

@@ -456,6 +484,10 @@ export default class DayPickerSingleDateController extends React.Component {
    return { currentMonth, visibleDays };
  }

+  setDayPickerRef(ref) {


Do we use this ref?

I think this was just added for consistency with other components, but if it's not used, happy to remove it.

This must be a relic of some old code that never got cleaned up

majapw · 2018-05-09T10:13:00Z

src/utils/isNextMonth.js

+import moment from 'moment';
+
+export default function isNextMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;


I think this is to allow one or both of a and b to be null (startDate and endDate are sometimes null)

majapw · 2018-05-09T10:16:14Z

src/utils/isNextMonth.js

+
+export default function isNextMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  return b.isSame(a.clone().add(1, 'month'), 'month');


I've found isSame to be slow even when it's got a 'month' or 'day' or whatever argument. Maybe let's do:

return b.month() === a.clone().add(1, 'month').month();

Only issue there is that a = 2017-01-01, b = 2018-02-01 would return true when it would be false. May not be a thing based on how the function is being called, but could be an issue down the line. To me, isSame may be slower, but it is safer.

Perhaps, if performance is a concern, checking a.year === b.year and a.month === b.month might help?

majapw · 2018-05-09T10:16:33Z

src/utils/isPrevMonth.js

+
+export default function isPrevMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  return b.isSame(a.clone().subtract(1, 'month'), 'month');


I've found isSame to be slow even when it's got a 'month' or 'day' or whatever argument. Maybe let's do:

return b.month() === a.clone().subtract(1, 'month').month();

majapw · 2018-05-09T10:16:56Z

test/utils/isNextMonth__spec.js

@@ -0,0 +1,32 @@
+import moment from 'moment';


isNextMonth_spec.js (one underscore pls)

GoGoCarl

Thank you for the review @majapw! I am happy to address the changes to the extent that I can, and leave the rest to you to finalize. Please see my additional comments below.

GoGoCarl · 2018-05-09T16:33:03Z

README.md

@@ -147,6 +147,7 @@ numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
 renderCalendarInfo: PropTypes.func,
+renderCaption: PropTypes.func,


Certainly! I can also document the callbacks.

GoGoCarl · 2018-05-09T16:51:02Z

src/components/CalendarMonth.jsx

      renderMonth,
      renderCalendarDay,
      renderDayContents,
+      renderCaption,


I do agree it is a bit weird.

My original thought was to modify the method signature of renderMonth to be something like renderMonth(month, { onMonthSelect, onYearSelect }). In order to do that, though, and keep compatible with the current UI, the resulting monthTitle would need to be wrapped in a <strong> tag only if it was a string, and I didn't know if adding that type check was the way to go.

So, I went with adding a new function instead mainly to preserve the old functionality of renderMonth without additional type checks. But if you think it makes more sense to do the above, I'm for it.

Otherwise, we can keep the two separate and having something like renderMonth and renderMonthElement, the latter being a rename of renderCaption that emphasizes the expected return value a bit better and linking the two functions.

I'm open to ideas. :)

GoGoCarl · 2018-05-09T16:56:44Z

src/components/CalendarMonthGrid.jsx

@@ -204,6 +216,32 @@ class CalendarMonthGrid extends React.Component {
    onMonthTransitionEnd();
  }

+  onMonthSelect(currentMonth, newMonthVal) {


Yes; similar to how currentMonth passes the full momentObject. So, really, currentMonth is currentDate. newMonthVal is a value compatible with momentObject.month(val) -- which indeed is a zero-indexed integer.

GoGoCarl · 2018-05-09T16:58:10Z

src/components/DayPicker.jsx

@@ -419,6 +430,30 @@ class DayPicker extends React.Component {
    });
  }

+  onMonthChange(currentMonth) {
+    // Translation value is a hack to force an invisible transition that


Very much open to suggestions, but the transition (or something like it) is needed for the re-render.

GoGoCarl · 2018-05-09T16:59:06Z

src/components/DayPickerSingleDateController.jsx

@@ -456,6 +484,10 @@ export default class DayPickerSingleDateController extends React.Component {
    return { currentMonth, visibleDays };
  }

+  setDayPickerRef(ref) {


I think this was just added for consistency with other components, but if it's not used, happy to remove it.

GoGoCarl · 2018-05-09T17:05:49Z

src/utils/isNextMonth.js

+
+export default function isNextMonth(a, b) {
+  if (!moment.isMoment(a) || !moment.isMoment(b)) return false;
+  return b.isSame(a.clone().add(1, 'month'), 'month');


Only issue there is that a = 2017-01-01, b = 2018-02-01 would return true when it would be false. May not be a thing based on how the function is being called, but could be an issue down the line. To me, isSame may be slower, but it is safer.

Perhaps, if performance is a concern, checking a.year === b.year and a.month === b.month might help?

GoGoCarl · 2018-05-31T18:14:16Z

All sounds good, thanks @majapw!

majapw · 2018-05-31T18:16:46Z

\o/ Man i have been slow at getting to this. @GoGoCarl I don't want to put too much work on you randomly 2 months later :) so i'm gonna try to address my comments completely and get this merged in today.

I've noticed one small issue when the months change heights which I'll try to address before merging in. :)

GoGoCarl · 2018-05-31T18:19:40Z

No worries, I'm just excited to see this getting closer to the finish line! If I can help out or debug just let me know, happy to help however I can.

majapw · 2018-06-07T18:24:10Z

Hmm, I'm facing a weird issue where the height animation does not occur between non-neighboring months when using the custom caption. What's weird, is that neighboring months do trigger the animation, even when navigating via the caption. I think it has something to do with the transition time?

bartkozal · 2018-06-08T08:45:08Z

Hi 👋. I have already been using code from this PR as a patch in my app. There is one issue that you should be aware of. The caption is rendered "below" weekdays so in some cases (f.e. when custom components are used for select inputs) the weekdays overlap the content of the caption:

The way how the DOM tree looks like make it impossible to just use z-index. The current hacky workaround for me is to hide original weekdays with CSS and render them from renderCaption function:

const captionRenderer = ({ month, onMonthSelect, onYearSelect }) => {
  const weekdays = moment.weekdaysMin();
  return (
    <div>
      <div className="DayPicker_weekHeader">
        <ul className="DayPicker_weekHeader_ul">
          {weekdays.map(day => (
            <li key={day} className="DayPicker_weekHeader_li">
              {day}
            </li>
          ))}
        </ul>
      </div>
    // ...
    </div>
  );
}

GoGoCarl · 2018-06-08T13:20:51Z

@bkzl YES!! Thank you for mentioning this, I thought there was something else I wanted to flag but was convinced that it was the transition issue so I never thought about it again.

I, too, ran into the same issue and solved it the same way. I'll see if I can add a tweak to this that will help, unless you have some ideas on this @majapw

majapw · 2018-06-13T21:26:59Z

Hello! I believe I've fixed the month transition issue. Maybe @GoGoCarl @ljharb, y'all can take a look at my last commit and see if it looks reasonable

@bkzl @GoGoCarl I dug into the z-index issue a bit, but was unable to come up with a satisfactory solution. Perhaps, the best bet right now is to merge this in as is and open up a separate issue to track the z-index challenge?

Destructure a couple props to remove the `this` reference and tidy up the display call to `renderCaption`.

- add story for daypickerrangecontroller - document callbacks in readme - make month comparison utils more performant

This required a slight change in how the height animation is handled. Namely, the height animation is now always on after the initial render.

sauldeleon · 2018-06-20T09:30:00Z

Hi

I have downloaded the master branch of the library, as there is no TAG yet to include this PR.
As I have to build the library, I have found an error:

In the build process

> react-dates@16.7.0 build:css app/node_modules/react-dates
> node scripts/buildCSS.js "--optimize"

app/node_modules/react-dates/node_modules/react-outside-click-handler/build/OutsideClickHandler.js:42
  display: _propTypes2['default'].oneOf(Object.values(DISPLAY))TypeError: Object.values is not a function
    at Object.<anonymous> (app/node_modules/react-dates/node_modules/react-outside-click-handler/build/OutsideClickHandler.js:42:48)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (app/node_modules/react-dates/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (app/node_modules/react-dates/node_modules/react-outside-click-handler/index.js:2:18)

This piece of code

var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({
  children: _propTypes2['default'].node.isRequired,
  onOutsideClick: _propTypes2['default'].func.isRequired,
  disabled: _propTypes2['default'].bool,
  useCapture: _propTypes2['default'].bool,
  display: _propTypes2['default'].oneOf(Object.values(DISPLAY)),
})

Must be changed to

var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({
  children: _propTypes2['default'].node.isRequired,
  onOutsideClick: _propTypes2['default'].func.isRequired,
  disabled: _propTypes2['default'].bool,
  useCapture: _propTypes2['default'].bool,
  display: _propTypes2['default'].oneOf(
    Object.keys(DISPLAY).map(function(key) {
      return DISPLAY[key]
    })
  ),
})

Or the build will crash.

There is another way of building the app or using this new feature?

Thanks in advance

ljharb · 2018-06-20T15:36:36Z

@sauldeleon it sounds like you’re using an old version of node to do the build; try using node 8 or 10.

sauldeleon · 2018-06-21T06:06:18Z

@ljharb thanks for the quick response.

You are totally right. Updating Node to the last version did the trick.

In addition, there is a warning regarding this PR

Warning: Failed prop type: DayPickerRangeController: unknown props found: onMonthChange, onYearChange
    in DayPickerRangeController
    in DateRangePicker
    in withStyles(DateRangePicker)
    in div
    in DateRangePickerWrapper
    in div
    in App

EDIT:
Fixed with adding

  onMonthChange: PropTypes.func,
  onYearChange: PropTypes.func,

on lines 88-89. I can do a PR if you want, but for this maybe its easier for you to do it!

EDIT 2: Done. To be reviewed:

here

huchenme · 2018-06-22T03:13:39Z

Any plan for next release? excited about this feature

majapw · 2018-06-22T03:52:49Z

v17.0.0 coming v. soon (e.g. now :P)

sauldeleon · 2018-06-22T07:31:55Z

WORKS like a charm! thanks @GoGoCarl @majapw @ljharb !!!!

ardaplun · 2018-07-06T08:27:49Z

Is there are any explanation to use this year selection feature, please?

majapw · 2018-07-07T00:23:07Z

Hi @ardaplun, you can take a look at https://github.com/airbnb/react-dates/blob/master/stories/DayPickerRangeController.js#L151-L182 to see the custom caption code in action!

stahor · 2018-07-09T12:28:24Z

What about animation for onMonthChange? It can be the same one that is used for changing single month

majapw · 2018-07-09T18:44:10Z

@stahor posting on a closed PR is probably not the best way to get a discussion going! :) Can you please open an issue?

archy-bold · 2018-08-15T15:48:38Z

Quick follow up to @bkzl's suggestion. You should ensure you get the days of the week in order relevant for the locale by passing true to weekdaysMin. Otherwise you always get them with Sunday as the first.

const weekdays = moment.weekdaysMin(true);

whydna · 2018-09-17T22:10:29Z

@GoGoCarl @majapw I'm a bit confused - is the property to customize the control renderCaption or renderMonthElement? What's the difference?

majapw · 2018-09-23T05:34:40Z

@whydna it was renderCaption in the original PR, but it was renaming to renderMonthElement to be a little bit more true to what it is actually doing. I would look at https://github.com/airbnb/react-dates/blob/master/stories/DayPickerRangeController.js#L151-L182 for the source code.

goranefbl · 2019-08-30T15:18:20Z

in case someone stumbles upon here, the source code file has been updated few times, so just look for renderMonthElement property, currently @ https://github.com/airbnb/react-dates/blob/master/stories/DayPickerRangeController.js#L210-L233

gravitymedianet · 2019-10-28T22:35:27Z

Hi 👋. I have already been using code from this PR as a patch in my app. There is one issue that you should be aware of. The caption is rendered "below" weekdays so in some cases (f.e. when custom components are used for select inputs) the weekdays overlap the content of the caption:

The way how the DOM tree looks like make it impossible to just use z-index. The current hacky workaround for me is to hide original weekdays with CSS and render them from renderCaption function:
const captionRenderer = ({ month, onMonthSelect, onYearSelect }) => {
  const weekdays = moment.weekdaysMin();
  return (
    <div>
      <div className="DayPicker_weekHeader">
        <ul className="DayPicker_weekHeader_ul">
          {weekdays.map(day => (
            <li key={day} className="DayPicker_weekHeader_li">
              {day}
            </li>
          ))}
        </ul>
      </div>
    // ...
    </div>
  );
}

Can you post a link to sample code to implement this? Year, month picker?

GoGoCarl mentioned this pull request Apr 6, 2018

Allow Year/month navigation #25

Closed

ljharb added the semver-minor: new stuff Any feature or API addition. label Apr 12, 2018

ljharb reviewed Apr 12, 2018

View reviewed changes

GoGoCarl commented Apr 12, 2018

View reviewed changes

ljharb requested a review from majapw May 1, 2018 04:30

jgnieuwhof mentioned this pull request May 2, 2018

Date Range Facet UI is cut off/unusable kids-first/kf-portal-ui#290

Closed

majapw reviewed May 9, 2018

View reviewed changes

GoGoCarl commented May 9, 2018

View reviewed changes

majapw force-pushed the month-year-selection-support branch from 8460a7e to 4efde5c Compare May 31, 2018 17:55

majapw force-pushed the month-year-selection-support branch from 4efde5c to adf2cce Compare May 31, 2018 18:20

majapw mentioned this pull request Jun 1, 2018

Change month height calculation to be based on number of weeks instead of DOM calculations #1192

Merged

majapw force-pushed the month-year-selection-support branch 3 times, most recently from 494787c to a759dfb Compare June 5, 2018 20:28

majapw force-pushed the month-year-selection-support branch from a759dfb to 4b72e5f Compare June 13, 2018 21:02

majapw force-pushed the month-year-selection-support branch from 4b72e5f to 11c01b2 Compare June 13, 2018 21:38

GoGoCarl and others added 5 commits June 18, 2018 14:05

Example of date picker with custom caption

d3668f8

CalendarMonth prop destructuring and code cleanup

07fe347

Destructure a couple props to remove the `this` reference and tidy up the display call to `renderCaption`.

Address my own comments! <3

22617a2

- add story for daypickerrangecontroller - document callbacks in readme - make month comparison utils more performant

Adjust height appropriately based on new month/year

7313f82

This required a slight change in how the height animation is handled. Namely, the height animation is now always on after the initial render.

Add CalendarMonthGrid tests

08c997c

majapw force-pushed the month-year-selection-support branch from 8aa1fa8 to 08c997c Compare June 18, 2018 21:05

majapw approved these changes Jun 18, 2018

View reviewed changes

majapw merged commit ca3906b into react-dates:master Jun 18, 2018

majapw mentioned this pull request Jun 28, 2018

Current month should update when passed values change #48

Open

VincentDamour mentioned this pull request Jul 16, 2018

Add renderMonthElement to react-dates DefinitelyTyped/DefinitelyTyped#27345

Merged

majapw mentioned this pull request Aug 13, 2018

Manually editing date input fields #676

Open

quorth0n mentioned this pull request Aug 22, 2018

Add basic UI components chronoscio/frontend#10

Merged

swaritkohli mentioned this pull request Sep 21, 2018

New to react and need help implementing the Month selector and year selector functionality #1368

Closed

ljharb mentioned this pull request Nov 5, 2018

How do we make the year selectable on SingleDatePicker #1450

Closed

ThomasKranitsas mentioned this pull request Nov 26, 2018

[$80] Fix issues with the birth date field in Basic Info page topcoder-platform/community-app#1660

Closed

[Issue 25] Unopinionated month and year selection support #1106

[Issue 25] Unopinionated month and year selection support #1106

Conversation

GoGoCarl commented Apr 6, 2018 • edited by ljharb Loading

coveralls commented Apr 6, 2018 • edited Loading

majapw commented Apr 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GoGoCarl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GoGoCarl commented Apr 13, 2018

ljharb commented Apr 13, 2018

kevinnio commented Apr 30, 2018 • edited Loading

jgnieuwhof commented May 7, 2018

gvincentlh commented May 8, 2018

majapw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GoGoCarl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GoGoCarl commented May 31, 2018

majapw commented May 31, 2018

GoGoCarl commented May 31, 2018

majapw commented Jun 7, 2018

bartkozal commented Jun 8, 2018

GoGoCarl commented Jun 8, 2018

majapw commented Jun 13, 2018

sauldeleon commented Jun 20, 2018

ljharb commented Jun 20, 2018

sauldeleon commented Jun 21, 2018 • edited Loading

huchenme commented Jun 22, 2018

majapw commented Jun 22, 2018

sauldeleon commented Jun 22, 2018

ardaplun commented Jul 6, 2018

majapw commented Jul 7, 2018

stahor commented Jul 9, 2018

majapw commented Jul 9, 2018

archy-bold commented Aug 15, 2018

whydna commented Sep 17, 2018 • edited Loading

majapw commented Sep 23, 2018

goranefbl commented Aug 30, 2019

gravitymedianet commented Oct 28, 2019

GoGoCarl commented Apr 6, 2018 •

edited by ljharb

Loading

coveralls commented Apr 6, 2018 •

edited

Loading

kevinnio commented Apr 30, 2018 •

edited

Loading

sauldeleon commented Jun 21, 2018 •

edited

Loading

whydna commented Sep 17, 2018 •

edited

Loading