Material-ui-pickers: DatePicker Skips February

Created on 13 Feb 2018  路  3Comments  路  Source: mui-org/material-ui-pickers

Environment

"material-ui": "^1.0.0-beta.26",
"material-ui-pickers": "1.0.0-beta.15.1",

Steps to reproduce

  1. Click date
  2. Picker opens
  3. Current month displayed as February
  4. Use arrows to navigate next and previous months
  5. February is always skipped over - happens on any year

Expected behavior


February to be selected and available dates shown

Actual behavior


February is skipped, can only view dates for other months

incomplete

Most helpful comment

Possible edge case then or how we are implementing this.

We are using react-jsonschema to supply the data to the form and loading a widget that contains the picker based on the mapping in the data.

The widget renders a FormControl wrapping the DatePicker:

<FormControl required={required} error={(rawErrors && rawErrors.length > 0) ? true : false} fullWidth={true}>
        <DatePicker
          value={formData}
          onChange={this.dateChange}
          format={DATE_FORMAT}
          className={classes.root}
          InputProps={inputProps}
        />
        <FormHelperText>{help}</FormHelperText>
      </FormControl>

It's not particular to February, but the selected month i.e. if no date is supplied it defaults to todays date (February), if a date is supplied, the date is selected (i.e. January) - this is the month that renders on load but is then subsequently skipped when navigating next and previous months (even does it when the year changes).

EDIT: The picker does not allow a date in any other month to be selected, when trying to do this the picker jumps to the current (the month selected on load) month, you can however selected dates from the selected month which correctly updates the input element

UPDATE: In our case it appears that the component is getting re-constructed on certain click events, 'previous' when you have navigated past the selected month and 'next' when you have navigated before the selected month and any date selection when you are not on the selected month

Changing the wrapper from a FormControl to a InputLabel fixes the issue
Duplicate of #204

All 3 comments

Please can you provide the way you using the picker? It can be caused by wrapping inside the FormControl.
I cannot reproduce this bug, also on the demo page - all works fine

Possible edge case then or how we are implementing this.

We are using react-jsonschema to supply the data to the form and loading a widget that contains the picker based on the mapping in the data.

The widget renders a FormControl wrapping the DatePicker:

<FormControl required={required} error={(rawErrors && rawErrors.length > 0) ? true : false} fullWidth={true}>
        <DatePicker
          value={formData}
          onChange={this.dateChange}
          format={DATE_FORMAT}
          className={classes.root}
          InputProps={inputProps}
        />
        <FormHelperText>{help}</FormHelperText>
      </FormControl>

It's not particular to February, but the selected month i.e. if no date is supplied it defaults to todays date (February), if a date is supplied, the date is selected (i.e. January) - this is the month that renders on load but is then subsequently skipped when navigating next and previous months (even does it when the year changes).

EDIT: The picker does not allow a date in any other month to be selected, when trying to do this the picker jumps to the current (the month selected on load) month, you can however selected dates from the selected month which correctly updates the input element

UPDATE: In our case it appears that the component is getting re-constructed on certain click events, 'previous' when you have navigated past the selected month and 'next' when you have navigated before the selected month and any date selection when you are not on the selected month

Changing the wrapper from a FormControl to a InputLabel fixes the issue
Duplicate of #204

Thank you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

idrm picture idrm  路  3Comments

StevenRasmussen picture StevenRasmussen  路  3Comments

callmeberzerker picture callmeberzerker  路  3Comments

killjoy2013 picture killjoy2013  路  3Comments

aditya81070 picture aditya81070  路  3Comments