mui / material-ui-pickers Goto Github PK
View Code? Open in Web Editor NEWDate & Time pickers for Material UI (support from v1 to v4)
Home Page: https://github.com/mui/material-ui-pickers/issues/2157
License: MIT License
Date & Time pickers for Material UI (support from v1 to v4)
Home Page: https://github.com/mui/material-ui-pickers/issues/2157
License: MIT License
Hey there,
Is it possible just to expose the Calendar widget alone instead of the entire Date Picker?
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".
When user open selector, often it is required to cancel action by clicking to the overlay or by pressing the Escape.
Thank you.
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,
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?
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.
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:
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!
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.
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).
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)
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?
Like described in the title
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. โ
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?
Can you please expose the calendar control? I would like to show that as a non-modal.
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 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.
is there is a way to provide an icon for the input something like <InputAdornment />
in material UI input
Hi,
I am facing an issue to open the pickers by clicking on a external button, is that currently possible ?
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.
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.
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.
The DateTimePicker and others should have the ability to be styled at the component root level.
i want to display different language ,how to set the locale?
Would be nice that these values were received by props so, if I'using other locale the modal buttons should be consistent
This is really awesome work, thank you for putting in the time to build this.
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.
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.
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
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 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!
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!
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
Hi! It seems iOS Safari doesn't support Object.values() and we need to add a polyfill.
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();
}
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
Hello !
Details to reproduce this issue:
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 !
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
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)
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
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
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?
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.
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>
)
}
React threw an error when using endAdorment
on the InputProps
prop;
endAdornment should display, without an error from react.
<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'))}
/>
InputProps somewhere is being spread "..." into a dom element, before the endAdornment props is removed
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:
in the calendar you need to select a year twice to see the right month
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.