diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js index a9397ff2a..410c9fb07 100644 --- 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 ( { 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 (
- {this._input(this.state.text, 'input')} + {this._input(this.state.text, 'input', this.state.leftPlaceholder)} {localeDatas.datePicker.to} - {this._input(this.state.rText, 'rInput')} + {this._input(this.state.rText, 'rInput', this.state.rightPlaceholder)} {this._icon()}
) @@ -292,7 +313,7 @@ class BasePicker extends Component { ) return (
- {this._input(this.state.text, 'input')} + {this._input(this.state.text, 'input', this.state.leftPlaceholder)} {this._icon()}
) diff --git a/docs/zh-CN/date-picker.md b/docs/zh-CN/date-picker.md index 09d57c71e..1c262e1f5 100644 --- a/docs/zh-CN/date-picker.md +++ b/docs/zh-CN/date-picker.md @@ -22,9 +22,10 @@ render () {

Date 实例:

{ - console.log('value 为 Date 实例', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log('value 为 Date 实例,返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} />
@@ -34,7 +35,7 @@ render () { { - console.log(' value 为 Number(毫秒数)', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log(' value 为 Number(毫秒数),返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} /> @@ -43,7 +44,7 @@ render () { { - console.log('value 为 时间字符串', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log('value 为 时间字符串,返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} /> @@ -52,7 +53,7 @@ render () { { - console.log('没有 value 属性', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log('没有 value 属性,返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} /> @@ -61,7 +62,7 @@ render () { { - console.log('value 为 Null', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log('value 为 Null,返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} /> @@ -70,7 +71,7 @@ render () { { - console.log('value 为 undefined', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log('value 为 undefined,返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} /> @@ -79,7 +80,7 @@ render () { { - console.log('value 为 空字符串', DatePicker.format(d, 'YYYY-MM-DD E')) + console.log('value 为 空字符串,返回值:', DatePicker.format(d, 'YYYY-MM-DD E')) }} /> @@ -240,6 +241,7 @@ render () { render () { return ( 默认周日做为第一列 | Number | 0/1 | 0 | +| placeholder | 自定义占位符
数组用于范围日期 | String \| Array | - | - | ### Datepicker Events diff --git a/package.json b/package.json index 1f5f06eec..f538bfb48 100644 --- 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'",