Merge pull request #318 from kaola-fed/feature_disableTime_20180108

misc: 1. 优化maxDate\minDate传入时间戳的时候报错;2. 增加disabed时分秒属性
kaola-fed · Jan 8, 2018 · e85ab92 · e85ab92
2 parents 692011e + fa26738
commit e85ab92
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 4 deletions.
diff --git a/src/js/components/form/KLDatePicker/TimePicker/index.html b/src/js/components/form/KLDatePicker/TimePicker/index.html
@@ -1,7 +1,7 @@
 <span class="u-timepicker {class}" r-hide={!visible}>
-	<number-input min="0" max="23" format="00" value={hour} readonly={readonly} disabled={disabled} autofocus={autofocus} />
+	<number-input min="0" max="23" format="00" value={hour} readonly={readonly} disabled={disabled || disabledHours} autofocus={autofocus} />
 	<span>:</span>
-	<number-input min="0" max="59" format="00" value={minute} readonly={readonly} disabled={disabled} />
+	<number-input min="0" max="59" format="00" value={minute} readonly={readonly} disabled={disabled || disabledMinutes} />
 	<span>:</span>
-	<number-input min="0" max="59" format="00" value={seconds} readonly={readonly} disabled={disabled} />
+	<number-input min="0" max="59" format="00" value={seconds} readonly={readonly} disabled={disabled || disabledSeconds} />
 </span>
diff --git a/src/js/components/form/KLDatePicker/TimePicker/index.js b/src/js/components/form/KLDatePicker/TimePicker/index.js
@@ -22,6 +22,9 @@ require('../NumberInput');
  * @param {boolean}       [options.data.disabled=false]     => 是否禁用
  * @param {boolean}       [options.data.visible=true]       => 是否显示
  * @param {string}        [options.data.class]           => 补充class
+ * @param {boolean}       [options.data.disabledHours=false]   => 是否禁用小时输入框
+ * @param {boolean}       [options.data.disabledMinutes=false]   => 是否禁用分钟输入框
+ * @param {boolean}       [options.data.disabledSeconds=false]   => 是否禁用秒输入框
  */
 const TimePicker = Component.extend({
   name: 'time-picker',

diff --git a/src/js/components/form/KLDatePicker/index.html b/src/js/components/form/KLDatePicker/index.html
@@ -16,7 +16,11 @@
     <div class="dropdown_bd" r-hide={!open}>
       <calendar lang={lang} minDate={minDate} maxDate={maxDate} date={_date} on-select={this.select($event.date, _time)}>
         {#if showTime}
-        <time-picker size="sm" time={_time} on-change={this._onDateTimeChange(_date, _time)} />
+        <time-picker size="sm" time={_time} on-change={this._onDateTimeChange(_date, _time)}
+                     disabledHours={disabledHours}
+                     disabledMinutes={disabledMinutes}
+                     disabledSeconds={disabledSeconds}
+        />
         <div class="dropdown_ft">
           <a class="u-btn u-btn-sm datetimepicker_confirmBtn" on-click={this.onConfirm()}>{this.$trans('CONFIRM')}</a>
         </div>

diff --git a/src/js/components/form/KLDatePicker/index.js b/src/js/components/form/KLDatePicker/index.js
@@ -31,6 +31,9 @@ const validationMixin = require('../../../util/validationMixin');
  * @param {boolean}       [options.data.required=false]   => 是否必填
  * @param {boolean}       [options.data.readonly=false]   => 是否只读
  * @param {boolean}       [options.data.disabled=false]   => 是否禁用
+ * @param {boolean}       [options.data.disabledHours=false]   => 是否禁用小时输入框
+ * @param {boolean}       [options.data.disabledMinutes=false]   => 是否禁用分钟输入框
+ * @param {boolean}       [options.data.disabledSeconds=false]   => 是否禁用秒输入框
  * @param {boolean}       [options.data.visible=true]     => 是否显示
  * @param {string}        [options.data.size]             => 组件大小, sm/md/lg
  * @param {number}        [options.data.width]            => 组件宽度
@@ -113,6 +116,10 @@ const KLDatePicker = Dropdown.extend({
         return (this.data.minDate = new Date(newValue));
       }
 
+      if (typeof newValue === 'number') {
+        return (this.data.minDate = new Date(newValue));
+      }
+
       if (newValue === 'Invalid Date' || newValue === 'NaN') {
         throw new TypeError('Invalid Date');
       }
@@ -128,6 +135,10 @@ const KLDatePicker = Dropdown.extend({
         return (this.data.maxDate = new Date(newValue));
       }
 
+      if (typeof newValue === 'number') {
+        return (this.data.maxDate = new Date(newValue));
+      }
+
       if (newValue === 'Invalid Date' || newValue === 'NaN') {
         throw new TypeError('Invalid Date');
       }

diff --git a/src/js/components/form/KLDatePicker/index.md b/src/js/components/form/KLDatePicker/index.md
@@ -34,6 +34,26 @@ var component = new NEKUI.Component({
 ```
 <!-- demo_end -->
 
+<!-- demo_start -->
+### 禁用时/分/秒
+<div class="m-example"></div>
+
+```xml
+<p>禁用小时:</p>
+<kl-date-picker lang="en-US" date={selectDate1} placeholder="请选择时间" showTime disabledHours />
+<p>禁用分钟:</p>
+<kl-date-picker lang="en-US" date={selectDate2} placeholder="请选择时间" showTime disabledMinutes />
+<p>禁用秒:</p>
+<kl-date-picker lang="en-US" date={selectDate3} placeholder="请选择时间" showTime disabledSeconds />
+```
+
+```javascript
+var component = new NEKUI.Component({
+    template: template
+});
+```
+<!-- demo_end -->
+
 <!-- demo_start -->
 ### 禁用组件
 通过`disabled`属性来设置组件是否可用