update: 带时间选择时 input 宽度调整; 区分选择器是否带时间选择而显示不同的图标

XiaoMi · Sep 4, 2019 · f8f15fa · f8f15fa
1 parent 1539fba
commit f8f15fa
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js
@@ -264,11 +264,11 @@ class BasePicker extends Component {
   }
   _icon () {
     const {isFocus} = this.state
-    const { clearable } = this.props
+    const { clearable, type, showTime } = this.props
     const iconCls = classNames(
       'hi-datepicker__input-icon',
       'hi-icon',
-      (isFocus && clearable) ? 'icon-close-circle clear' : 'icon-date'
+      (isFocus && clearable) ? 'icon-close-circle clear' : ((showTime || type === 'timeperiod') ? 'icon-time' : 'icon-date')
     )
     return (isFocus && clearable)
       ? <span className={iconCls} onClick={this._clear.bind(this)} />
@@ -282,12 +282,13 @@ class BasePicker extends Component {
     const {
       localeDatas,
       disabled,
-      showTime
+      showTime,
+      type
     } = this.props
     const _cls = classNames(
       'hi-datepicker__input',
       'hi-datepicker__input--range',
-      showTime && 'hi-datepicker__input--range-time',
+      (showTime || type === 'timeperiod') && 'hi-datepicker__input--range-time',
       disabled && 'hi-datepicker__input--disabled'
     )
     return (

diff --git a/components/date-picker/style/index.scss b/components/date-picker/style/index.scss
@@ -32,6 +32,10 @@ $basic-color: #4284f5 !default;
     &--range {
       width: 320px;
 
+      &-time {
+        width: 400px;
+      }
+
       input {
         flex: 0 1 40%;
         text-align: center;