Merge pull request #244 from kaola-fed/feature_datepicker_20180829

datepicker添加确定按钮
kaola-fed · Aug 29, 2017 · 148bc20 · 148bc20
2 parents 2d6fefb + 2d61be0
commit 148bc20
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/src/js/components/form/KLDatePicker/Calendar/index.html b/src/js/components/form/KLDatePicker/Calendar/index.html
@@ -12,7 +12,7 @@
     </div>
     <div class="calendar_bd">
         <div class="calendar_week"><span class="calendar_item">{this.$trans('CAL_SUNDAY')}</span><span class="calendar_item">{this.$trans('CAL_MONDAY')}</span><span class="calendar_item">{this.$trans('CAL_TUESDAY')}</span><span class="calendar_item">{this.$trans('CAL_WENSDAY')}</span><span class="calendar_item">{this.$trans('CAL_THURSDAY')}</span><span class="calendar_item">{this.$trans('CAL_FRIDAY')}</span><span class="calendar_item">{this.$trans('CAL_SATURDAY')}</span></div>
-        <div class="calendar_day">{#list _days as day}<span class="calendar_item" z-sel={date.toDateString() === day.toDateString()} z-dis={!!this.isOutOfRange(day)} r-class={ {'z-muted': date.getMonth() !== day.getMonth()} } on-click={this.select(day)}>{day | format: 'dd'}</span>{/list}</div>
+        <div class="calendar_day">{#list _days as day}<span class="calendar_item" z-sel={date.toDateString() === day.toDateString()} z-dis={!!this.isOutOfRange(day)} r-class={ {'z-muted': date.getMonth() !== day.getMonth()} } on-click={this.select(day, $event)}>{day | format: 'dd'}</span>{/list}</div>
         {#inc this.$body}
     </div>
 </div>
diff --git a/src/js/components/form/KLDatePicker/Calendar/index.js b/src/js/components/form/KLDatePicker/Calendar/index.js
@@ -146,7 +146,6 @@ const Calendar = Component.extend({
      */
   _update() {
     this.data._days = [];
-
     const date = this.data.date;
     const month = date.getMonth();
     const mfirst = new Date(date);
@@ -210,11 +209,11 @@ const Calendar = Component.extend({
      * @param  {Date} date 选择的日期
      * @return {void}
      */
-  select(date) {
+  select(date, e) {
+    e.stopPropagation();
     if (this.data.readonly || this.data.disabled || this.isOutOfRange(date)) {
       return;
     }
-
     this.data.date = new Date(date);
 
     /**

diff --git a/src/js/components/form/KLDatePicker/index.html b/src/js/components/form/KLDatePicker/index.html
@@ -18,6 +18,9 @@
         {#if showTime}
         <time-picker size="sm" time={_time} on-change={this._onDateTimeChange(_date, _time)} />
         {/if}
+        <div class="dropdown_ft">
+          <a class="u-btn u-btn-sm" on-click={this.onConfirm()}>{this.$trans('CONFIRM')}</a>
+        </div>
       </calendar>
     </div>
   </div>

diff --git a/src/js/components/form/KLDatePicker/index.js b/src/js/components/form/KLDatePicker/index.js
@@ -161,15 +161,18 @@ const KLDatePicker = Dropdown.extend({
       return;
     }
     this._onDateTimeChange(date, time);
-
+  },
+  onConfirm() {
+    if (this.data.readonly || this.data.disabled || this.isOutOfRange(this.date)) {
+      return;
+    }
     this._onOk();
-
-    // this.toggle(false);
   },
   _onClose() {
     this.toggle(false);
   },
   _onOk() {
+    this.date || this._onDateTimeChange(this.data._date);
     this.data.date = this.date;
     this.data.time = this.time;
     /**
@@ -196,7 +199,6 @@ const KLDatePicker = Dropdown.extend({
   _onInput($event) {
     const value = $event.target.value;
     const date = value ? new Date(value) : null;
-
     if (date !== 'Invalid Date') this.data.date = date;
     else {
       $event.target.value = filter.format(

diff --git a/src/js/components/form/KLDatePicker/index.mcss b/src/js/components/form/KLDatePicker/index.mcss
@@ -16,4 +16,14 @@
     .btns {
         margin-top: 10px;
     }
+    .dropdown_ft {
+        display: flex;
+        padding: 4px 0 0;
+        margin-top: 4px;
+        justify-content: flex-end;
+        border-top: 1px solid #ddd;
+        a {
+            color: #333;
+        }
+    }
 }