Comments (26)
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:
from mui-x.
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.
from mui-x.
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.
from mui-x.
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>
)
}
}
from mui-x.
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.
from mui-x.
@nathanmarks A user could created their own version of DatePicker without TextField using DatePickerDialog or Calendar.
from mui-x.
@mbrookes If that's the case, that sounds like the best option for specific use cases such as this.
from mui-x.
@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.
from mui-x.
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.
from mui-x.
@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.
from mui-x.
The spec recommends using segmented dropdowns when the UX is more appropriate
from mui-x.
@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/
from mui-x.
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....
from mui-x.
@ddeath have you made any progress towards this?
from mui-x.
@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.
from mui-x.
@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.
from mui-x.
@canastro I had not really thought about using a type="date"
input. However it is not supported (shown) by Firefox…
from mui-x.
@markau could you point to that other implementation? Maybe we could adapt it and bring it here.
from mui-x.
@rigelk, it seems I was mistaken saying it is Material implementation, but it does use React.
https://grommet.github.io/docs/date-time
from mui-x.
here is my implementation: mui/material-ui#5677
I would appreciate any feedback
from mui-x.
Also mui/material-ui#5030 has been open with a working and production tested implementation since August
from mui-x.
Yeah, any expectation when mui/material-ui#5030 will be closed? We are eager to use it.
from mui-x.
@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?
from mui-x.
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?
from mui-x.
@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
from mui-x.
Closing for mui/material-ui#4787
from mui-x.
Related Issues (20)
- [data grid] consider providing defaults for rows and columns prop HOT 1
- [charts] Add keyboard navigation and support for screen readers
- [data grid] `isLastColumn` parameter is not set to `true` for last column when `disableVirtualization={true}` HOT 2
- [pickers][DateCalendar] Change months with custom header? HOT 2
- [pickers] DateTimePicker doesn't show time picker HOT 3
- [data grid] Export to Excel default Date format is "dd.mm.yyyy" and it's too difficult to override for the entire system HOT 2
- [pickers] In Custom calendar header change to month view then change year, but not apply to the current date HOT 5
- [data grid] detail panel + sortModel causes "Maximum call stack size exceeded" HOT 5
- [TreeView] Add docs page for `apiRef`
- [pickers][TimePicker] Minute range 56-59 cannot be selected HOT 3
- [data grid] Column Header tooltip should be displayed on keyboard focus (especially when a column has ellipsis) HOT 9
- [data grid] The right 1/4 of the "Select all rows" Checkbox is not clickable HOT 2
- [charts][BarChart] x axis labels being hidden when resizing HOT 6
- [data grid] How can I trigger a new row being added after the processRowUpdate callback? (Only after adding a new row, not editing an existing row) HOT 17
- [data grid] CTRL + A not working when using TextField into DataGrid Table HOT 2
- [license] Expired license key HOT 6
- [charts] support partial dashed line path for incomplete or projected data points HOT 15
- [charts] How to add horizontal layout for Responsive charts? HOT 3
- [data grid] Allow for expressing the grid height in number of visible rows HOT 1
- Support for event charting through plotbands or custom shapes on charts HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.