DatePicker add confirm prop

DatePicker add confirm prop

src/components/date-picker/base/confirm.vue

@@ -0,0 +1,28 @@
+<template>
+    <div :class="[prefixCls + '-confirm']">
+        <i-button size="small" type="text" @click="handleClear">清空</i-button>
+        <i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
+    </div>
+</template>
+<script>
+    import iButton from '../../button/button.vue';
+
+    const prefixCls = 'ivu-picker';
+
+    export default {
+        components: { iButton },
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        methods: {
+            handleClear () {
+                this.$emit('on-pick-clear');
+            },
+            handleSuccess () {
+                this.$emit('on-pick-success');
+            }
+        }
+    }
+</script>

src/components/date-picker/panel/date-range.vue

@@ -107,6 +107,10 @@
                     :disabled-date="disabledDate"
                     @on-pick="handleRightMonthPick"></month-table>
             </div>
+            <Confirm
+                v-if="confirm"
+                @on-pick-clear="handlePickClear"
+                @on-pick-success="handlePickSuccess"></Confirm>
         </div>
     </div>
 </template>
@@ -115,6 +119,7 @@
     import DateTable from '../base/date-table.vue';
     import YearTable from '../base/year-table.vue';
     import MonthTable from '../base/month-table.vue';
+    import Confirm from '../base/confirm.vue';
     import { toDate, prevMonth, nextMonth } from '../util';
 
     import Mixin from './mixin';
@@ -124,7 +129,7 @@
 
     export default {
         mixins: [Mixin],
-        components: { Icon, DateTable, YearTable, MonthTable },
+        components: { Icon, DateTable, YearTable, MonthTable, Confirm },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -134,6 +139,7 @@
                 value: '',
                 minDate: '',
                 maxDate: '',
+                confirm: false,
                 rangeState: {
                     endDate: null,
                     selecting: false

src/components/date-picker/panel/date.vue

@@ -57,6 +57,10 @@
                     :disabled-date="disabledDate"
                     @on-pick="handleMonthPick"></month-table>
             </div>
+            <Confirm
+                v-if="confirm"
+                @on-pick-clear="handlePickClear"
+                @on-pick-success="handlePickSuccess"></Confirm>
         </div>
     </div>
 </template>
@@ -65,6 +69,7 @@
     import DateTable from '../base/date-table.vue';
     import YearTable from '../base/year-table.vue';
     import MonthTable from '../base/month-table.vue';
+    import Confirm from '../base/confirm.vue';
     import { formatDate, parseDate } from '../util';
 
     import Mixin from './mixin';
@@ -74,7 +79,7 @@
 
     export default {
         mixins: [Mixin],
-        components: { Icon, DateTable, YearTable, MonthTable },
+        components: { Icon, DateTable, YearTable, MonthTable, Confirm },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -85,12 +90,10 @@
                 value: '',
                 showTime: false,
                 selectionMode: 'day',
-                visible: false,
                 disabledDate: '',
                 year: null,
                 month: null,
-                showWeekNumber: false,
+                confirm: false
-                timePickerVisible: false
             }
         },
         computed: {

src/components/date-picker/panel/mixin.js

@@ -13,6 +13,12 @@ export default {
         handleShortcutClick (shortcut) {
             if (shortcut.value) this.$emit('on-pick', shortcut.value());
             if (shortcut.onClick) shortcut.onClick(this);
+        },
+        handlePickClear () {
+            this.$emit('on-pick-clear');
+        },
+        handlePickSuccess () {
+            this.$emit('on-pick-success');
         }
     }
 }

src/components/date-picker/picker.vue

@@ -162,6 +162,10 @@
                 type: Boolean,
                 default: true
             },
+            confirm: {
+                type: Boolean,
+                default: false
+            },
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large']);
@@ -315,14 +319,19 @@
             },
             handleIconClick () {
                 if (!this.showClose) return;
+                this.handleClear();
+            },
+            handleClear () {
                 this.visible = false;
                 this.internalValue = '';
                 this.value = '';
+                this.emitChange(this.value);
             },
             showPicker () {
                 if (!this.picker) {
                     this.picker = new Vue(this.panel).$mount(this.$els.picker);
                     this.picker.value = this.internalValue;
+                    this.picker.confirm = this.confirm;
                     this.picker.selectionMode = this.selectionMode;
                     if (this.format) this.picker.format = this.format;
 
@@ -332,13 +341,22 @@
                     }
 
                     this.picker.$on('on-pick', (date, visible = false) => {
+                        if (!this.confirm) this.visible = visible;
+
                         this.emitChange(date);
                         this.value = date;
-                        this.visible = visible;
                         this.picker.value = date;
                         this.picker.resetView && this.picker.resetView();
                     });
 
+                    this.picker.$on('on-pick-clear', () => {
+                        this.handleClear();
+                    });
+                    this.picker.$on('on-pick-success', () => {
+                        this.emitChange(this.value);
+                        this.visible = false;
+                    });
+
                     // todo $on('on-time-range')
                 }
                 if (this.internalValue instanceof Date) {
@@ -349,7 +367,7 @@
                 this.picker.resetView && this.picker.resetView();
             },
             emitChange (date) {
-                const format = this.format || DEFAULT_FORMATS[type];
+                const format = this.format || DEFAULT_FORMATS[this.type];
                 const formatter = (
                     TYPE_VALUE_RESOLVER_MAP[this.type] ||
                     TYPE_VALUE_RESOLVER_MAP['default']

src/styles/components/date-picker.less

@@ -238,4 +238,11 @@
             float: left;
         }
     }
+
+    &-confirm{
+        border-top: 1px solid @border-color-split;
+        text-align: right;
+        padding: 8px;
+        clear: both;
+    }
 }

test/routers/date.vue

@@ -1,17 +1,19 @@
 <template>
     <div style="margin: 50px">
-        <i-button @click="setDate">change date</i-button>
+        <i-button @click="type = 'year'">year</i-button>
+        <i-button @click="type = 'month'">month</i-button>
         <br>
         <row>
             <i-col span="8">
                 <!--<i-button @click="setDate">set date</i-button>-->
                 <date-picker
+                        :type="type"
                         style="width:200px"
                         placeholder="请选择日期"
                         :value.sync="value"
-                        :options="options"
                         @on-change="change"
-                        :format="format"
+                        :confirm="true"
+                        :options="options"
                         @on-open-change="change2"></date-picker>
             </i-col>
             <i-col span="8">
@@ -22,9 +24,8 @@
                         :value.sync="value2"
                         align="right"
                         :editable="true"
-                        :format="format"
                         @on-change="change"
-                        :clearable="false"
+                        :confirm="true"
                         :options="options2"></date-picker>
             </i-col>
         </row>
@@ -35,6 +36,7 @@
         data () {
             return {
 //                value: new Date(),
+                type: 'date',
                 value: '2016-12-25',
                 value2: ['2016-12-17', '2017-01-05'],
                 options2: {
@@ -130,7 +132,7 @@
                         }
                     ]
                 },
-                format: 'yyyy-MM-dd'
+                format: 'yyyy-MM',
             }
         },
         computed: {},