ecmadao/react-times

A time picker react component, no jquery-rely

react-times's Issues

json-loader not needed in webpack@4

I got the following error when following the instructions from the README.md:

ERROR in ./node_modules/moment-timezone/data/packed/latest.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.

It turns out that webpack@4 automatically loads json files and hence the json-loader is not needed (I found out here webpack-contrib/file-loader#259). The solution was to ignore the json-loader instructions from the README.md and things were working as expected. I suggest this should be mentioned in the README

12-hour time not working with defaultTime specified in 24-hour format

When you specify a time in 24-hour format, it shows up in the 12-hour clock in 24-hour format instead of 12-hour format. I would expect that a time specified in 24-hour format would be reformatted to 12-hour format when the dev uses 12-hour mode. 🤔 So, 13:15 would (I think) be reformatted to 1:15PM. Currently, the picker shows 13:15 AM, which might be possible, if you're Doc Brown or Marty McFly. 😜

Here's a screenshot showing the issue in the online demo:

Notes: Bug label, in progress 🚀

onTimeChange not works when meridiem changes

When we change meridiem in timeMode="12" onTimeChange callback is not called. When we change time in the same 12 hours mode value passed to onTimeChange callback without meridiem. Hope it will be fixed asap. Thanks

any idea how to use it in redux-form?

I have tried to use it with redux-form but it simply does not reflect the selected values in the redux-form state. it would be great if there was an example of using it with redux-form.

Question: full time range

Would it be possible to add so the it is not only a 5min snap? so that I could e.g. select a time of e.g. 13:37?

Timepicker automatically close when update state inside `onTimeChange` event.

Picker automatically close when I update state inside onTimeChange if I comment setState() it is not update time, below is my code please have a look.

JS:

//default state.
this.state = {start: {time: '11:01', meridiem: 'AM'}};

onTimeChange({hour, minute, meridiem}) {
    console.log("hour", hour)
    console.log("minute", minute)
    console.log("meridiem", meridiem)
    this.setState({start: {time: `${hour}:${minute}`, meridiem}})
  }

JSX:

<TimePicker timeMode="12" 
  time={this.state.start.time} meridiem={this.state.start.meridiem}  
  closeOnOutsideClick={false} onTimeChange={this.onTimeChange.bind(this)} />

request for feature: move to selecting minute just after choosing hour

I think it would be great if user would be moved to selecting minutes after choosing hour. For me it took a couple of seconds to find out I have to click on the minutes on top and then actually pick the minutes.
at-least we can have it as a configuration like "focused". what do you think?

not updating hour & minute when changing them

hi

the demo worked, but when I click on hour and minute to select desired time, the current written time above is not updated.
I use creat-react-app, do I need to configure weback json? If so, let me tell you that I don't have that file in my create-react-app. Please help.

timeMode 12 does not seems to work

When I set the timeMode to 12 in the classic mode I can't get the dropdown to show the time options in 12 hour mode, only in 24

If not set explicitly hours default to 00

In a field without any time already saved open react-times widget.

• It shows current time (hours and minutes)
• Click on the minutes and set them. Do not set hours to anything.
  After the time is saved to the field the hours are set to 00 rather than the current hours.

Smells like a bug, feels like a bug ;)

Question. Timepicker with seconds

Hi, how i can add HH:mm:ss picker?

bug: Local timezone set to 'America/Indianapolis' causes error

Hi,

I'm using latest react-time, moment and moment-timezone and getting the following issue:

tz.guess() is returning America/Indianapolis (I'm not sure how they chose it, but they were on a mac so I assume that uses more precise IANA timezones). However if you execute getTzForName('America/Indianapolis') you actually get an undefined because it is not in the mapping? This causes an error in the getValidTimeData function, since it tries to get the zoneName from the result of that function.

Looking at this closer ... it looks like the mapping actually has "America/Indiana/Indianapolis" not "America/Indianapolis". It looks like both actually link to a different tz, which in turn links to something else.

I can't work out a way to 'normalize' the timezone unfortunately... Maybe the best way to deal with it is to make sure we always return a valid value in the guessUserTz function: return getTzForName(userTz) || { city: fallbackName(userTz), zoneName: userTz, zoneAbbr: (0, _momentTimezone2.default)().tz(userTz).zoneAbbr() }. This might cause the dropdown to not have something selected, but I think that is better than react-times not working at all.

增加class

可以在OutsideClickHandler的render里面那个div加一个class吗 这样的话就可以对那个时钟做更多的样式布局

Deprecated dependency on react-addons-shallow-compare

According to https://www.npmjs.com/package/react-addons-shallow-compare react-addons-shallow-compare has been deprecated in favor of React.PureComponent. When do you think you'll be able to refactor react-times to use it?
Thanks in advance.

Cannot read property zoneName of undefined

On some windows 10 computers with non english language this error is thrown in Timezone/index.js. I think timezone guessing utility cannot detect it.

Center screen on mobile

How about something like this on mobile (small viewport)?

Add more props for picker

This is nice picker, but I hope you can consider to fix somethings:

1. Add props (open=true/false) to show picker on render without click button
2. Remove time on picker_pointer_drag when dragging, it's keeps old value on dragging seem make no sense
3. TwelveHoursMode

• picker not close after select time, should has a ok button to close(user'll dont know click around to close)
• minute_pointer_drag should only drag to minute (now it can be drag to point_wrapper)

4. Allow custom AM|PM in other languages

drag problem

          <div style={{'height':'2000px'}}></div>
          <TimePicker
            onFocusChange={this.onFocusChange.bind(this)}
            onHourChange={this.onHourChange.bind(this)}
            onMinuteChange={this.onMinuteChange.bind(this)}
            onTimeChange={this.onTimeChange.bind(this)}
            onTimeQuantumChange={this.onTimeQuantumChange.bind(this)}
          />

If I do the code above, dragging became really hard.
That's because you are not updating the this.originX and this.originY after browser scrolled automatically.
The problem is more obvious on Safari and IE than chrome.

onFocusChange not called when timepicker popup closed.

onFocusChange never called, when we open or close popup

autoMode with 12 hour timeMode

Is autoMode intended to work with 12 hour timeMode or is it only supposed to work with 24 hour timeMode? It would be great to have that as an option for both as well as some documentation around the property.

Selecting an AM will redirect the datepicker view to a PM for 24h timeMode.

I am using create-react-app as my development template. It has json-loader and i've imported everything as per the guide. onTimeChange, it calls a function to set the time to the state, which then feeds back into the TimePicker to via the time prop to update the view.

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

    render() {
        const { time } = this.state;

        return (
            <div className="form-group">
                <TimePicker
                    theme="classic"
                    time={time}
                    timeMode="24"
                    onTimeChange={this.handleTimeChange.bind(this)} />
            </div>
        );
    }

The problem comes in when I select the time, such as 1:00. I've logged what i get back from the onTimeChange method to compare the results between the view and the console.

and here is me selecting 13:00

both examples change the date picker time to 13:00, i'm just confused as to why it does it on the first one?

Does not work with latest version of react?

The simplest example is not updating time:

import React, { Component } from 'react';
import TimePicker from 'react-times';

import 'react-times/css/material/default.css';

export default class DatePicker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time: '01:45'
        };
        console.log(this.state);
    }

    handleTimeChange = time => {
        const { hour, minute } = time;
        console.log(hour, minute);
       this.setState(() => ({ time: `${hour}:${minute}` }));
        console.log(this.state);
    };

    render() {
        const { label, name, parentClass } = this.props;
        let { required } = this.props;
        const { time } = this.state;
        console.log(time);
        if (required) {
            required = <span className="form__required">* (required)</span>;
        }

        return (
            <div className={parentClass}>
                <label htmlFor={name}>
                    {label}
                    {required}
                </label>

                <TimePicker time={time} onTimeChange={e => this.handleTimeChange(e)} />
            </div>
        );
    }
}

Looking at the console, when I change hours, I do see that state get hours changed, but when I change a minutes, I see that state got the old hours. Component is not rerendering.

/node_modules/react-times/lib/components/OutsideClickHandler.js:23:113)

Hi,
I am using React-times for one of my project.

"react-times": "^1.4.6"

node 8.10.0
npm -v 3.5.2

I am getting error.

TypeError: Super expression must either be null or a function, not undefined at _inherits (/var/www/plexusmd-js-web-frontend/node_modules/react-times/lib/components/OutsideClickHandler.js:23:113) at /var/www/plexusmd-js-web-frontend/node_modules/react-times/lib/components/OutsideClickHandler.js:36:3 at Object.<anonymous> (/var/www/plexusmd-js-web-frontend/node_modules/react-times/lib/components/OutsideClickHandler.js:96:2) at Module._compile (module.js:652:30) at Module._extensions..js (module.js:663:10) at require.extensions.(anonymous function) (/var/www/plexusmd-js-web-frontend/node_modules/babel-register/lib/node.js:152:7) at Object._module2.default._extensions.(anonymous function) [as .js] (/var/www/plexusmd-js-web-frontend/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:260:68) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Module._load (module.js:497:3)

My code goes like this I have startTime and timeQuantum in state.

<TimePicker focused time={(this.state.startTime) ? this.state.startTime : '08:00'} theme="material" colorPalette="dark" timeMode="12" onTimeChange={this.handleTimeChange} timeQuantum={(this.state.timeQuantum) ? this.state.timeQuantum : 'PM'} onTimeQuantumChange={this.timeQuantumChange} />

Can any one help me out.

bug: custom minute setup of minute page

24 -> 12, see pic below:

Error on demo link

On clicking demo link its giving below error. Operated in Indianapolis timezone

Cannot read property 'zoneName' of undefined
TypeError: Cannot read property 'zoneName' of undefined
    at Object.getValidTimeData [as time] (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:175568)
    at Object.<anonymous> (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:837811)
    at __webpack_require__ (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:247)
    at Object.<anonymous> (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:1295541)
    at __webpack_require__ (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:247)
    at Object.<anonymous> (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:1288464)
    at __webpack_require__ (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:247)
    at Object.<anonymous> (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:1273080)
    at __webpack_require__ (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:247)
    at Object.<anonymous> (https://ecmadao.github.io/react-times/static/preview.2a9e6974fe5caf864c3a.bundle.js:1:191828)

24-hour pane issue with hour "24"

I think it's a little bit confusing. because 24-hour mode actually should start from "0" to "23". so I guess the pane should be updated. see diff here

Update code to use latest react-transition-group v2

Hi,

do you plan on upgrading dependency to latest react-transition-group v2 ?

Than you very much in advance,
Ivo

Malfunction on pointer selection.

Sometimes component allows a selection of:

• 60 on the minutes pointer when dragging.
• 24 on the hours pointer when dragging.

Shouldn't meridiem change also call onTimeChange?

Using the timepicker in a redux form field, I'm needing to same the value in an object with time and meridiem keys and call input.onChange() for time and meridiem separately. It would be much less of a hustle to also call onTimeChange when meridiem is changed.

drag problem when page is scrolled

Hi,
there's a problem of drag'n drop when page is scrolled.
I looked at the file drag.js, and don't understand why you add scroll in the object returned (scroll is already added in the pageY property).
When I comment like this, it works fine :

return { x: xPos /* + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft)*/, y: yPos /* + Math.max(document.documentElement.scrollTop, document.body.scrollTop)*/ };

Timezone support

Story: As a user, I want to select a timezone so that the time I choose has the correct context.

Implementation: A feature flag ( { includeTimezone: true } or similar ), which would "turn on" the timezone feature, resulting in a link below the clock face to choose the timezone. Clicking this link will load a typeahead component that will help users select a timezone based on fuzzy search of IANA timezone data.

Notes: In progress! 🤓 🚀

PickerPoint position issue

When using React-Times as controlled component and updating time form outside the setStep function is not beeing called while time does. This is cousing weird result. When we open picker after updating time the hour in picker is ok but in place of previous one.

Disabled component

Is it possible to disable component?

Set minuteStep for classic theme

It would be great if there were a way to set a time more granular than the current 30-minute-intervals listed when using the classic theme. For example, I want user's to be able to select 11:00, 11:10, 11:20, 11:30, 11:40, 11:50, 12:00... etc

One option would be to use the minuteStep prop to calculate the available times.

Another option would be to allow the user to supply an array of the available time options.

Limit the time for the classic theme

Limit the options for the input time for example:

Only show between 6:00 to 13:00 options

Two time pickers on one page

Is this possible, I don't want to attempt to implement this and then realize it isn't feasible.

12:00 AM and 12:30AM should be 12:00 PM and 12:30PM respectively, in time list

Hii,
The list of time is showing 12.00 am 12.30am instead of 12.00pm and 12.30pm.
below is the screenshot.

Kindly solve this issue as soon as possible.

Thanks

not working on Server Sider Rendering

cannot manage to get it working on SSR build, the local dev version works

Double triggering onTimeChange in the repeated selection of the same hour

Good afternoon, like your watch, but it's impossible to work with them because of double triggering onTimeChange at the repeated choice of the hour, as before, I would be very grateful if you could solve this problem. P.S only mobile version

TypeError: Cannot read property 'split' of undefined

I just import TimePicker after importing moment like this.

import moment from 'moment'; 
import TimePicker from 'react-times'

And it shows this error.

moment-timezone.js:37 Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
    at Object.eval (moment-timezone.js:37)

In moment-timezone, the error is in the following line momentVersion = moment.version.split('.'),

Does anyone have any idea what did I do wrong? Thanks.

Focus to the default time when opening the timepicker.

How can I set the focus to default time when opening the timepicker

 onTimeChange = options => {
        const {
            hour,
            minute,
          } = options;

        console.log(hour);
        console.log(minute);
    }

    render(){
        return (
            <div>
               <TimePicker 
                    theme="classic"
                    time="17:00"
                    onTimeChange={this.onTimeChange}
                    />
            </div>
        )
    }

Above is my code. What I want is when opening the timepicker, it should be focused on 17.00 . This code block sets the time as 17.00, but when opening the time picker, it focused on starting point ( 00.00 ). How can I set this ?

Time zone issue causing hour and minutes to be off

Hi,

Having an issue with time-zone (using 2.2.2).
If TZ = Asia/Kuala_Lumpur the time will always be off by 30minutes.
Example (just outline):

const tz = moment.tz.guess();
const t = moment();
console.log(moment.tz(t,tz).format("HH:mm"));
<TimePicker
  timeZone={tz}
  time={t.format("HH:mm")}
  timeFormatter={this.formatTime}
/>

formatTime(timeObject) {
  // time object is off by 30 minutes
}

Set the machine to use Asia/Kuala_Lumpur as the TZ and the picker is off by 30 minutes.
Using 'material' as rendering.

My complete setup of timepicker is:

    <TimePicker
      {...this.props}          
      focused={focused}
      meridiem={meridiem}
      onFocusChange={this.onFocusChange}
      onHourChange={this.onHourChange}
      onMeridiemChange={this.onMeridiemChange}
      onMinuteChange={this.onMinuteChange}
      onTimeChange={this.onTimeChange}
      timeFormatter={this.formatTime}
      timezone={tz}
      showTimezone={false}
      time={moment(this.props.time).format("HH:mm")}
      trigger={this.trigger}
      useTz={true}
      theme='material'
    />

Also when setting showTimezone={true} react bails out.
warning.js?8a56:36 Warning: Failed prop type: Invalid prop children supplied to CSSTransitionGroupChild, expected a ReactNode.
in CSSTransitionGroupChild (created by TransitionGroup)
in TransitionGroup (created by CSSTransitionGroup)
in CSSTransitionGroup (created by Timezone)
in div (created by Timezone)
in Timezone (created by TwentyFourHoursMode)
in div (created by TwentyFourHoursMode)
in TwentyFourHoursMode (created by MaterialTheme)
in div (created by MaterialTheme)
in MaterialTheme (created by TimePicker)
in div (created by OutsideClickHandler)
in OutsideClickHandler (created by TimePicker)
in div (created by TimePicker)
in TimePicker (created by TimePickerWrapper)

Screenshot (correct time is the OS clock in upper right corner):

Br
Fredrik

Chrome 57 Time Pick Failure

After updating to Chrome 57 the component no longer functions with any method handlers. When changing times, change handlers do not fire. Current time picker setup still functions in Safari and Firefox, as well as Chrome 56.

System is not defined

After webpack 4, it seems System.import is deprecated, which results in this issue

Move moment and moment-timezone to peerDependency

Don't depend on moment and moment-timezone in the lib, let the user depend on them as their dependencies.

Similar to react-dates does (https://github.com/airbnb/react-dates/blob/master/package.json)

Update to React 16?

Hi,
I'd really like to use react-times in our project, but it's not functioning properly on React 16. Are you planning an update to React 16 soon?

thanks

A time format props

#58

Maybe can add a new props like timeFormatter, or something like this, it can receive a string or a function. Then we can render time ui style by using this props, like timeFormatter={'HH:MM'} or timeFormatter={'HH : MM'} or even timeFormatter={(hour, minute) =>hour&minute}

Missing dependency

react-transition-group/CSSTransitionGroup should be move from devDependencies to dependencies as it's required in lib/components/Timezone/index.js

[Storybook] example for default time not working

Hi there,

playing with knob for Default TimePicker > with default time doesn't update time in picker.
There is no state update depending on updated props in TimePickerWrapper.js

Meridiem not internationalized consistently

When you choose a language with cool writing 😎 the meridiem shows up properly in the trigger component but not the timepicker itself.

Here's a screenshot showing the issue in the online demo: