i want to display different language ,how to set the locale?

Dear Friends,

Do You have any plane to using moment-jalali for Gregorian ?
if answer is no i wanna take that part with your help
https://github.com/soroushm/material-ui-pickers-jalali
BR,

I'm using the material ui pickers in a server-rendered NextJs application. The date time picker works fine on the first load, but when I refresh the page it gives me the following error.

Unexpected token export
/path/to/my/project/node_modules/material-ui-pickers/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default as DatePicker } from './DatePicker/DatePickerWrapper';
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:537:28)
    at Module._compile (/path/to/my/project/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)

What could be cause for this error?

Hello !

Details to reproduce this issue:

• Component : Datepicker
• Browser : Chrome 63.0.3239.84 / Firefox 57.0.1
• OS : Ubuntu
• material-ui version : 1.0.0-beta.21
• material-ui-pickers : 1.0.0-beta.7
• react : 15.6.2

Component Code :

/**
 * DatePicker
 *
 * Map Material DatePicker component to Redux-form Field component
 */

import React from 'react';
import PropTypes from 'prop-types';

import { DatePicker } from 'material-ui-pickers';

import FormControl from './FormControl';

const CustomDatePicker = props => {
  const { id, input: { value, onChange } } = props;
  return (
    <FormControl>
      <DatePicker
        id={id}
        value={value}
        onChange={onChange}
        invalidLabel="DD/MM/YYYY"
        format="DD/MM/YYYY"
        disableFuture
      />
    </FormControl>
  );
};

CustomDatePicker.propTypes = {
  input: PropTypes.shape({
    onChange: PropTypes.func.isRequired,
  }).isRequired,
};

export default CustomDatePicker;

I use this component with Redux-form.

Observed Behavior :

agenda isn't refreshed when a past year has been chosen.
If I select a day in agenda it stays in 2017. But instead, if I directly click on OK button, it keeps expected year (here, 2010)

There surely must be something wront with my setup but I can't find out what.

Thanks for this very promising package !

Hello, I'm trying to make the DatePicker (or any of the components in this awesome library) fill the width of the parent container. Is there a way to do this?

Would be nice that these values were received by props so, if I'using other locale the modal buttons should be consistent

Hi there,

Thanks for putting this together!

I'm currently using the DatePicker component and it's working pretty great, but what I've noticed popping up in my console is a bunch of warnings such as:

Warning: Failed prop type: Invalid prop `leftArrowIcon` of type `object` supplied to `DatePickerWrapper`, expected `string`.
    in DatePickerWrapper

I'm passing in icons to the DatePicker from the material-ui-icons package like so:

import LeftArrowIcon from "material-ui-icons/KeyboardArrowLeft";

<DatePicker
    ...
    leftArrowIcon={<LeftArrowIcon />}
/>

As mentioned, it works perfectly fine and the icons are showing up nicely. I tried passing in the icons as just object, like {LeftArrowIcon}, but that doesn't work. So I think it may just be something wrong with your prop validation.

Is there a way of altering the theme for specific elements, I understand that the background color of the date pickers toolbar is using theme.palette.primary[500], if the theme is light, but if I wanted to use a different color how would I go about doing this (aside from altering the palettes primary color)?

Hello,

at the moment, this component doesn't work in Firefox. Picker opens on mousedown, but closes immediately on mouseup.

Browser: Firefox 56
OS: Linux

Like described in the title

Hey there,

Is it possible just to expose the Calendar widget alone instead of the entire Date Picker?

Would you approve a PR that added a handler that could attach extra classes to each rendered day? Something like:

dayClassName(date) {
  return classnames({
    [classes.highlight]: isWeekend(date),
  })
}

<DatePicker dayClassName={dayClassName} />

This function would be ran when each day's className was calculated.

Also, would you support a PR that added a DayProps prop that would be spread onto each day's IconButton?

hi, I get this warning when use the library.

Unknown prop date on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I use this component as a component inside redux-form

MyForm.tsx
<Field name="DOB" component={DatePickerGroup} />

DatePickerGroup.tsx

import * as React from 'react';
import { findDOMNode } from 'react-dom';
import { DatePicker } from 'material-ui-pickers';
import * as moment from 'moment';
import { WrappedFieldProps } from 'redux-form';

export namespace DatePickerGroup {
    export interface AllProps extends OwnProps, WrappedFieldProps {
        
    }
    export interface OwnProps {
        id?: string,
        label?: string,
        className?: string,
        shrink?: boolean,
        fullWidth?: boolean,
        margin?: string,
        disabled?: boolean,
        readOnly?: boolean
    }
    export interface State {
        
    }
}

class DatePickerGroup extends React.Component<DatePickerGroup.AllProps, DatePickerGroup.State> {
    constructor(props) {
        super(props);
    }

    private inputControl: HTMLInputElement;

    handleDateChange = (date: moment.Moment) => {
        this.props.input.onChange(date.format("YYYY-MM-DD"));
    }

    render() {
        const {
            input, id, label, className, shrink, fullWidth, margin, disabled, readOnly,
            meta: { touched, error }
        } = this.props
        const selectedDate = moment(input.value, "YYYY-MM-DD").isValid() ? moment(input.value, "YYYY-MM-DD") : moment(new Date());

        return (
            <div>
                <DatePicker
                    format="DD/MM/YYYY"
                    value={selectedDate}
                    onChange={this.handleDateChange}
                />
            </div>
        )
    }
}

export default DatePickerGroup;

I use:
react: 15.6.2
typescript: 2.5.3,
material-ui: 1.0.0-beta.18
redux-form: 7.0.4

Currently everywhere in your code you have moment(value). It will cause issues if I don't want to use local time. The solution would be to add isUTC props and change moment() calls into moment.UTC() if isUTC is set to true. E.g. here

getValidDateOrCurrent = () => {
    const date = moment(this.props.value);

    return date.isValid() ? date : moment();
  }

is there is a way to provide an icon for the input something like <InputAdornment /> in material UI input

Hello! Thanks for the package, it's a huge time saver.

It would be a really nice feature if this package leveraged use of a .nvmrc config.

Out of the box, I currently get 7 failed tests, a handful of errors, and warnings because of a different node version. I'd be happy to submit a PR with the change. What are your thoughts?

You library looks promising... but this is what I get *(using the latest MUI beta)

Thanks!

It would be cool if we could forward placeholder and label to the textfield inside DateTextField.
I'm not quite sure if this is the bast api, but I'd suggest a new renderInput prop which accepts a () => XML function.

I'd be happy to do the pr :) (not sure when though)

Dear,

How can i disable specific date? like 'shouldDisableDate={disableWeekends}' in material-ui v0
http://www.material-ui.com/#/components/date-picker

i try to use renderDay but onClick still working 🗡️ and i cant disable date any solution?

  renderDay(date, selectedDate, dayInCurrentMonth) {
    return (
      <IconButton
        disabled>
        <span> {jMoment(date).format('jD')} </span>
      </IconButton>
    )
  }

I love the way , on the "Date & Time picker" how the date , the hour and then the minute options seamlessly translate on the UI. I would be happy to see a Date&Time range Picker that would aid it picking a Timestamp range without using two separate pickers. Somethig similar to this but WITH TIME included

http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=default&full=0&down=1&left=1&pa
nelRight=0

Let me know what you think. Thanks !

In Firefox, the clock hands (both, for hours and for minutes) follow the mouse cursor when hovering over the clock face, which breaks the minute selection.

I just did a test on IE 11 and I got hit with Object doesn't support property or method 'values' inside Clock and DateTimePicker. It looks like .values is part of ES7, is not supported in IE 11, and Create React App does not Polyfill it.

Can you move to using keys instead? Thanks!

Hello, I've forked your library to create a PR but I can't preview the changes I wanted to implement. Trying to run the demo I get this error:

Module not found: Can't resolve 'material-ui-pickers' in 'D:\projects\material-ui-pickers\docs\src\Demo'

I also tried using symlinks but with no luck, webpack import the components as they are a static asset.

How can I run the demo locally?

Can you please expose the calendar control? I would like to show that as a non-modal.

In my case I would like to have a hook to change label formatting after date selection. For example to use moment method .fromNow() or someone else.
How I see you have an inner date object that store the selected date, and it passed to onchange method. Maybe it is possible to store a second object for the view task.
Thank you for the great package!

in the calendar you need to select a year twice to see the right month

Hi! It seems iOS Safari doesn't support Object.values() and we need to add a polyfill.

Warning: React does not recognize the minDate prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase mindate instead. If you accidentally passed it from a parent component, remove it from the DOM element.

https://github.com/dmtrKovalenko/material-ui-pickers/blob/2f3b0f41debf414957ee8beb9f9086ec329b0613/src/DatePicker/CalendarHeader.jsx#L16

Reading the docs, it seems you have to pass in an icon object now from material-ui-icons?

When using this in my current project I am getting:

High Five

This is really awesome work, thank you for putting in the time to build this.

Feature Request

I have a use case where I have a list of dates that I need to enter into several pickers. I would like to be able to copy-paste or manually type the dates in. It appears to me that this component only allows entry via the calendar.

The obvious solution from a user standpoint would be to have a prop that tells the component to accept text entry and then to open the picker interface on clicking an adornment.

PR

I would be happy to submit a PR for this if this is something you'd be willing to accept. We just need to iron out exactly how it should behave first.

When user open selector, often it is required to cancel action by clicking to the overlay or by pressing the Escape.
Thank you.

At the moment, it seems that <DateTimePicker> doesn't support prop disabled, like other material-ui inputs: https://material-ui-next.com/demos/text-fields/#inputs.

I believe the 'OK' action button should be to the right of the 'Cancel' button per the material-ui guidelines.

https://material.io/guidelines/components/pickers.html#pickers-date-pickers

BTW this library is awesome. Please let me know if I can help or if you'd prefer me to submit a PR.

Thanks!

The DateTimePicker and others should have the ability to be styled at the component root level.

Hi, I'm willing to implement jalaali calendar system for your date-picker. I'll make it opt-in to prevent extra bytes for those who don't need it.

However, before spending time I would like to know if you ( and the community ) is open to the idea.

Some background: Iran uses a different calendar system. With different years, months and days. The conversion is straightforward but calendar integration is complex.

I have done this before for the 0.x version of material-ui. I solved it by passing a utils object that handles the calculations and formatting. I can do the same here, Are you ok with it?

Related #55

Is it possible to set some styles to the date and time representation?

As you can see there is no margin between the date and the time.

material-ui supports typescript. I think we should do the same. I'm willing to write and maintain the typings. Are you open to the idea? @dmtrKovalenko

What happened?

React threw an error when using endAdorment on the InputProps prop;

What should happen

endAdornment should display, without an error from react.

Code to replicate

<Picker
  fullWidth
  value={moment(props.value, 'MM-DD-YYYY')}
  format="DD/MM/YYYY"
  leftArrowIcon={<KeyboardArrowLeft />}
  rightArrowIcon={<KeyboardArrowRight />}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <Event />
      </InputAdornment>
    ),
  }}
  onChange={a => props.onChange(a.format('MM-DD-YYYY'))}
/>

Ways to fix

InputProps somewhere is being spread "..." into a dom element, before the endAdornment props is removed

Hay, we'd like to use this package, but 24h format support would be a crucial feature for us.
I've seen it's already planned in the readme. Not sure if i'll find time the coming days, but is there already a wip-branch somewhere to contribute to? Eventually one could look at https://github.com/TeamWertarbyte/material-ui-time-picker/blob/master/src/Clock.js#L218 how they solved it.

Best Regards,
Lukas

We are not supporting react 15 since beta.8.
So if you are interested on support, please mention that in this issue, and we will back support in the next release :)
Thank you.

For me, the current date isn't aligned with the day in datepicker.
Seems like today is thursday the 15. of november :) on locale('de')
I guess it's due to a localized getDayOfWeek, but non localized getDaysOfWeek (the week is starting on sunday instead of monday).

I'll work on a fix

Is there anyway to access or pass in your own input component to the DatePicker? I'd like to add an Input adornment "calendar icon".

Hi again.

Thank you that you have the automatically change the view to date selection after we choose the year, without extra click on "OK" button.

but unfortunately, the year value doesn't change, it only change the header value.

the scenario is:

1. open calendar dialog
2. click on year Header
3. Choose different year
4. Screen will automatically go back to date selection
5. Choose the date.

Hello,

first of all, thanks for these cool pickers!

I'm working on a personal project listing some data with @devexpress/dx-react-grid
and trying to use the date picker as a filter and edit widget for a date column

when I use it for the filter, I would like to be able to clear the value selected previously
for that I would think it would be best to have a Clear button next to Cancel and OK conditioned by a prop, plus having a callback called onClear, similar to onChange, would do the trick

I'd like to have your opinion on this, as I'm new to react

thanks,
Reszli

Seems like there is no way to change the language of the displayed Month in DatePicker. Further there is no option to set the locale of moment to display a better date format for specific countries.

Hello I wanted to know if there is a way to add an icon next to the date shown in the DatePicker just like the Custom DateTimePicker shown in the demo.

Hi again,

So I'm setting minDate on the DatePicker component using moment, like so:

<DatePicker
   ...
   minDate={new Moment().toDate()}
/>

Which, when I log that to console, shows:

Tue Nov 07 2017 13:22:28 GMT+0200 (SAST)

But the DatePicker component does not allow me to select the minimum date of Tue Nov 07 2017. It only allows me to pick from November 8th upwards.

Hi,

I am facing an issue to open the pickers by clicking on a external button, is that currently possible ?

Hi there,

First off, thanks very much for creating such a great project. I have had no problems at all with the normal DatePicker, and I've really enjoyed working with this.

1. Timepicker - The "clock-style" time picker UI displays perfectly. But it looks like there might be a typo in the quick usage example as the onChange handler method is onChange={this.handleDateChange} when it should be onChange={this.handleTimeChange} When I try to console log the time value in my code it shows "undefined". (Full example in my code below). The time value also doesn't change in the text field (like it does for the DatePicker and DateTimePicker).

2. DateTimePicker - The formatting / layout / css is not displaying correctly. See screenshot below:

I appreciate that it is more challenging to debug React projects than simpler html/css/vanilla js so I will try to provide as much relevant code / setup info as possible. I'm hoping that it could be something as trivial as the React version or the CSS file used (I followed the docs on this).

package.json

{
  "name": "material-ui-pickers-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack-dev-server --content-base dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "material-ui": "^1.0.0-beta.17",
    "material-ui-pickers": "^1.0.0-alpha.8"
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
      <div id='app'></div>
    <script src="bundle.js"></script>
  </body>
</html>

app.js (entry point and main container component - v. simple and small React app)

import React from 'react';
import ReactDOM from 'react-dom';
import ToggleSwitch from './ToggleSwitch';
import ODDatePicker from './ODDatePicker';

const Main = () => (

  <div style={{marginLeft: '30px'}}>
    
    <ToggleSwitch />    
    <ODDatePicker />

  </div>

  );

const app = document.getElementById('app')
ReactDOM.render(<Main />, app)

ODDatePicker.js

import React from 'react';
// import * as materialIcons from 'material-ui-icons';
import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers';

class ODDatePicker extends React.Component {

  constructor(props) {
    super(props);   
    this.state = { 
      selectedDate: new Date(), 
      selectedTime: new Date()
    };

    this.handleDateChange = this.handleDateChange.bind(this);
    this.handleTimeChange = this.handleTimeChange.bind(this);
    this.handleDateTimeChange = this.handleDateTimeChange.bind(this);
  }

  // N.B: date parameter looks like custom for specific use with this library
  handleDateChange(date) {
    this.setState({ selectedDate: date })
    // console.log( date._d );
     console.log(date);
  }

  handleTimeChange(time) {
    this.setState({ selectedTime: time })
     console.log(time);
  }

  handleDateTimeChange(dateTime) {
    this.setState({ selectedDateTime: dateTime })
    console.log(dateTime);
  }

  render() {
    const { selectedDate, selectedTime, selectedDateTime } = this.state

    return (
      <div>
        
        <DatePicker
          style={{marginTop: '20px'}}
          format={'ddd, MMM DD'}
          value={selectedDate}
          onChange={this.handleDateChange}
        />

        <TimePicker
          style={{marginTop: '30px'}}
          value={selectedTime}
          onChange={this.handleTimeChange}
        />

         <DateTimePicker
          style={{marginTop: '30px'}}
          value={selectedDateTime}
          onChange={this.handleDateTimeChange}
        />         

      </div>
    )
  }

}

export default ODDatePicker;

Thanks v. much in advance! (Let me know if you need any more info)

We have moved moment to the peer deps, and now I am considering about replacing moment at all with date-fns. 😎

So this just issue to consider if there are many people that using moment with this project?
How many people using date-fns?

I am just need to realize which way would be more convenient. ❓