teamwertarbyte / material-ui-time-picker Goto Github PK

Hello I try to integrate your TimeInput and I have got this error:
./node_modules/material-ui-time-picker/lib/TimeInput.js
Module not found: Can't resolve '@material-ui/core/Button' in '..\node_modules\material-ui-time-picker\lib'

import TimeInput from 'material-ui-time-picker'

render () {
const props = omit(this.props, [
'className',
'id',
])
return (

React 16.4.1

Hi. Looks like #19 and #20 got merged in to the repo but a new version was not released to NPM.

Tried to tag in PR #19 to ask about this but I think it was lost to notifs.

Can we get this released? Thanks! 👍

How to reproduce:

1. Use the 12-hour clock, select some AM time
2. Select 12 in the hour selection
3. See how AM changes to PM

I didn't see that the whole time, and now I can't unsee it. 😕

I would like to suggest a possible feature for the TimePicker. I would like to have the option to disable hours and minutes like in Material-UI DatePicker with "minDate" and "maxDate" parameters. It would be useful to set the available time range.

For example, <TimePicker from={'9:50'} to={'16:33'} />

Nice timepicker!

If the value is empty the current time is displayed. Is it possible to show an empty input field instead of the current time? I tried to make the value "", null or undefined, but it always results in the current time instead of an empty field.

Hey there, I've noticed that this component doesn't let me show an error the way you normally would with an Input component.

You should be able to easily fix this (as well as other issues some people might be having) by including {...this.props} or something like that in the Input element.

It would be very useful to have a prop (something like input or control) that would allow the user to provide a component to render as the input element.

So I saw that TimeInput is using

onRequestClose

property of Material-UI Dialog

Setting disabled prop to true on the TimeInput component should disable the input.

First of all thanks for the good work.

I have a minor issue when using this in a web app on iOS, though. When the time picker is open and you swipe on the clock to select a time, the main content of the page behind the picker still sticks to the finger and scrolls with it. Everything still works, but it looks confusing ;) This does not happen on android, or at least not in the android SDK emulator.

• When you click a lot in the minute picker (That is, repeatedly and quickly click at a lot of different positions) the animation sometimes skips, the minute hand just appears at the final position without animating from it's current position.

  I think the correct behavior should be to take the current position of the minute hand (wherever that is, stationery or in the middle of another animation due to a previous click) and use that as starting position (stop the old animation if necessary) and then just go from there.

• The second thing I noticed is that whenever you click at a number, say 5 or 30 or whatever (in both the minute and hour pickers) the font color of the number changes to white immediately on the click. So, for a few 100s of milliseconds, we see white text on the light grey-ish background, which doesn't look very good.

  Here's an idea, change the color to white just before the hand reaches that number. I mean as the big blue circle is about to overlap with the number (as over 25 below), that is when the text should change to white. The change of color should coincide with the end of the hand's animation, or maybe a little bit before.

Let me know if you don't quite get what I mean and I'll make a video.

Any plans to update this?
Its currently incompatible with the rc version of Mui
Mainly, imports have changed
I could help with this, but if wouldn't get merged I'll just fork it instead.

hi, i tried add the dependences
npm i -s material-ui-pickers
npm i @date-io/date-fns [email protected]
// or
npm i @date-io/moment moment
// or
npm i -s @date-io/luxon luxon
and still the error persist

From here, I'm using the same code as in the example:

const { default: Dialog, DialogActions } = require('material-ui/Dialog');
const Button = require('material-ui/Button').default;

<div>
  <Button
    onClick={() => setState({ open: true })}
  >
    Open time picker
  </Button>
  <Dialog
    maxWidth='xs'
    open={state.open}
  >
    <TimePicker mode='24h' />
    <DialogActions>
      <Button onClick={() => setState({ open: false })} color='primary'>
        Cancel
      </Button>
      <Button onClick={() => setState({ open: false })} color='primary'>
        Ok
      </Button>
    </DialogActions>
  </Dialog>
</div>

But for some reason the dialog I'm getting is

And only when I click the time 11:00am do I get:

How do I just get to the second image directly?

TimePicker has its own value state instead of the value prop.

When the onChange function execute the time.start not change but the value in the component still change no matter what

Reproduce Behavior: CodeSandBox reproduce

<TimePicker value={time.start} mode="24h" onChange={onPickTimeStart} />

Steps to reproduce:

Open up the time picker, select, say 5 minutes. Then select like 55 minutes or something, the minute hand goes all the way around the clock along the clockwise route when it should be just a small hop away by going anti-clockwise.

Taking the short route would look much more subtle and pleasing from a UX standpoint, right now you can't even feel the ease-in-out interpolation, it's very in-your-face and kinda distracting and not very material-y 😄

I get this behaviour also with material-ui and material-ui-pickers and I see that all share the same base code.

Debugging I get that event TimePicker.handleClockChangeDone is not called by first Time Picker, but for the others is being called when dialog is opened.

I tried to change the color of the clock of timeInput (material-ui-time-picker) for the material-ui, but it's not changing.

My code is :

<TimeInput
        style ={heure}
        mode='24h'
        value={heureDebut}
        onChange={this.handleheureDChange}
        autoOk={true} 
        cancelLabel=""
        okLabel=""
        placeholder=""
        disableUnderline={true}  
        endAdornment={
            <InputAdornment position="end" style={{opacity:'0.4', marginLeft:'92px'}}>
            <IconButton><i style={{fontSize:'18px'}} className="zmdi zmdi-alarm" /></IconButton>
            </InputAdornment>
        }
/>

When I run it, I get :

But I want the color blue will be changed to #0E6EB8

How can I change it?

<TimeInput mode="12h"  />

I'm on the latest chrome, 1920p, Windows.

I use the timepicker for create events, so when I change the value of start/end time, it creates a new Date object instead of using the given date object value of my event.

For example, let assume some things:

• Today is Wednesday
• startTime of my new event is Sat Jan 19 2019 15:00:00 GMT -0600
• endTime of my new event is Sat Jan 19 2019 15:15:00 GMT -0600

so if I want to change the time of my endTime, to 15:30:00 it returns Wed Jan 16 2019 15:30:00 GMT -0600 and I want to modify only hours and minutes, not the day.

To prevent that, I changed the next code in TimePicker.js

  propagateChange = () => {
    if (this.props.onChange != null) {
      const date = new Date()
      date.setHours(this.state.hours)
      date.setMinutes(this.state.minutes)
      date.setSeconds(0)
      date.setMilliseconds(0)
      this.props.onChange(date)
    }
  }

to

  propagateChange = () => {
    if (this.props.onChange != null) {
      const date = this.props.value // <-- Here
      date.setHours(this.state.hours)
      date.setMinutes(this.state.minutes)
      date.setSeconds(0)
      date.setMilliseconds(0)
      this.props.onChange(date)
    }
  }

It would be nice if the team can check this issue or maybe it's just me, but if not please make a new commit with the changes.