Merge pull request #540 from ant-design/time-picker-0.2.0

add timepicker component

components/datepicker/demo/time.md

@@ -13,4 +13,3 @@ ReactDOM.render(
   <Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" defaultValue="2015-11-11 11:11:11"/>
 , document.getElementById('components-datepicker-demo-time'));
 ````
-

components/datepicker/index.jsx

@@ -13,7 +13,6 @@ function createPicker(TheCalendar) {
     getDefaultProps() {
       return {
         format: 'yyyy-MM-dd',
-        placeholder: '',
         transitionName: 'slide-up',
         popupStyle: {},
         onSelect: null, // 向前兼容
@@ -94,7 +93,8 @@ function createPicker(TheCalendar) {
       let defaultCalendarValue = new GregorianCalendar(this.getLocale());
       defaultCalendarValue.setTime(Date.now());
 
-      const placeholder = this.props.placeholder || this.getLocale().lang.placeholder;
+      const placeholder = ('placeholder' in this.props)
+        ? this.placeholder : this.getLocale().lang.placeholder;
       const calendar = (
         <TheCalendar
           disabledDate={this.props.disabledDate}

components/datepicker/index.md

@@ -6,11 +6,11 @@
 
 ---
 
-输入或选择日期/时间的控件。
+输入或选择日期的控件。
 
 ## 何时使用
 
-当用户需要输入一个日期/时间，可以点击标准输入框，弹出日期面板进行选择。支持键盘操作。
+当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
 
 ## API
 
@@ -24,7 +24,7 @@
 | defaultValue | 默认日期       | string   | 无           |
 | format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
 | disabledDate | 不可选择的日期 | function | 无           |
-| onChange     | 日期发生变化的回调，发生在用户选择日期时 | function | 无           |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无           |
 | showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
 | calendarStyle | 格外的弹出日历样式，例如 zIndex           | object     | {}        |
@@ -33,6 +33,6 @@
 
 <style>
 .code-box-demo .ant-calendar-picker {
-  margin: 0 12px 12px 0;
+  margin: 0 8px 12px 0;
 }
 </style>

components/datepicker/locale/en_US.js

@@ -5,7 +5,7 @@ import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 // 统一合并为完整的 Locale
 let locale = objectAssign({}, GregorianCalendarLocale);
 locale.lang = objectAssign({
-  placeholder: 'Please select a date'
+  placeholder: 'Select a date'
 }, CalendarLocale);
 
 // All settings at:

components/timepicker/demo/basic.md

+# 基本
+
+-	order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+function onChange(time) {
+  console.log(time.toLocaleTimeString('zh-CN', {
+    hour12: false
+  }));
+}
+
+ReactDOM.render(
+  <Timepicker defaultValue="12:08:23" onChange={onChange} />
+, document.getElementById('components-timepicker-demo-basic'));
+````

components/timepicker/demo/disabled.md

+# 禁用
+
+-	order: 4
+
+禁用时间选择。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+ReactDOM.render(
+  <Timepicker defaultValue="12:08:23" disabled />
+, document.getElementById('components-timepicker-demo-disabled'));
+````

components/timepicker/demo/no-default-value.md

+# 无默认值
+
+-	order: 5
+
+没有默认时间。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+ReactDOM.render(
+  <Timepicker placeholder="Select sth." />
+, document.getElementById('components-timepicker-demo-no-default-value'));
+````

components/timepicker/demo/size.md

+# 三种大小
+
+-	order: 6
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Timepicker defaultValue="12:08:23" size="large" />
+    <Timepicker defaultValue="12:08:23" />
+    <Timepicker defaultValue="12:08:23" size="small" />
+  </div>
+, document.getElementById('components-timepicker-demo-size'));
+````

components/timepicker/demo/special-minutes.md

+# 特定选项
+
+-	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'));
+````

components/timepicker/demo/without-seconds.md

+# 不展示秒
+
+-	order: 2
+
+不展示秒，也不允许选择。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+ReactDOM.render(
+  <Timepicker defaultValue="12:08:23" format="HH:mm" />
+, document.getElementById('components-timepicker-demo-without-seconds'));
+````

components/timepicker/index.jsx

+import React from 'react';
+import DateTimeFormat from 'gregorian-calendar-format';
+import TimePicker from 'rc-time-picker/lib/TimePicker';
+import objectAssign from 'object-assign';
+import defaultLocale from './locale/zh_CN';
+
+const AntTimepicker = React.createClass({
+  getDefaultProps() {
+    return {
+      format: 'HH:mm:ss',
+      prefixCls: 'ant-timepicker',
+      onChange() {},
+      locale: {},
+      align: {
+        offset: [0, -1],
+      },
+      open: false,
+      disabled: false,
+      hourOptions: undefined,
+      minuteOptions: undefined,
+      secondOptions: undefined,
+      size: '',
+      placement: 'bottomLeft',
+      transitionName: 'slide-up',
+    };
+  },
+
+  /**
+   * 获得输入框的 className
+   */
+  getSizeClass() {
+    let sizeClass = '';
+    if (this.props.size === 'large') {
+      sizeClass = ' ant-input-lg';
+    } else if (this.props.size === 'small') {
+      sizeClass = ' ant-input-sm';
+    }
+    return sizeClass;
+  },
+
+  /**
+   * 获得输入框的默认值
+   */
+  getDefaultValue(formatter) {
+    const defaultValue = this.props.defaultValue;
+    if (defaultValue) {
+      return formatter.parse(defaultValue, {
+        locale: this.getLocale(),
+        obeyCount: true,
+      });
+    }
+    return undefined;
+  },
+
+  handleChange(value) {
+    this.props.onChange(new Date(value.getTime()));
+  },
+
+  getLocale() {
+    // 统一合并为完整的 Locale
+    let locale = objectAssign({}, defaultLocale, this.props.locale);
+    locale.lang = objectAssign({}, defaultLocale.lang, this.props.locale.lang);
+    return locale;
+  },
+
+  render() {
+    const { format } = this.props;
+    const formatter = new DateTimeFormat(format);
+    const placeholder = ('placeholder' in this.props)
+      ? this.props.placeholder : this.getLocale().lang.placeholder;
+    return (
+      <TimePicker
+        {...this.props}
+        inputClassName={`ant-input ${this.getSizeClass()}`}
+        formatter={formatter}
+        defaultValue={this.getDefaultValue(formatter)}
+        placeholder={placeholder}
+        onChange={this.handleChange}
+      />
+    );
+  }
+
+});
+
+export default AntTimepicker;

components/timepicker/index.md

+# Timepicker
+
+-	category: Components
+-	chinese: 时间选择框
+-	type: 表单
+
+---
+
+输入或选择时间的控件。
+
+何时使用
+--------
+
+当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
+
+API
+---
+
+```html
+<Timepicker value="13:30:56" />
+```
+
+| 参数            | 说明 | 类型 | 默认值 |
+|-----------------|-----|-----|-------|
+| defaultValue    | 默认时间 | string | 无 |
+| placeholder     | 没有值的时候显示的内容 | string | "请选择时间" |
+| onChange        | 时间发生变化的回调     | function(Date value) | 无           |
+| format          | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
+| disabled        | 禁用 | bool | false |
+| hourOptions     | 特定可选择的小时 | array | 0 到 24 组成的数组 |
+| minuteOptions   | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
+| secondOptions   | 特定可选择的秒 | array | 0 到 60 组成的数组 |
+| inputClassName  | 输入框的样式 | string |  |
+| placement       | 显示位置 | string | bottomLeft |
+| transitionName  | 显示动画 | string | slide-up |
+
+<style> .code-box-demo .ant-timepicker-picker { margin: 0 12px 12px 0; }</style>

components/timepicker/locale/en_US.js

+import objectAssign from 'object-assign';
+import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
+import TimepickerLocale from 'rc-time-picker/lib/locale/en_US';
+
+// 统一合并为完整的 Locale
+let locale = objectAssign({}, GregorianCalendarLocale);
+locale.lang = objectAssign({
+  placeholder: 'Select a time'
+}, TimepickerLocale);
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;

components/timepicker/locale/zh_CN.js

+import objectAssign from 'object-assign';
+import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN';
+import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN';
+
+// 统一合并为完整的 Locale
+let locale = objectAssign({}, GregorianCalendarLocale);
+locale.lang = objectAssign({
+  placeholder: '请选择时间'
+}, TimepickerLocale);
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;

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;

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.5.6",
     "rc-tooltip": "~3.2.0",
     "rc-tree": "~0.19.0",
     "rc-trigger": "~1.0.6",

style/components/datepicker/Picker.less

-.@{calendar-prefix-cls}-picker-container  {
+.@{calendar-prefix-cls}-picker-container {
   position: absolute;
   z-index: 1070;
 

style/components/form.less

@@ -324,6 +324,11 @@ form {
     color: @warning-color;
   }
 
+  // ant-timepicker
+  .@{timepicker-prefix-cls}-picker-icon:after {
+    color: @warning-color;
+  }
+
   // ant-input-number
   .@{input-number-prefix-cls} {
     border-color: @warning-color;
@@ -359,6 +364,11 @@ form {
     color: @error-color;
   }
 
+  // ant-timepicker
+  .@{timepicker-prefix-cls}-picker-icon:after {
+    color: @error-color;
+  }
+
   // ant-input-number
   .@{input-number-prefix-cls} {
     border-color: @error-color;

style/components/index.less

@@ -4,6 +4,7 @@
 @import "progress";
 @import "select";
 @import "datepicker";
+@import "timepicker";
 @import "dialog";
 @import "confirm";
 @import "tabs";
@@ -36,3 +37,4 @@
 @import "timeline";
 @import "spin";
 @import "calendar";
+@import "timepicker";

style/components/timepicker.less

+@timepicker-prefix-cls: ant-timepicker;
+
+.@{timepicker-prefix-cls} {
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@import "timepicker/Picker";
+@import "timepicker/Panel";
+@import "timepicker/Header";
+@import "timepicker/Select";

style/components/timepicker/Header.less

+.@{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: #999;
+  }
+}

style/components/timepicker/Panel.less

+.@{timepicker-prefix-cls}-panel {
+  display: inline-block;
+  position: relative;
+  outline: none;
+  border: 1px solid #ccc;
+  list-style: none;
+  font-size: 12px;
+  text-align: left;
+  background-color: #fff;
+  border-radius: @border-radius-base;
+  box-shadow: 0 1px 5px #ccc;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  line-height: 1.5;
+}

style/components/timepicker/Picker.less

+.@{timepicker-prefix-cls}-picker-container {
+  z-index: 1070;
+  position: absolute;
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: antSlideDownOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
+    animation-name: antSlideUpOut;
+  }
+}
+
+.@{timepicker-prefix-cls}-picker {
+  position: relative;
+  display: inline-block;
+  outline: none;
+  font-size: @font-size-base;
+  transition: opacity 0.3s ease;
+
+  > input {
+    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: "\e643";
+      font-family: "anticon";
+      font-size: 12px;
+      color: #999;
+      display: inline-block;
+      line-height: 1;
+      vertical-align: bottom;
+    }
+  }
+}

style/components/timepicker/Select.less

+.@{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: tint(@primary-color, 90%);
+      color: @link-color;
+    }
+
+    &:hover {
+      background: tint(@primary-color, 90%);
+      transition: background 0.3s ease;
+    }
+  }
+}