---
+1.0.0-alpha7 / 2015-12-12
+------------------
+
+`new` add options `disabledHours`, `disabledMinutes`, `disabledSeconds` and `hideDisabledOptions`.
+`remove` remove options `hourOptions`, `minuteOptions` and `secondOptions`.
+
1.0.0-alpha2 / 2015-12-03
------------------
-`fix` IE8 compatible.
+`fixed` IE8 compatible.
`new` add test users.
0.7.1 / 2015-11-20
------------------
-`fix` change value to null when clear input content to remove the react warning.
+`fixed` change value to null when clear input content to remove the react warning.
0.7.0 / 2015-11-20
------------------
0.5.6 / 2015-11-19
------------------
-`fix` use another method to change time and fix the bug about value.getTime().
+`fixed` use another method to change time and fix the bug about value.getTime().
0.5.4 / 2015-11-19
------------------
0.3.3 / 2015-11-17
------------------
-`fix` fix some bugs.
+`fixed` fix some bugs.
0.3.0 / 2015-11-17
------------------
```
import TimePicker from 'rc-time-picker';
-import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<TimePicker />, container);
```
### TimePicker
-| Name | Type | Default | Description |
-|----------------|----------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------|
-| prefixCls | String | | prefixCls of this component |
-| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | |
-| disabled | Boolean | false | whether picker is disabled |
-| open | Boolean | false | current open state of picker. controlled prop |
-| defaultValue | GregorianCalendar | null | default initial value |
-| value | GregorianCalendar | null | current value |
-| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale |
-| placeholder | String | '' | time input's placeholder |
-| showHour | Boolean | whether show hour | |
-| showSecond | Boolean | whether show second | |
-| formatter | String|GregorianCalendarFormatter | | |
-| hourOptions | Array<Number> | hour options | |
-| minuteOptions | Array<Number> | minute options | |
-| secondOptions | Array<Number> | second options | |
-| onChange | Function | null | called when select a different value |
-| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
-| transitionName | String | '' | |
+| Name | Type | Default | Description |
+|-------------------------|-----------------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------|
+| prefixCls | String | | prefixCls of this component |
+| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | |
+| disabled | Boolean | false | whether picker is disabled |
+| open | Boolean | false | current open state of picker. controlled prop |
+| defaultValue | GregorianCalendar | null | default initial value |
+| value | GregorianCalendar | null | current value |
+| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale |
+| placeholder | String | '' | time input's placeholder |
+| showHour | Boolean | whether show hour | |
+| showSecond | Boolean | whether show second | |
+| formatter | String|GregorianCalendarFormatter | | |
+| disabledHours | Array<Number> | disabled hour options | |
+| disabledMinutes | Array<Number> | disabled minute options | |
+| disabledSeconds | Array<Number> | disabled second options | |
+| hideDisabledOptions | Boolean | whether hide disabled options | |
+| onChange | Function | null | called when select a different value |
+| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
+| transitionName | String | '' | |
License
-------
}
}
- &-option-selected {
+ li&-option-selected {
background: #edfaff;
color: #2db7f5;
}
+
+ li&-option-disabled {
+ color: #bfbfbf;
+ &:hover {
+ background: transparent;
+ cursor: not-allowed;
+ }
+ }
}
console.log(value && formatter.format(value));
}
+const options = {
+ disabledHours() {
+ return [0, 2, 21];
+ },
+ disabledMinutes(h) {
+ return h === 22 ? [0, 3, 31] : [];
+ },
+ disabledSeconds(h, m) {
+ return [];
+ },
+};
+
ReactDom.render(
<TimePicker formatter={formatter} locale={TimePickerLocale}
showSecond={showSecond}
defaultValue={now}
className="xxx"
- onChange={onChange}/>,
+ onChange={onChange}
+ disabledHours={[0, 2, 21]}
+ disabledMinutes={[0, 2, 21]}
+ disabledSeconds={[]}
+ hideDisabledOptions={true} />,
document.getElementById('__react-content')
);
{
"name": "rc-time-picker",
- "version": "1.0.0-alpha6",
+ "version": "1.0.0-alpha7",
"description": "React TimePicker",
"keywords": [
"react",
style: PropTypes.object,
className: PropTypes.string,
showSecond: PropTypes.bool,
- hourOptions: PropTypes.array,
- minuteOptions: PropTypes.array,
- secondOptions: PropTypes.array,
+ disabledHours: PropTypes.array,
+ disabledMinutes: PropTypes.array,
+ disabledSeconds: PropTypes.array,
+ hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onOpen: PropTypes.func,
onClose: PropTypes.func,
allowEmpty: true,
showHour: true,
showSecond: true,
+ disabledHours: null,
+ disabledMinutes: null,
+ disabledSeconds: null,
+ hideDisabledOptions: false,
placement: 'bottomLeft',
onChange: noop,
onOpen: noop,
},
getPanelElement() {
- const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
+ const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
let calendarLocale;
if (value) {
calendarLocale = value.locale;
allowEmpty={allowEmpty}
formatter={this.getFormatter()}
placeholder={placeholder}
- hourOptions={hourOptions}
- minuteOptions={minuteOptions}
- secondOptions={secondOptions}
+ disabledHours={disabledHours}
+ disabledMinutes={disabledMinutes}
+ disabledSeconds={disabledSeconds}
+ hideDisabledOptions={hideDisabledOptions}
/>
);
},
import Select from './Select';
import GregorianCalendar from 'gregorian-calendar';
-const formatOption = (option) => {
+const formatOption = (option, disabledOptions) => {
+ let value = `${option}`;
if (option < 10) {
- return `0${option}`;
+ value = `0${option}`;
}
- return `${option}`;
+
+ let disabled = false;
+ if (disabledOptions.indexOf(option) >= 0) {
+ disabled = true;
+ }
+
+ return {
+ value,
+ disabled,
+ };
};
const Combobox = React.createClass({
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
+ disabledHours: PropTypes.array,
+ disabledMinutes: PropTypes.array,
+ disabledSeconds: PropTypes.array,
onCurrentSelectPanelChange: PropTypes.func,
},
},
getHourSelect(hour) {
- const { prefixCls, hourOptions, showHour } = this.props;
+ const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
if (!showHour) {
return null;
}
return (
<Select
prefixCls={prefixCls}
- options={hourOptions.map(option => formatOption(option))}
+ options={hourOptions.map(option => formatOption(option, disabledHours))}
selectedIndex={hourOptions.indexOf(hour)}
type="hour"
onSelect={this.onItemChange}
},
getMinuteSelect(minute) {
- const { prefixCls, minuteOptions } = this.props;
+ const { prefixCls, minuteOptions, disabledMinutes } = this.props;
return (
<Select
prefixCls={prefixCls}
- options={minuteOptions.map(option => formatOption(option))}
+ options={minuteOptions.map(option => formatOption(option, disabledMinutes))}
selectedIndex={minuteOptions.indexOf(minute)}
type="minute"
onSelect={this.onItemChange}
},
getSecondSelect(second) {
- const { prefixCls, secondOptions, showSecond } = this.props;
+ const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props;
if (!showSecond) {
return null;
}
return (
<Select
prefixCls={prefixCls}
- options={secondOptions.map(option => formatOption(option))}
+ options={secondOptions.map(option => formatOption(option, disabledSeconds))}
selectedIndex={secondOptions.indexOf(second)}
type="second"
onSelect={this.onItemChange}
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
+ disabledHours: PropTypes.array,
+ disabledMinutes: PropTypes.array,
+ disabledSeconds: PropTypes.array,
onChange: PropTypes.func,
onClear: PropTypes.func,
onEsc: PropTypes.func,
str,
});
let value = null;
- const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props;
+ const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty} = this.props;
if (str) {
const originalValue = this.props.value;
}
if (value) {
+ // if time value not allowed, response warning.
if (
hourOptions.indexOf(value.getHourOfDay()) < 0 ||
minuteOptions.indexOf(value.getMinutes()) < 0 ||
return;
}
+ // if time value is disabled, response warning.
+ if (
+ disabledHours.indexOf(value.getHourOfDay()) >= 0 ||
+ disabledMinutes.indexOf(value.getMinutes()) >= 0 ||
+ disabledSeconds.indexOf(value.getSeconds()) >= 0
+ ) {
+ this.setState({
+ invalid: true,
+ });
+ return;
+ }
+
if (originalValue && value) {
if (
originalValue.getHourOfDay() !== value.getHourOfDay() ||
function noop() {
}
-function generateOptions(length) {
+function generateOptions(length, disabledOptions, hideDisabledOptions) {
const arr = [];
- for (let i = 0; i < length; i++) {
- arr.push(i);
+ for (let value = 0; value < length; value++) {
+ if ((disabledOptions && disabledOptions.indexOf(value) < 0) || !hideDisabledOptions) {
+ arr.push(value);
+ }
}
return arr;
}
placeholder: PropTypes.string,
gregorianCalendarLocale: PropTypes.object,
formatter: PropTypes.object,
- hourOptions: PropTypes.array,
- minuteOptions: PropTypes.array,
- secondOptions: PropTypes.array,
+ disabledHours: PropTypes.array,
+ disabledMinutes: PropTypes.array,
+ disabledSeconds: PropTypes.array,
+ hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onEsc: PropTypes.func,
allowEmpty: PropTypes.bool,
getDefaultProps() {
return {
- hourOptions: generateOptions(24),
- minuteOptions: generateOptions(60),
- secondOptions: generateOptions(60),
+ disabledHours: null,
+ disabledMinutes: null,
+ disabledSeconds: null,
+ hideDisabledOptions: false,
onChange: noop,
onClear: noop,
};
},
render() {
- const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
+ const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
const value = this.state.value;
+ const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions);
+ const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions);
+ const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions);
+
return (
<div className={`${prefixCls}-inner`}>
<Header
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
+ disabledHours={disabledHours}
+ disabledMinutes={disabledMinutes}
+ disabledSeconds={disabledSeconds}
onChange={this.onChange}
onClear={this.onClear}
allowEmpty={allowEmpty}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
+ disabledHours={disabledHours}
+ disabledMinutes={disabledMinutes}
+ disabledSeconds={disabledSeconds}
onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
/>
</div>
getOptions() {
const { options, selectedIndex, prefixCls } = this.props;
return options.map((item, index) => {
- const selected = selectedIndex === index;
const cls = classnames({
- [`${prefixCls}-select-option-selected`]: selected,
+ [`${prefixCls}-select-option-selected`]: selectedIndex === index,
+ [`${prefixCls}-select-option-disabled`]: item.disabled,
});
- return <li className={cls} key={index} onClick={this.onSelect.bind(this, +item)}>{item}</li>;
+ let onclick = null;
+ if (!item.disabled) {
+ onclick = this.onSelect.bind(this, +item.value);
+ }
+ return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>;
});
},
projects / github / fretlink / time-picker.git / commitdiff
