[DatePicker] Use keyboard to write date about mui-x

[barbalex]

Here is my solution: https://github.com/barbalex/apf2/blob/master/src/components/shared/DateFieldWithPicker.js

Basic idea:

• material-ui DatePicker is hidden by sizing it 0x0 pixels
• instead, a textfield is shown and next to it a calendar icon
• when this icon is clicked, focus is set to the DatePicker
• which opens the calendar

Because I use moment.js to parse the date string

moment(date, `DD.MM.YYYY`).format(`YYYY-MM-DD`):

users have a lot of possibilities:

• use the date picker
• write a date manually:
  • write only day number if date is in the current month - moment.js will add current month and year
  • write day and month number if date is in current year- moment.js will add year
  • write entire date but you don't need to use two digits for single digit numbers - moment.js will add them for you
  • write entire date with all digits if you really want to

You can watch it in action here:

[markau]

This is important for accessibility (WCAG Level A). Having the option to manually enter a date string would be fantastic. I saw another Material implementation (that I don't remember now!) where they had a text input field, with an icon that opened the date picker. Best of both worlds.

[nathanmarks]

@mbrookes @tintin1343

Can the DatePicker be used without the built in TextField? That would allow the user full control over the textbox and when/how to display the picker.

[flexdeep]

Thank's to all, that's something that I've been looking for. I've simplified barbalex's component removing unnecessary (in my opinion) dependencies. That's the component that I'm currently using (material-ui ver 0.18.6) :

'use strict';
import React, {Component} from 'react';
import {DatePicker, IconButton, TextField} from "material-ui";
import ActionDateRange from 'material-ui/svg-icons/action/date-range';
import format from 'date-fns/format'
import parse from 'date-fns/parse'

export default class DatePickerField extends Component{

   constructor(props){
      super(props);

      this.state = {
        selectedDate: new Date(),
        dateText: format(new Date(), 'MM/DD/YYYY')
      };
   }

   handleChangeDatePicker = (event, date) => {
      this.setState({selectedDate: date, dateText:format(date, 'MM/DD/YYYY')});
   };

   handleDateInputChange = (event, value) => {
      this.setState({dateText:value});
   };

   handleDateInputBlur = (value) => {
     let parsedDate = parse(value, 'MM/DD/YYYY');

     if(this.isADate(parsedDate)){
        this.setState({selectedDate:parsedDate});
     }
     else{
        this.setState({dateText:format(this.state.selectedDate, 'MM/DD/YYYY')});
     }
   };

   isADate = (maybeDate) => {
      if ( Object.prototype.toString.call(maybeDate) === "[object Date]" ) {
         if ( isNaN( maybeDate.getTime() ) ) {
            return false;
         }
         else {
            return true;
         }
      }
      else {
         return false;
      }
   };

   render(){

      let dateInputWidth = "150px";
      let datePickerMargin = "-185px";

      return (
         <div style={{display: "flex"}}>
            <TextField
               style={{width:dateInputWidth}}
               value={this.state.dateText}
               onChange={this.handleDateInputChange}
               onBlur={(event) => this.handleDateInputBlur(event.currentTarget.value)}
            />

            <IconButton style={{opacity:"0.65"}}
                        onClick={() => this.datePicker.focus()}>
               <ActionDateRange />
            </IconButton>

            <div style={{width:"0px", height:"0px", marginLeft:datePickerMargin}}>
               <DatePicker
                  id="dataPicker"
                  floatingLabelText={''}
                  value={this.state.selectedDate}
                  errorText={''}
                  disabled={false}
                  formatDate={date => { return format(date, 'MM/DD/YYYY') } }
                  autoOk
                  container="inline"
                  fullWidth
                  onChange={this.handleChangeDatePicker}
                  ref={c => {
                     this.datePicker = c
                  }}
               />
            </div>
         </div>
      )
   }

}

[isaackearl]

I agree it is also a bit difficult to pick year if you are using this for entering something like a date of birth. Being able to type in text would help this.

[mbrookes]

@nathanmarks A user could created their own version of DatePicker without TextField using DatePickerDialog or Calendar.

[nathanmarks]

@mbrookes If that's the case, that sounds like the best option for specific use cases such as this.

[canastro]

@nathanmarks is this a specific use case? Its a input field that the native implementation allows for keyboard input. IMHO, this is the normal use case for any input component on a browser.

[mbrookes]

it is also a bit difficult to pick year if you are using this for entering something like a date of birth.

@isaackearl The UX is poor (per MD spec), but if you click on the year in the date-display you get a list of years to choose from.

[isaackearl]

@mbrookes Ah yes I am aware you can do that, but I still think it is not intuitive or easy to select a date quickly. I am having user tests on an application I've created and every tester has noted that it is difficult to use the datepicker for selecting date of birth. It does look nice though.

[nathanmarks]

@isaackearl @mbrookes

The spec recommends using segmented dropdowns when the UX is more appropriate

[mbrookes]

@nathanmarks Yes - I said the same thing to @tintin1343 on the inline timepicker PR, as I think the current datepicker inline is not good UX, and we should deprecate it in favour of something built with dropdowns/

[ddeath]

So your suggestion is to be able choose which type of input method user prefer? Basically add one property which would indicate it?
If so I would like to create PR for TimePicker....

[rigelk]

@ddeath have you made any progress towards this?

[ddeath]

@rigelk Hi not at all, I am waiting for response from team member, I do not want to do something what will be thrown away... so I switched to select boxes as probably everybody here.

[canastro]

@rigelk in the meanwhile I created a component in my project with something like this:

            <div className="acc-datepicker" style={styles.root}>
                <TextField
                    id={`${id}textfield`}
                    type="date"
                    ref="datepickerInternalInput"
                    value={this.state.dateStr}
                    errorText={this._buildErrors(id, allErrors)}
                    floatingLabelFixed={true}
                    floatingLabelText={floatingLabelText}
                    onBlur={this.isValid}
                    onChange={this._handleChange} />

                <ActionDateRange
                    onClick={this._onActionClicked}
                    color={cyan500}
                    style={styles.icon} />

                <DatePicker
                    ref="accDatePicker"
                    value={this.state.date}
                    onChange={this._handleChange} />
            </div>

The user can either write in the TextField of type date or click in the icon ActionDateRange to open the material-ui datepicker.

[rigelk]

@canastro I had not really thought about using a type="date" input. However it is not supported (shown) by Firefox…

[rigelk]

@markau could you point to that other implementation? Maybe we could adapt it and bring it here.

[markau]

@rigelk, it seems I was mistaken saying it is Material implementation, but it does use React.

https://grommet.github.io/docs/date-time

[aralot]

here is my implementation: mui/material-ui#5677

I would appreciate any feedback

[caesay]

Also mui/material-ui#5030 has been open with a working and production tested implementation since August

[dasloss]

Yeah, any expectation when mui/material-ui#5030 will be closed? We are eager to use it.

[reinartg]

@barbalex, I am trying to get your example to work in a react typescript project, but getting error on datePicker ( Property 'datePicker' does not exist on type 'MyDatePicker') used in StyledFontIcon's onClick method and DatePicker's ref method. Would you know how to solve this?

Could you also make a standalone react typescript component for your datepicker?

[barbalex]

@reinartg

Sorry: I use flow. I have never worked with typescript.

Property 'datePicker' is created by a ref (https://github.com/barbalex/apf2/blob/master/src/components/shared/DateFieldWithPicker.js#L168-L171).

You may have not created the ref properly.

I usually use functions for my components. In this case I use a class because ref's usually don't work in functions.

Maybe it does not work for you because you are not using a class?

[barbalex]

@reinartg it is kind of funny that flow also does not recognize the property created by a ref which is why I had to find a way to quiet it's complaints:

https://github.com/barbalex/apf2/blob/master/src/components/shared/DateFieldWithPicker.js#L169
https://github.com/barbalex/apf2/blob/master/.flowconfig#L9

[oliviertassinari]

Closing for mui/material-ui#4787