Problem Description

My labels come from react-intl, so they are of type node (spans).
So I get:

Warning: Failed propType: Invalid prop cancelLabel of type object supplied to DatePicker, expected string. Check the render method of DatePickerWrapper

It would be better to accept both string and node.
See PropTypes in DatePicker/DatePickerDialog.js

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.8
• Browser: Chrome 49 OSX

Problem Description

Technically this is not an issue , but a mismatch in the design. Currently the material design spec does not throw much light on it for the 24hr format.

As per our implementation, the 24hr time picker looks like this (the first 12 hours are on the outer circle):

This was probably designed as an addition to the 12 hr format and hence the first 12 hours are on the outer circle.

However, based on the actual implementations in the android based phones the 24 hr format looks like this: (with the first 12 hours along the inner circle)

I think the second one is more intuitive and make sense. Also 12 AM is shown as "00" than the current 0.

I'm gonna submit a PR for this.

Versions

• Material-UI: 0.15.02 alpha
• React: 0.14.7
• Browser: All browsers

<TimePicker hintText="12hr Format" onChange={(e) => console.log(e)} />

The above line returns null. How do i catch the time value in my onchange function.

I have a Nexus 5 with the latest android, the datepicker on the material-ui demo website is not usable, the bottom part of the dialog is cutt-off.

This is similar to issue mui/material-ui#1261, but for android too (and for an official google phone no less).

Would be great to have a date range component similar in functionality to the one here: http://www.daterangepicker.com/

Problem Description

Date picker look weird since 0.15.0-alpha.2. In 0.15.0-alpha.1 it's okay.
http://www.material-ui.com/v0.15.0-alpha.2/#/components/date-picker

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.7
• Browser: chrome 49.0.2623.87 (64-bit)

Problem description

When a DatePicker component is used with a floatingLabelText prop, clicking the label has no effect. In order to open the date picker dialog, you have to click on the component, but outside the label.

Steps to reproduce

1. Go to the Material-UI DatePicker examples page
2. Scroll down to the "Ranged example" section
3. Click on the "Ranged Date Picker" label:
   • Nothing happens
4. Click next to the "Ranged Date Picker" label but inside the DatePicker component:
   • The date picker dialog opens

Versions

• Material-UI: Confirmed in 0.15.0 and 0.14.4
• React: 15
• Browser: Chrome

I would need to add a property onChange on the datepicker object to know when a user select a date using this component.

What do you guys think about this? (I can do the PR myself if required, but I'd like some feedback before proceeding).

Hello,

There is another issue similar to this, however it was closed and I didn't want to reopen it.

Basically my datepicker is rendering, displaying hint text if I add it however when clicked on it doesn't do anything. There are no errors or anything to suggest it is broke.

I've done quite a bit of searching and only came up with adding this:

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

This did not fix the issue. Also note that everything from Material-UI is working fine this is the only component I've encountered an issue with.

Any advice would be great.

Regards

Michael

The Range picker in the docs doesn't seem to let you select a range of dates. It simply selects one value. Here is a video. I also tried using additional keys like holding shift, CTL, etc. nothing seems to work.

here is an example

Versions

• Material-UI: Docs Version?
• React: Docs Version?
• Browser: Chrome v55.0.2883.95

The only thing preventing me to use the date picker from material-ui is the fact that the user is not capable to use keyboard to write a date.

Sometimes its just faster or more suitable to just use keyboard to select dates.

Imagine a scenario where the user has a form with a lot of TextFields, he can keep pressing tab and filling the form, but once he encounters a Date picker he needs to use the mouse to open the date picker... And if wants to select a really old date he will have a nightmare selecting the year... Its just not nearly as fast as just typing it.

Related issue mui/material-ui#5612.

On my iPhone (or if I make my browser window narrow), the DatePicker dialog does not pop up if I tap the hint text, or the date text after a date has been selected.
Since this text fills most of the available input space, I thought this was completely broken because it was unresponsive to all of my clicks until I happened to click on the far right of the field.

In order to have coherence with the TextField, the DatePicker should be able to show errorText.

Pull request mui/material-ui#1170 let us use value and onChange properties on the DatePicker component which leads me to believe that valueLink should be the next property to get working. According to @hai-cea

"the component will have to be changed explicitly hangle valueLink…which I think it should."

As far as I understood material-ui follows Material Design spec

Material-UI is a set of React components that implement Google's Material Design specification.

But as for me it lacks in following the specification in some components, especially in Table component.
https://material.google.com/components/data-tables.html#data-tables-interaction (Edit section). The specification clearly says about the edit possibility with the help of small or large edit dialogs. But using material-ui Table component it's impossible to organize something like this because cell clicks always trigger row selection.

So my proposition here is to divide concepts following Google's Material Design and make:

1. Row selection
   • on desktop: only with checkbox(additionally we can add the possibility to select row with ctrl button)
   • on mobile: with checkbox or with long press action.
2. Cell edit: click on cell.

So what do you guys think about this?

Please add a date/ Datetime picker. Unless you know of one that works well, and looks good with material.

I'm having some issues with the Time Picker Component.

1. On Android Chrome: not possible to select Hour or Minutes. Touching an hour just moves to the minute selection, hour stays at 12. Clicking any minute does nothing.

2. On Chrome OS X: hour can be selected, but not the minutes.

3. On Safari OS X: All the hours and minutes are overlaid on each other.

Problem Description

I just tried out 0.15.0-alpha.2 and found out that my TimePicker's no longer function. All TimePickers are regarded as controlled instances because the following function is incorrect:

  _isControlled() {
    return this.props.value !== null;
  },

So if value is undefined (which it is in my case because I set defaultTime) then the picker thinks it is a controlled instance.

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.7
• Browser: Chrome 49.0.2623.87

TimePacker don't react when I clicked it.
The DropDownMenu has also this problem.

Feature request

Description

I think it's ok to call dismiss function when date is changed. My case:
I have two DatePickers, when I select date from first one, it closes (autoOk prop) and then I open second picker automatically with prefilled date (based on value in first picker). If user doesn't change value in second picker, and just close it, it will trigger dismiss function. If user change date, it will trigger only handleTouchTapOk function. I think it's more logical to trigger dismiss always when open changes to false.
For now I must use same handler for onDismiss and onChange to catch this case, and I really don't like this solution.

Possible solution

before

  handleTouchTapOk = () => {
    if (this.props.onAccept && !this.refs.calendar.isSelectedDateDisabled()) {
      this.props.onAccept(this.refs.calendar.getSelectedDate());
    }

    this.setState({
      open: false,
    });
  };

after

  handleTouchTapOk = () => {
    if (this.props.onAccept && !this.refs.calendar.isSelectedDateDisabled()) {
      this.props.onAccept(this.refs.calendar.getSelectedDate());
    }

    this.dismiss();
  };

I can create PR for this.

Problem description

The TimePicker dialog is incorrect. Hours and minutes are shifted to the left. See attached screenshot.

Steps to reproduce

I upgraded from alpha-2 to 0.15.0 and besides that I upgraded from react 0.14.x to 15.0.2.

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: Chrome latest and greatest

Description

Images & references

date-picker

This is happening on OSX Chrome Version 43.0.2357.134 (64-bit)

Steps to reproduce:

• goto: http://material-ui.com/#/components/date-picker
• open up dev console
• click on the background (or at least have no input's in focus)
• press enter

You will get this error:
Uncaught TypeError: Cannot read property 'isSelectedDateDisabled' of undefined

Methods description copy-pasted from DatePicker. Description of events is missed.

The Date Picker doesn't work on an iPhone 5s at all, since the Portrait view is too tall and the landscape view is too wide for the screen.

Since many phone screens are this size or smaller, it would be nice to have a working date picker component, since it's so pretty!

[Datepicker] Button change month error in Firefox

Versions

• Material-UI: HEAD @afe10a9
• React: v0.14.4
• Browser: Firefox

Image

Need to implement start and end dates for calendars.. in other case it's hard to use them on travel sites where we need to set borders

Would be nice to have.

Problem description

Hi there! I have no idea why it so, but some elements have bad position. Is there any solution for that? I have this:

Also i have problem with datepicker https://github.com/callemall/material-ui/issues/4259 maybe it's the same problem?

Thanks for advance!

Steps to reproduce

I follow by the documentation.

Versions

• Material-UI: 0.15.0
• React: 0.14.8
• Browser: Chrome 50.0.2661.94 (64-bit)

2 improvements:

• Don't have '0' padding for single digit hours. (i.e. 1:00 pm rather than 01:00 pm) For in-use examples, see the table at the top of https://en.wikipedia.org/wiki/12-hour_clock. As the 24h clock does do this '0' padding, this difference helps people recognise the time system in use
• Don't refer to 12:00 am or 12:00 pm; instead use 12 noon or 12 midnight. NIST: "12 a.m. and 12 p.m. are ambiguous and should not be used", or the Wikipedia article.

If this makes sense, I'm happy to make a pull request.

See:
http://www.material-ui.com/v0.15.0-beta.2/#/components/date-picker
http://www.material-ui.com/v0.15.0-beta.2/#/components/time-picker

Problem Description

A white padding at the top has been introduced, see this before/after:

Same issue in date and time picker

Versions

• Material-UI: 0.15.0-beta.2
• React: 15.0.1
• Browser: Chrome 50 OSX

The datepicker is too large for mobiles and does not get centered. You cant get to the buttons, or even the last 2 weeks on an iphone 4. Even on my nexus 5 I cannot see to the buttons. It needs reducing in size and centring on the screen.

There are 2 similar things being used for positioning the dialogue which I don't see the reason for, maybe someone can explain. The container has some dynamic padding and then the actual dialogue has a translate3d based on some theme desktopKeylineIncrement. Surely this can be achieved with one or the other?

contentsWhenOpen: {
  opacity: 1,
  top: 0,
  transform: 'translate3d(0, ' + this.getSpacing().desktopKeylineIncrement + 'px, 0)'
}

var paddingTop = Math.max(((containerHeight - dialogWindowHeight) / 2) - 64, 0);

Problem description

Timepicker consider that value is controlled if this.props.value === null whereas Datepicker consider controlled if this.props.hasOwnProperty('value')

I find that Timepicker behaviour is more practical as it is possible to connect this.props.value to a potentially null value but still have the default value when value is null.

I'd like to make the datepicker behave the same as the timepicker. I'll make a PR if it sounds good to you

It would be nice to be able to change the wordings

The new date picker is great, but Material also provides specifications for a time picker.

Can this be added?

let startDatePicker = <DatePicker autoOk={true} defaultDate={startDate}
        minDate={startDate} maxDate={endDate} style={style}
        onChange={(instance, val) => {
                console.log(startDatePicker.getDate)
        }} />

it reports: getDate is undefined

ps. why use onChange(null, val), use onChange(val) is better.

Problem description

I noticed in the docs that the datepicker should go 100 years backwards and 100 years forwards by default, however in the docs and in any datepicker I make it only goes to 2013. I found the issue to be justify-content: center. This centers the flex item vertically because the flex-direction is column. For some reason overflow doesn't take into account the height before the center point of the flex item. Setting the flex-direction to row (default value) fixes this issue and I can see all the way to 1916. Unfortunately this breaks positioning of datepicker ranges that do not overflow. They are no longer vertically centered. Setting align-items: center to center non-overflowed ranges will subsequently break our original fix of overflowed ranges for the same reason that justify-content breaks it in the current implementation.

TL;DR: Flexbox centering and overflow don't work nicely.

Steps to reproduce

Look at the Simple example in the docs.

Versions

• Material-UI: 15
• React: 15
• Browser: Chrome/Firefox

Images & references

If the defaultDate props change on the DatePicker, the value on the input field stays the same. I already created a PR to fix that issue.

Hey,
I think TimePicker should have a disabled property like it is already implemented for DatePicker.

Problem description

The date display of the DatePicker component in portrait is fixed to 270, but the component width is fixed to 310.

This means that the color on the top of the date display does not reach all the way across the component.

Steps to reproduce

Create a DatePicker in an environment where box-sizing: border-box for all elements and open it.

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: Chrome 50.0.2661.94

With error:

const dateTimeFormat = new Intl.DateTimeFormat('en-AU');
<DatePicker DateTimeFormat={() => dateTimeFormat} formatDate={dateTimeFormat.format} locale="en-AU" />

Without error

<DatePicker />

I think the component is using the formatDate method everywhere and that's causing the error

The component currently does not have a method to toggle show/hide. The picker is only accessible by pressing on a textfield that the component automatically renders. I did notice that there is a date-picker-dialog component in the code but it has not been exposed yet outside of the framework. Making the dialog available would greatly improve the flexibility of the date picker API I think. Any thoughts?

My DatePicker looks like this out of the box with no style modifications:

The code used was just a simple DatePicker with no modifications:

App.js:

import React from 'react';
import MuiMixin from '../mixins/MuiMixin'
import {Paper, DatePicker} from 'material-ui';

var App = React.createClass({
  mixins: [MuiMixin],

  render() {
    return (
      <DatePicker />
    );
  }
})

export default App;

MuiMixin.js:

import React from 'react';
import mui from 'material-ui';

var ThemeManager = new mui.Styles.ThemeManager();

export default {
  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },
};

I'm using WebPack to minify/build my app. Any ideas on what's causing this visual bug?

Problem Description

This bug is hard to reproduce and only happens sometimes: when selecting a time, I get this:

TypeError: Cannot read property 'getSelectedTime' of undefined

File "webpack:///./~/material-ui/TimePicker/TimePickerDialog.js" line 68 col 1 in r.handleTouchTapOK
_this.props.onAccept(_this.refs.clock.getSelectedTime());

File "webpack:///./~/material-ui/TimePicker/Clock.js" line 111 col 1 in [anonymous]
onChangeMinutes(time);

I believe it could be because the Clock is sometimes unmounted just before it is accessed through its ref: https://github.com/callemall/material-ui/blob/a76c0889055fbc7cc854b391f915cd477f3687a8/src/TimePicker/TimePickerDialog.js#L60

Maybe calling this.dismiss(); at the end of the function would help?

Versions

• Material-UI: 0.15.0-beta.2
• React: 15.0.1
• Browser: Chrome 49 on Windows & Chrome Mobile 50 on Android

Usecase for Datepicker: Select your Date of Birth!
It explains all. How many clicks we actually needs!

I am sure that It is not a right place to add this issue for "Google material design". but just in case.

Hello,

I don't know if it's a bug or that i did something wrong, but after searching everywhere i'm not able to make those 2 components works. They simply don't show, nothing happens when i click on them and i tab doesn't focus them.

I also called theinjectTapEventPlugin(); at the beginning of my app.js

 <DatePicker
        hintText="Test"
        value={this.state.startDate}
        onChange={this.handleChange}
      />

 <TimePicker
          ref="picker12hr"
          format="ampm"
          hintText="test"
          onChange={this.handleTimeChange}
        />

OS X 10.9.5, Safari7.1.6, and Mobile Safari on iOS 9.0.2:

Can be seen on the Material-UI demo site.

I'm using

<DatePicker hintText='Starts on' container='inline' />

I got

Each child in an array or iterator should have a unique "key" prop. Check the render method

and also

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method