release: 1.3.3

* modify: Datepicker custom placeholder * modify docs * modify version
XiaoMi · Mar 15, 2019 · 26f95d4 · 26f95d4
1 parent 4841959
commit 26f95d4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js
@@ -20,10 +20,29 @@ class BasePicker extends Component {
       isFocus: false,
       text: '',
       rText: '',
-      placeholder: '',
+      leftPlaceholder: '',
+      rightPlaceholder: '',
       format: ''
     }
   }
+  setPlaceholder () {
+    const {placeholder, localeDatas, type} = this.props
+    const tempPlaceholder = localeDatas.datePicker.placeholders[type] || localeDatas.datePicker.placeholder
+    let leftPlaceholder = tempPlaceholder
+    let rightPlaceholder = tempPlaceholder
+
+    if (placeholder instanceof Array) {
+      leftPlaceholder = placeholder[0]
+      rightPlaceholder = placeholder[1] || placeholder[0]
+    } else if (typeof placeholder === 'string') {
+      leftPlaceholder = placeholder
+      rightPlaceholder = placeholder
+    }
+    this.setState({
+      leftPlaceholder,
+      rightPlaceholder
+    })
+  }
   static propTypes = {
     type: PropTypes.oneOf(Object.values(DatePickerType)),
     value: function (props, propName, componentName) {
@@ -93,7 +112,6 @@ class BasePicker extends Component {
       text: noText ? '' : formatterDate(type, date.startDate || date, format, showTime, localeDatas),
       rText: noText ? '' : formatterDate(type, date.endDate || date, format, showTime, localeDatas),
       date,
-      placeholder: localeDatas.datePicker.placeholders[props.type] || localeDatas.datePicker.placeholder,
       format
     }, () => {
       callback && callback(this.state.date)
@@ -108,6 +126,7 @@ class BasePicker extends Component {
       }
       this.props.value && this.props.onChange && this.props.onChange(date)
     })
+    this.setPlaceholder()
     let rect = this.inputRoot.getBoundingClientRect()
     this.calcPanelPos(rect)
   }
@@ -215,16 +234,18 @@ class BasePicker extends Component {
       this.timeCancel()
     }
   }
-  _input (text, ref = 'input') {
+  _input (text, ref = 'input', placeholder = 'Please Select...') {
+    const {disabled, type, onChange} = this.props
+
     return (
       <input
         type='text'
         ref={el => { this[ref] = el }}
-        placeholder={this.state.placeholder}
-        className={this.props.disabled ? 'disabled' : ''}
-        disabled={this.props.disabled}
+        placeholder={placeholder}
+        className={disabled ? 'disabled' : ''}
+        disabled={disabled}
         onChange={e => {
-          isVaildDate(new Date(e.target.value)) && this.props.type === 'date' && this.props.onChange(new Date(e.target.value))
+          isVaildDate(new Date(e.target.value)) && type === 'date' && onChange(new Date(e.target.value))
           this.setState({
             text: e.target.value
           })
@@ -274,9 +295,9 @@ class BasePicker extends Component {
     )
     return (
       <div className={_cls}>
-        {this._input(this.state.text, 'input')}
+        {this._input(this.state.text, 'input', this.state.leftPlaceholder)}
         <span>{localeDatas.datePicker.to}</span>
-        {this._input(this.state.rText, 'rInput')}
+        {this._input(this.state.rText, 'rInput', this.state.rightPlaceholder)}
         {this._icon()}
       </div>
     )
@@ -292,7 +313,7 @@ class BasePicker extends Component {
     )
     return (
       <div className={_cls}>
-        {this._input(this.state.text, 'input')}
+        {this._input(this.state.text, 'input', this.state.leftPlaceholder)}
         {this._icon()}
       </div>
     )

diff --git a/docs/zh-CN/date-picker.md b/docs/zh-CN/date-picker.md
@@ -22,9 +22,10 @@ render () {
       <div>
         <p>Date 实例:</p>
         <DatePicker
+          placeholder="自定义占位符"
           value={new Date}
           onChange={(d) => {
-            console.log('value 为 Date 实例', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log('value 为 Date 实例,返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -34,7 +35,7 @@ render () {
         <DatePicker
           value={1541755800052}
           onChange={(d) => {
-            console.log(' value 为 Number(毫秒数)', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log(' value 为 Number(毫秒数),返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -43,7 +44,7 @@ render () {
          <DatePicker
           value='2018-10-11'
           onChange={(d) => {
-            console.log('value 为 时间字符串', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log('value 为 时间字符串,返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -52,7 +53,7 @@ render () {
         <DatePicker
           format="YYYY-MM-DD HH:mm:SS"
           onChange={(d) => {
-            console.log('没有 value 属性', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log('没有 value 属性,返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -61,7 +62,7 @@ render () {
         <DatePicker
           value={null}
           onChange={(d) => {
-            console.log('value 为 Null', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log('value 为 Null,返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -70,7 +71,7 @@ render () {
         <DatePicker
           value={undefined}
           onChange={(d) => {
-            console.log('value 为 undefined', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log('value 为 undefined,返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -79,7 +80,7 @@ render () {
         <DatePicker
           value=''
           onChange={(d) => {
-            console.log('value 为 空字符串', DatePicker.format(d, 'YYYY-MM-DD E'))
+            console.log('value 为 空字符串,返回值：', DatePicker.format(d, 'YYYY-MM-DD E'))
           }}
         />
       </div>
@@ -240,6 +241,7 @@ render () {
 render () {
   return (
     <DatePicker 
+      placeholder={['开始日期', '结束日期']}
       type='daterange'
       minDate={new Date()}
       maxDate={new Date(2019, 4, 28)}
@@ -400,6 +402,7 @@ render () {
 | showTime |  是否在日期选择器中显示时间选择器 | Boolean | true false | false |
 | shortcuts | 快捷面板 | Array | 近一周, 近一月, 近三月, 近一年 | null |
 | weekOffset | 周起始<br/>默认周日做为第一列 |  Number | 0/1 | 0 |
+| placeholder |  自定义占位符<br/>数组用于范围日期 |  String \| Array | - | - |
 
 ### Datepicker Events
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "1.3.3-beta.1",
+  "version": "1.3.3",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",