ANT DESIGN是由螞蟻金服體驗技術部出品的一個UI組件庫。

先來看看官方介紹：在企業級產品的研發過程中，會出現不同的設計規範和實現方式，但其中往往存在很多類似的頁面和組件，給設計師和工程師帶來很多困擾和重複建設，大大降低了產品的研發效率。我們經過大量的項目實踐和總結，沉澱出一個企業級的 Web 設計指引。旨在統一企業級產品的前端 UI 設計，屏蔽不必要的設計差異和實現成本，解放設計和前端的研發資源。

目前分為基於React實現的web組件庫--Ant Design of React和H5組件庫AlipayUI of React。本文只討論web組件庫--Ant Design of React中的TimePicker的使用，拋磚引玉，更多組件信息，請訪問官網介紹Ant Design of React。

安裝

$ npm install antd

引入樣式

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

示例

TimePicker時間選擇框

基本的時間選擇框

1 import { TimePicker } from 'antd'; 2 3 class Demo extends React.Component { 4 state = { 5 value: null, 6 }; 7 8 onChange = (time) => { 9 console.log(time);10 this.setState({ value: time });11 }12 13 render() {14 return <TimePicker value={this.state.value} onChange={this.onChange} />;15 }16 }

TimePicker 浮層中的列會隨著 format 變化，當略去 format 中的某部分時，浮層中對應的列也會消失。

選擇時分

1 import { TimePicker } from 'antd';2 import moment from 'moment';3 4 const format = 'HH:mm';5 6 ReactDOM.render(7 <TimePicker defaultValue={moment('12:08', format)} format={format} />8 , mountNode);

tips

TimePicker組件的value值為moment類型，在使用默認值（例如從伺服器獲取的字元串數值『21:30』）需導入moment依賴：

1 import moment from 'moment';2 <TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />

更多功能如禁用部分選項、禁用整個控制項以及在TimePicker 選擇框底部顯示自定義的內容等請訪問完整API。