chingyawhao / material-ui-next-pickers Goto Github PK
View Code? Open in Web Editor NEWA material ui next datepicker, demo on
Home Page: http://chingyawhao.github.io/material-ui-pickers
License: MIT License
A material ui next datepicker, demo on
Home Page: http://chingyawhao.github.io/material-ui-pickers
License: MIT License
Hey there,
Date picker is not responsive in small screen.
To expose a className as props to parent and pass min-width
as initial
will fix the issue.
<div className={classnames(classes.input, {[classes.outlinedInput]:variant === 'outlined', [classes.filledInput]:variant === 'filled'})}>{value}</div>
}
/>```
Using v0.0.15 of this package, I'm running into the display issues demostrated in this screenshot:
from Chrome
The pickers in the screenshot were rendered using this code:
<DateFormatInput
fullWidth={false}
label="Start Date"
name="startDateInput"
onChange={this.handleStartDateChange}
value={this.state.startDate}
/>
<DateFormatInput
fullWidth={false}
label="End Date"
name="endDateInput"
onChange={this.handleEndDateChange}
value={this.state.endDate}
/>
It seems that the current height of the Input (set at 19px) is a bit too small. Manipulating it within Chrome seems to indicate that 25px would be better. The DateFormatInput control also doesn't seem honor the fullWidth prop since passing fullWidth={false}
has no effect.
In developer mode all work nice. But after doing a production build UI (on pages where I use this picker) is crushed. I use create-react-app. If I'm commenting this picker - all looks good.
Currently you do not have license listed. Is it Apache, MIT, etc?
In the date picker, when clicking on the header to move through years, the left and right icons are not working, it stays on the same page.
It can be seen even on the demo page: http://chingyawhao.github.io/material-ui-pickers
Tested in Chrome on mac.
Would it be possible to allow passing of disabled flag for the input? Right now it is not possible to disable it.
can you offer the ability to edit labels? (other language)
When using the time picker, you're not able to select the "0" minute. This makes it impossible to set the time at the start of the hour.
If change minute and after try select 0 (zero) is not possible.
How can I edit on the style of the datepicker? Can I pass a className into DateFormatInput? Thanks a lot~
I'm getting an error about classNames
not being defined.
I installed material-ui-next-pickers with yarn add material-ui-next-pickers
and used it like this:
import React, { useState } from 'react';
import { DateFormatInput } from 'material-ui-next-pickers';
const DateAttribute = props => {
const [date, setDate] = useState(null);
return <DateFormatInput value={date} onChange={setDate} />;
};
export default DateAttribute;
That seemed to be enough to cause the error.
Here are the package versions I am using:
"@material-ui/core": "^3.8.3",
"@material-ui/icons": "^3.0.2",
"@material-ui/styles": "^3.0.0-alpha.8",
"material-ui-next-pickers": "^0.0.19",
"react": "16.8.0-alpha.1",
"react-dom": "16.8.0-alpha.1"
I was able to fix it by cloning this repo and changing all instances of import * as classNames from 'classNames'
to import classNames from 'classNames
and adding "allowSyntheticDefaultImports": true
to tsconfig.json
.
I have no experience with TypeScript so I don't know what the implications of my changes are, but everything seems to be working fine for me now.
If that fix is fine, let me know and I can throw up a PR.
Icons are not loaded directly but instead imported from the overall icon library resulting in all icons being added to the final build. The approach to importing Material-ui icons should be updated across the package to avoid this.
Example:
import {Today as CalendarIcon} from '@material-ui/icons' -> Entire Icon library added to build
import Today from '@material-ui/icons/Today' -> Only adds the icons that you need to the build;
Getting a warning with the source map source path. The maps are looking for Typescript files in the /src directory but the directory is being ignored by the .npmignore
config.
Solutions:
src
from .npmignore
"inlineSourceMap": true
to tsconfig.json
So I tried this via keyboard navigation and screen reader (VoiceOver), and unfortunately it doesn't really seem to be usable. The list of the dates and hours all get called out automatically is probably what I found to be most annoying. Would be great to review this from an accessibility perspective.
As I understand, at the moment the date format for date picker is hardcoded as 'EEE, MMMM d, yyyy'. Would it be possible to pass it as prop from outside to customise the date displayed?
Maybe reuse moment.js for formatting or similar library (though it introduces a dependency).
When I have more than 1 time picker on the page, the time that gets returned is not the time that I click on. Possibly problem with how the clock ref works?
When I leave a page with a datepicker I get the following error :
Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method
../../node_modules/react/cjs/react.development.js.Component.setState | @ | react.development.js:270
-- | -- | --
| DateFormatInput._this.closeCalendar | @ | datepicker.js:72
| (anonymous) | @ | datepicker.js:105
Is this a bug ?
it's possible to open calendar only year and month?
I got this warning message: You are using a deprecated typography variant: display3
that will be removed in the next major release.
Could you update the typography name accordingly to the latest? Thanks.
The datepicker and timepicker only open when clicked on end icon. When clicked on whole form input field does not open. There is also no provision for start icon just like end icon.
please fix the issue ASAP.
Great initiative as an isolated component but it is missing some essential props to be able to use in a project context.
For example prop 'name'. Impossible to connect to labels, or useful lib as Formik. It's a shame.
The onChange event is also not bringing anything else than the value. Without taking the event as parameter it is impossible to access the context. It means then no target, which implies to create an onChange event per field with on OnChange function, or to create a wrapper component again. There again very hard to use in a real case. No way of adding generally used error and helperText props which are common in material-ui-next environment. Missing format is also a shame. Why not exposing all the props from material-ui?
By installing it here the component comes with a quiet a hand of Warnings. I'm wondering if some dependencies or not missing, probably for material-ui itself (material-ui-next is not enough in itself since you use material-ui as a base). Had for example to install @ material-ui/core. Probably others are missing to make it work.
Warning: Each child in an array or iterator should have a unique "key" prop in DateFormatInput.
Warning: Material-UI: the value provided undefined is out of range [0, 1].
clamp | @ | colorManipulator.js?6ebb:35 -- | -- | --
| fade | @ | colorManipulator.js?6ebb:202
| styles | @ | IconButton.js?5cf2:46
Warning: react-swipeable-view: one of the children provided is invalid: null.
We are expecting a valid React Element
Hi Guys,
You are doing great job. Thanks for doing this. Small request, if you could release 0.0.13 to npm then would be great.
Regards,
Kamal.
I had to add react-swipeable-views
to my package.json. just a heads up
Please could you update the component to allow one to disable the ripple on the IconButton
input type time
has step attribute
I'm getting the above error when trying to display a simple Date Component.
<DateFormatInput name='date-input' value={new Date()} onChange={this.onChangeDate}/>
Here are the version of my dependencies:
"@material-ui/core": "^4.1.0",
"@material-ui/icons": "^3.0.2",
"@material-ui/lab": "^4.0.0-alpha.15",
"@material-ui/pickers": "^3.1.0",
"material-ui-next-pickers": "0.0.20",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-scripts": "2.1.8",
},
Are there any proposed fixes?
I can't see anything about to disable dates. Suppose i want to disable all Sunday of every month. How i can do that in calendar?
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.