add timepicker component

9 years ago · bfb4342c0c
16 changed files with 361 additions and 0 deletions
--- a/components/timepicker/demo/basic.md
+++ b/components/timepicker/demo/basic.md
@ -0,0 +1,16 @@
+基本
+====
+
+-	order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <TimePicker defaultValue="12:08:23" />
+, document.getElementById('components-timepicker-demo-basic'));
+````
--- a/components/timepicker/demo/disabled.md
+++ b/components/timepicker/demo/disabled.md
@ -0,0 +1,16 @@
+禁用
+====
+
+-	order: 4
+
+禁用时间选择。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <TimePicker defaultValue="12:08:23" disabled />
+, document.getElementById('components-timepicker-demo-disabled'));
+````
--- a/components/timepicker/demo/special-minutes.md
+++ b/components/timepicker/demo/special-minutes.md
@ -0,0 +1,16 @@
+特定选项
+====
+
+-	order: 3
+
+分钟只提供特定的选择，同时可以通过 `hourOptions` 和 `secondOptions` 对小时和秒进行特殊的限定。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <TimePicker defaultValue="12:30:23" format="HH:mm" minuteOptions={[0, 30]} />
+, document.getElementById('components-timepicker-demo-special-minutes'));
+````
--- a/components/timepicker/demo/without-seconds.md
+++ b/components/timepicker/demo/without-seconds.md
@ -0,0 +1,16 @@
+不展示秒
+====
+
+-	order: 2
+
+不展示秒，也不允许选择。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <TimePicker defaultValue="12:08:23" format="HH:mm" />
+, document.getElementById('components-timepicker-demo-without-seconds'));
+````
--- a/components/timepicker/index.jsx
+++ b/components/timepicker/index.jsx
@ -0,0 +1,72 @@
+import React from 'react';
+
+import DateTimeFormat from 'gregorian-calendar-format';
+
+import TimePicker from 'rc-time-picker/lib/TimePicker';
+import TimePanel from 'rc-time-picker/lib/TimePanel';
+
+// import defaultLocale from './locale';
+import TimePickerLocale from 'rc-time-picker/lib/locale/zh_CN';
+
+const AntTimePicker = React.createClass({
+
+  getDefaultProps() {
+    return {
+      format: 'HH:mm:ss',
+      placeholder: '请选择时间',
+      onChange() {},  // onChange 可用于 Validator
+      locale: {},
+      align: {
+        offset: [0, -8],
+      },
+      open: false,
+      disabled: false,
+      hourOptions: undefined,
+      minuteOptions: undefined,
+      secondOptions: undefined,
+    };
+  },
+
+  render() {
+    const { defaultValue, format, placeholder, align, disabled, hourOptions, minuteOptions, secondOptions } = this.props;
+    const prefixCls = 'ant-timepicker';
+    const formatter = new DateTimeFormat(format);
+
+    let showValue = undefined;
+    if (defaultValue) {
+      showValue = formatter.parse(defaultValue, {
+        locale: defaultValue.locale,
+        obeyCount: true,
+      });
+    }
+
+    const timePanel = (
+      <TimePanel
+        prefixCls={prefixCls}
+        defaultValue={showValue}
+        locale={TimePickerLocale}
+        formatter={formatter}
+        hourOptions={hourOptions}
+        minuteOptions={minuteOptions}
+        secondOptions={secondOptions}
+      />
+    );
+    return (
+      <TimePicker prefixCls={prefixCls} panel={timePanel} align={align} disabled={disabled} value={showValue}>
+        {
+          ({value}) => {
+            return (
+              <span>
+                <input className={`${prefixCls}-picker-input ant-input`} type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} />
+                <span className={`${prefixCls}-picker-icon`} />
+              </span>
+            );
+          }
+        }
+      </TimePicker>
+    );
+  }
+
+});
+
+export default AntTimePicker;
--- a/components/timepicker/index.md
+++ b/components/timepicker/index.md
@ -0,0 +1,33 @@
+TimePicker
+==========
+
+-	category: Components
+-	chinese: 时间选择框
+-	type: 表单
+
+---
+
+输入或选择时间的控件。
+
+何时使用
+--------
+
+当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
+
+API
+---
+
+```html
+<TimePicker value="13:30:56" />
+```
+
+| 参数          | 说明                                                          | 类型     | 默认值                                                          |
+|---------------|---------------------------------------------------------------|----------|-----------------------------------------------------------------|
+| defaultValue  | 默认时间                                                      | string   | 无                                                              |
+| format        | 展示的时间格式                                                | string   | "HH:mm:ss"、"HH:mm"、"mm:ss"                                                      |
+| disabled      | 禁用                                                          | bool     | false                                                           |
+| hourOptions   | 特定可选择的小时 | array | 0 到 24 组成的数组 |
+| minuteOptions   | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
+| secondOptions   | 特定可选择的秒 | array | 0 到 60 组成的数组 |
+
+<style> .code-box-demo .ant-timepicker-picker { margin: 0 12px 12px 0; }</style>
--- a/components/timepicker/locale.js
+++ b/components/timepicker/locale.js
@ -0,0 +1,12 @@
+import objectAssign from 'object-assign';
+import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN';
+import CalendarLocale from 'rc-time-picker/lib/locale/zh_CN';
+
+// 统一合并为完整的 Locale
+let locale = objectAssign({}, GregorianCalendarLocale);
+locale.lang = objectAssign({}, CalendarLocale);
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;
--- a/index.js
+++ b/index.js
@ -59,6 +59,7 @@ const antd = {
  Form: require('./components/form').Form,
  Input: require('./components/form').Input,
  Calendar: require('./components/calendar'),
+  TimePicker: require('./components/timepicker'),
 };

 antd.version = require('./package.json').version;
--- a/package.json
+++ b/package.json
@ -57,6 +57,7 @@
    "rc-switch": "~1.3.1",
    "rc-table": "~3.6.1",
    "rc-tabs": "~5.5.0",
+    "rc-time-picker": "^0.2.0",
    "rc-tooltip": "~3.2.0",
    "rc-tree": "~0.19.0",
    "rc-trigger": "~1.0.6",
--- a/style/components/index.less
+++ b/style/components/index.less
@ -36,3 +36,4 @@
@import "timeline";
@import "spin";
@import "calendar";
+@import "timepicker";
--- a/style/components/timepicker.less
+++ b/style/components/timepicker.less
@ -0,0 +1,15 @@
+@timepicker-prefix-cls: ant-timepicker;
+
+.@{timepicker-prefix-cls} {
+  display: inline;
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@import "timepicker/Picker";
+@import "timepicker/TimePanel";
+@import "timepicker/Header";
+@import "timepicker/Combobox";
+@import "timepicker/Select";
--- a/style/components/timepicker/Combobox.less
+++ b/style/components/timepicker/Combobox.less
@ -0,0 +1,4 @@
+.@{timepicker-prefix-cls} {
+  &-combobox {
+  }
+}
--- a/style/components/timepicker/Header.less
+++ b/style/components/timepicker/Header.less
@ -0,0 +1,54 @@
+.@{timepicker-prefix-cls} {
+  &-input {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    cursor: auto;
+    line-height: 1.5;
+    outline: 0;
+
+    &-wrap {
+      box-sizing: border-box;
+      position: relative;
+      padding: 6px;
+      border-bottom: 1px solid #e9e9e9;
+    }
+
+    &-invalid {
+      border-color: red;
+    }
+  }
+
+  &-clear-btn {
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 6px;
+    margin: 0;
+  }
+
+  &-clear-btn:after {
+    content: "\e631";
+    font-family: "anticon";
+    font-size: 12px;
+    color: #aaa;
+    display: inline-block;
+    line-height: 1;
+    width: 20px;
+    transition: color 0.3s ease;
+  }
+
+  &-clear-btn:hover:after {
+    color: #666;
+  }
+}
+
+.narrow .@{timepicker-prefix-cls}-input-wrap {
+  max-width: 111px;
+}
--- a/style/components/timepicker/Picker.less
+++ b/style/components/timepicker/Picker.less
@ -0,0 +1,38 @@
+.@{timepicker-prefix-cls}-picker {
+  position: relative;
+  display: inline-block;
+  outline: none;
+  font-size: @font-size-base;
+  transition: opacity 0.3s ease;
+
+  &-input {
+    outline: none;
+    width: 100px;
+  }
+
+  &-open {
+    opacity: 0;
+  }
+
+  &-icon {
+    position: absolute;
+    user-select: none;
+    .transition(all .3s @ease-in-out);
+    width: 12px;
+    height: 12px;
+    line-height: 12px;
+    right: 8px;
+    color: #999;
+    top: 50%;
+    margin-top: -6px;
+    &:after {
+      content: "\e642";
+      font-family: "anticon";
+      font-size: 12px;
+      color: #999;
+      display: inline-block;
+      line-height: 1;
+      vertical-align: bottom;
+    }
+  }
+}
--- a/style/components/timepicker/Select.less
+++ b/style/components/timepicker/Select.less
@ -0,0 +1,50 @@
+.@{timepicker-prefix-cls}-select {
+  float: left;
+  overflow-y:auto;
+  font-size: 12px;
+  border: 1px solid #e9e9e9;
+  border-width: 0 1px;
+  margin-left: -1px;
+  box-sizing: border-box;
+  width: 56px;
+
+  &:first-child {
+    border-left: 0;
+    margin-left: 0;
+  }
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  ul {
+    list-style: none;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-height: 144px;
+  }
+
+  li {
+    list-style: none;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0 0 0 16px;
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+
+    &.selected {
+      background: #edfaff;
+      color: #2db7f5;
+    }
+
+    &:hover {
+      background: #edfaff;
+    }
+  }
+}
--- a/style/components/timepicker/TimePanel.less
+++ b/style/components/timepicker/TimePanel.less
@ -0,0 +1,16 @@
+.@{timepicker-prefix-cls}-panel {
+  display: inline-block;
+  position: relative;
+  outline: none;
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
+  border: 1px solid #ccc;
+  list-style: none;
+  font-size: 12px;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 5px #ccc;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  line-height: 1.5;
+}