chingyawhao / material-ui-next-pickers Goto Github PK

Please could you update the component to allow one to disable the ripple on the IconButton

I had to add react-swipeable-views to my package.json. just a heads up

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.

If change minute and after try select 0 (zero) is not possible.

Check: https://gyazo.com/82868de95802d39606e9d7ec3ae20a8b

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>
            }
              />```

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.

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.

can you offer the ability to edit labels? (other language)

I'm getting the above error when trying to display a simple Date Component.

<DateFormatInput name='date-input' value={new Date()} onChange={this.onChangeDate}/>

More details of error

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?

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.

I'm imported your project and I really liked it.
The only thing I can see is that DateFormatInput doesn't have the right padding like other material ui fields.

Maybe its a issue and maybe I'm wrong?

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.

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

How can I edit on the style of the datepicker? Can I pass a className into DateFormatInput? Thanks a lot~

it's possible to open calendar only year and month?

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.

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.

input type time has step attribute

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.

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.

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:

1. Remove src from .npmignore
2. Add "inlineSourceMap": true to tsconfig.json

Currently you do not have license listed. Is it Apache, MIT, etc?

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 ?

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).

Would it be possible to allow passing of disabled flag for the input? Right now it is not possible to disable it.

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?