I see there is a closed issue on this but it does not solve the doubt,

Any idea if we can make it work with AM/PM system?

Regards!

When I add the datepicker and pass it a default value or value I get this error:

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at deleteInWithCleanUp

Has anyone seen this before?

What is the best konvention if I need to style the component and currently I am using .scss?

Or is the inline style with react the better choice?

When timepicker's popup is open inside a div container and if that external container is scrolled, the timpicker's popup does not position itself according to the scroll.
Can it be made similar to https://github.com/Hacker0x01/react-datepicker ?
The pop-up which is opened is tethered component which positions itself when outer container is scrolled ?

Or, if I'm missing something and this is already possible, please guide accordingly. So far, I'm only allowed to pick the placement, but the position remains "static" when containing container is scrolled.

https://codesandbox.io/s/6lol2kz3v3

When the modal is scrolled, the timepicker just stays on the same position instead of getting scrolled together with the other components.

Hi there,

Been implementing the plugin but ran into an issue... i can "open" the timepicker by passing state to the open parameter using open={this.state.openTimepicker} (got a component block with an icon, extra padding etc that should trigger it)

however, when i close the timepicker, the "openTimepicker" state remains true so when ever a state change happens anywhere else in the app, the open property is enforced again and the timepicker will pop up again... there for i would need access to onBlur callback where i can set the openTimepicker to false again... i think it would be fairly useful in many different scenarious to implement this functionality

Hi, Can the value and defaultValue props can be set up without using moment.js but pure javascript?

I am not sure if this is even an issue you can solve, but when I install the component using yarn, I do not get the assets, but when I install it using NPM it works without a problem.

It hangs. Can some one take a look?

Fixed the issue by overwriting the following properties:

.rc-time-picker-panel {
	.rc-time-picker-panel-select {
		max-height: 144px;
		overflow-y: auto;

		ul {
			max-height: initial;
		}
	}
}

I have many time pickers on page, and seems that there is no way to pass attributes or some params to onchange event. In first argument it returns value, if we do
this.onDateChange = this.onDateChange.bind(this);
we cant access changed item ID or attrs. How to determine which time picker is changed?

I have tried to increase the size of input, but without luck. Can we make component a little bit more modular.

I used timepicker inner my modal window which to have scroll yourself. And eventualy picker container fixes relative window how i find out.
sorry for my bad eng)

Not sure what is wrong.
Here are lines i have it in my component

import 'rc-time-picker/assets/index.css';
import TimePicker from 'rc-time-picker';

And in the render()

<TimePicker style={{ width: 100 }}
          defaultValue={moment()}
          showSecond={false} />

And here is what i see

When i click on it, it doesn't open. I tried to debug, and the props onOpen is pointing to noop() empty function. Not sure if i have to provide the onOpen() function

I sure there is something stupid on my side, but being struggling for long time, help pls!

https://codesandbox.io/s/14k8o6jzx3
When used with the React Modal component with animation, the time picker doesn't position itself correctly.

建议去掉 hourOptions minuteOptions secondOptions，感觉实际业务需求应该不是这样子。改为限制只能选择某个时间段里的时间，如图：

注意：min-time max-time都设置或只设置其中一项，以及与 datepicker 共用一个时间时可能的问题。

I am getting the bellow mentioned warning from React after giving default value prop to TimePicker.

warning.js:33 Warning: Failed prop type: You provided a valueprop to a form field without anonChangehandler. This will render a read-only field. If the field should be mutable usedefaultValue. Otherwise, set either onChangeorreadOnly.

Here is how I am passing the value

defaultValue={this.props.defaultValue || moment()}

When I press tab and the time-picker is open, it tabs over to another component instead of tabbing through and letting me use the arrow keys to select a time. I also can't seem to type in any numbers?

I have a requirement to focus the input field on the first click (when the panel is shown). Currently, the first click launches the panel and a subsequent click is required to put focus into the input. Could a prop be added for this? Thanks.

There is a weird bug in the time picker. When I give some formatted moment object to default prop, the on change handler returns the default value not the changed value. For example if the default value is moment(this.props.defaultValue).format('YYYY-MM-DD') and we changed the date in timepicker, it changes the display date in time picker but returns the default time provided .

defaultValue={moment(this.props.defaultValue).format('YYYY-MM-DD')} onChange = value => { console.log(value) }

I was going to try to fork and make a pull request, but changed my mind after the styles were located in .less files (I'll have to do some reading into what those are, it looks interesting).

I tried using the time select and after disabling the seconds display, wasn't really happy with the blank white column on the far right side of the dropdown. Here is my css fix if you think it belongs in the project feel free it implement. I'm currently just overwriting this part of the css file. It should work regardless of whether you are using the seconds or not.

.rc-time-picker-panel-combobox{
  display: table;
  width: 100%;
}

.rc-time-picker-panel-select{
  /* float: left; */
  /* width: 56px; */
  display: table-cell;
}

I think this made a few other styles useless so it may require cleanup. In its current state, it handles the width differences for both hours/minutes/seconds and hours/minutes.

https://codesandbox.io/s/14k8o6jzx3
It shows correctly on desktop, even with window minimized.
But on mobile it looks like this: https://i.imgur.com/NQObP8o.png
Any idea what's wrong?

I have a weird bug.

I integrated the time picker component into my application, it works fine except when the onChange callback alter the store. It "kinda freeze" and the input content is never updated.

When the onChange callback does not alter my store, all is fine. The component cannot suffer a higher component rendering?

Thanks for your help

Best

Hello, awesome small plugin. :)

Why are you using gregorian-calendar instead of moment.js?

Java's Gregorian calendar is one of the worst time libraries...

I have a case where, I have to open time picker panel when user came to on that field by tab navigation. Below code works fine when user go by pressing tab. However, If we focus on field using mouse, this code result in error TypeError: _this2.refs.input is undefined and time picker panel blinks and close.

setOpen = ({ open }) => {
  this.setState({ open });
}

onFocus = () => {
  this.setOpen({open: true});
}

If I wrap this.setOpen({open: true}); inside setTimeout, it is working.

Returning a number between 0 and 12 disables the hour both for AM and PM. It's impossible to filter out only one of them. Hours 12+ are ignored.

Hi,

I am trying to replicate the 12 hour picker example into my project. I have everything installed and the project runs fine. However, when I try to import the css given in that example:
import 'rc-time-picker/assets/index.css';

...I get the following error:

VM33435:1 Uncaught Error: Module parse failed: /path/to/project/node_modules/rc-time-picker/assets/index.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .rc-time-picker { | display: inline-block; | box-sizing: border-box; at eval (eval at <anonymous> (bundle.js:13
Has anyone else seen this issue and solved it? I am running react": "^15.6.1.

Thank you

打开 demo，点开 Time�Picker，在下面选择时间那几栏随便移动几下鼠标就可以看到这情况了。

今天刚升级的 Chorme，Version 47.0.2526.80 (64-bit)。

If we tab out from picker input, focus does not go to next available input in form. Same for shift+tab.

When use12Hours is true, it shows the following:

It would be more natural for 12 hour readers if it looked like the following and the hour selector went from 12am to 11pm.

My suggestion would be to piggy back on the showHour prop and if it's a string, use that format to display the 3 am. With this, a developer could remove the use12Hours prop and it would do exactly what I showed in the second screenshot.

Hi! Thank you for this amazing plugin.
If i set formatter in formatter={new DateTimeFormat("hh:mm")}, it still show time in 24 hours format.
How can i change this?

min: 22:29
max: 23:59

<TimePicker {...options} />


cons options = {
allowHour(){
  return [22,23];
}  ,
allowMinutes(h){
  return h===22?[]:[] 
},
allowSeconds(h, m) {
  return 
},
}

cant call this.state or setState onside onChange function, this has time-picker component value....

这个页面 http://react-component.github.io/time-picker/examples/pick-time.html 在 IE8 下报错。

SCRIPT5028: Function.prototype.apply: 缺少 Array 或 arguments 对象 

另外 placements.js 这个模块是做什么的？

Hi,
In Time Picker always showing am & pm in english language.
I added below code.
moment.locale('fr');
but still am & pm showing in english.
Please tell me how to convert am & pm in to locale / other languages.

Thanks in adnavance
Kranthi

Hi, I want to enable only 1/4 of hours (10:00, 10:15, 10:30, 10:45) but right now I have a list of 56 disabled minutes and 4 enabled, which is far from the best user experience
Would it be possible to hide the disabled hours/minutes/... ?

thanks!

I am currently working on a small personal project and I really like the time-picker.
But is there on option to specify custom minute intervals or could it be possible to implement something like this ?
For example I only want to show 15-minute-steps. Like 15,30,45 and thats it. I know that there is the disabledMinutes option but this only disables other minutes, I want to completely remove those.

I using rc-time-picker 2.4.1

I get an warning when webpack building.

WARNING in ./node_modules/rc-animate/es/AnimateChild.js
76:11-34 "export 'isCssAnimationSupported' was not found in 'css-animation'
    at HarmonyImportSpecifierDependency._getErrors (/Users/loup/Workspace/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (/Users/loup/Workspace/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/loup/Workspace/node_modules/webpack/lib/Compilation.js:677:24)
    at Compilation.finish (/Users/loup/Workspace/node_modules/webpack/lib/Compilation.js:535:9)
    at applyPluginsParallel.err (/Users/loup/Workspace/node_modules/webpack/lib/Compiler.js:512:17)
    at /Users/loup/Workspace/node_modules/webpack/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/Users/loup/Workspace/node_modules/webpack/lib/Compilation.js:481:11)
    at processModuleDependencies.err (/Users/loup/Workspace/node_modules/webpack/lib/Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

It seems when you click the time picker it takes a half second to get it's left/top values so it shows up in the top left corner of the browser before it's placed in the right spot.

Hi there, I am trying to implement disabledHours but cannot figure it out if use12Hours is enabled. If I try to provide any values greater than 12 it will not disable any PM hour options.

Is there a way to remove the functionality for the time picker not to go back to the previously selected time when error time has been entered? On hover or onBlur, component goes back to the previous time selected. Is there a way to avoid this behavior?

When I wrap time picker using connect binding in the redux react library i am no longer able to set default props on the object within the wrapper .

Normally if I wanted to create a time that hid all the seconds

let MyTimePicker = () => (
  <TimePicker
   showSecond={false}
  />
);
MyTimePicker = connect(mapStateToProps,mapDispatchToProps)(TimePicker);

And then in the map function I would control the disabled hours like this

const mapStateToProps = (
  state,
  ownProps
) => {
  return {
   disabledHours:() => {
      ownProps.determineDisabledHours(state)
  };
}

But this isn't the case, now all props i want to pass need to be passed in through the map.

const mapStateToProps = (
  state,
  ownProps
) => {
  return {
   showSecond:false,
  hideDisabledOptions:true,
}

This isn't the largest inconvenience in the world, but it is puzzling because I've never had an issue like this before.

Would you happen to know if the time picker is written in an immutable way?

How can I close the popup automatically when minutes is selected?
Is there a callback available for this?

When the disabled prop is passed, the time picker is correctly disabled but there is no styling.

Do you have any plans to support a maximum or minimum time or maybe a range of available times to select from?

I am working in the rail industry and they have this funny concept of each day having 30 hours. Is there any way to have the hours go to 30 hours?

I was thinking of hacking in Panel.js this line :

var hourOptions = generateOptions(30, disabledHourOptions, hideDisabledOptions);

It seems to work, but the value being shown in the textfield afterwards still shows it as 24 hours.