Material-ui-pickers: Cannot format KeyboardDatePicker date with text characters

[AdamMcquiff]

me right now:

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 3.0.0 |
| material-ui | 4.0.1 |
| React | 16.8.6 |
| Browser | Chrome 74.0.3729.169 |
| Peer library | date-fns | |

Steps to reproduce

1. Use MuiPickersUtilsProvider with DateFnsUtils utils.
2. Use KeyboardDatePicker with format="MMM dd, yyyy" attribute and value.
3. Attempt to adjust date via keyboard.

Expected behavior

One should be able to edit the text and input a new date.

For example, let's work with the date "Dec 17, 2018".

If I wished to adjust this date via keyboard, I would expect to be able to delete "2018" from the string and add "2017" instead. I would assume that the rest of the string would remain the same.

Actual behavior

When the text date is adjusted via keyboard, characters from the date are removed. After typing the first character, the string changes to "Dec 1, 7, 2". When a second character is typed, the string changes to "Dec , 1, 7"

Live example

https://codesandbox.io/embed/materialuipickersusagedemo-vv0ou?fontsize=14

[dmtrKovalenko]

Got it. We definitely need to do smth with it. That’s a case when auto generated mask is not working :)

We cannot generate all masks, so it needs to be specified manually

[jruuttun]

I'm not sure if this would warrant a separate issue but I can't upgrade from 2.2.4 for a similar reason: I want to use KeyboardDatePicker in format 'd.M.yyyy' where d and M are just single digits when < 10, two digits otherwise. This is a common pattern for Finnish date representations. In other words, I don't want "13.08.2019" but "13.8.2019". Having read about rifm I fear this is not possible in @material-ui/pickers@3, but I hope I'm wrong.

[dmtrKovalenko]

It is not possible out of the box. But you can pass custom rifmFormatter and do anything you want

[Reshad-A]

I have had the same issue for the past couple of days and I figured a workaround I hope it helps.

I am using regular expression for refuse and rifmFormatter properties to do away with weird date formatting issue and accept month name as string.
Also for onChange I am passing an empty function instead I am using onBlur and onAccept to handleDateChange()

 public render() {
        const {
            datePickerData: {
                content: { reference, validationRules, placeHolder },
            },
            showError,
        } = this.props;

<div style={{ position: "relative" }}>
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <KeyboardDatePicker
             disableToolbar={true}
             variant="inline"  
             inputVariant="outlined"  
             rifmFormatter={val=> val.replace(/[^\.\ \,\[a-zA-Z0-9_]*$]+/gi, '')}
             refuse={/[^\.\ \,\[a-zA-Z0-9_]*$]+/gi}  
             format={"MMM, DD YYYY"} 
             autoOk 
             value={this.selectedDay}
             id={`datePicker-${reference}`} 
             onChange={()=>{}}  
             onAccept={this.handleDateChange}
             onBlur={this.handleDateChange} 
              />
    </MuiPickersUtilsProvider>
</div>
};

public handleDateChange= (selectedDate:any) => {  
        let newDate=null;
        if(selectedDate===null)return;
        if(!moment.isMoment(selectedDate)){
         let el = selectedDate.currentTarget.defaultValue; 
         let elementValue = moment(el).toDate();
         newDate = elementValue;
        }else{
            newDate = selectedDate.toDate();
        }
  if(moment(this.selectedDay).format('YYYY-MM-DD')!== moment(newDate).format('YYYY-MM-DD')){
               this.selectedDay = newDate;  
           }      
    };  

[dmtrKovalenko]

Fixed in v4

[massimodossola]

Fixed in v4

I have the same issue, even after upgrading to v4.

[dmtrKovalenko]

@massimodossola Do you have a reproduction?

[dmtrKovalenko]

@massimodossola If you cannot provide us reproduction we have no chance to a) point you to the right direction or b) understand the underlying issue

[massimodossola]

I cannot provide a reproduction, but here below my code. I have 2 pickers where start and end are the starting & ending date in a time range. I'm using @material-ui/core: "^4.5.0". At the moment I'm trying the workaround with refuse and rifmFormatter, but I have other issues on the onChange event.

<MuiPickersUtilsProvider utils={DateFnsUtils}>
      <span>
        <KeyboardDatePicker
          inputProps={{
            "data-testid": "metric-start-date"
          }}
          views={["year", "month", "date"]}
          variant="inline"
          format="dd/MMM/yyyy"
          id="metric-start-date"
          label="Start"
          maxDate={
            end
              ? moment(end)
                  .subtract(1, "min")
                  .toDate()
              : null
          }
          value={start ? moment(start).toDate() : null}
          onChange={val => setStart(val)}
        />
      </span>

      <span>
<KeyboardDatePicker
       inputProps={{
            "data-testid": "metric-end-date"
          }}
          views={["year", "month", "date"]}
          variant="inline"
          format="dd/MMM/yyyy"
          id="metric-end-date"
          label="End"
          maxDate={moment()
            .add(1, "day")
            .toDate()}
          minDate={
            start
              ? moment(start)
                  .add(1, "min")
                  .toDate()
              : null
          }
          value={end ? moment(end).toDate() : null}
          onChange={val => setEnd(val)}
        />
 </span>
    </MuiPickersUtilsProvider>