update DatePicker

update DatePicker

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

@@ -6,7 +6,7 @@
         <div :class="[prefixCls + '-header']">
             <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
         </div>
-        <span :class="getCellCls(cell)" v-for="cell in cells"><em>{{ cell.text }}</em></span>
+        <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
     </div>
 </template>
 <script>
@@ -126,8 +126,40 @@
             }
         },
         methods: {
-            handleClick () {
+            handleClick (event) {
+                const target = event.target;
+                if (target.tagName === 'EM') {
+                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
+                    if (cell.disabled) return;
 
+                    let year = this.year;
+                    let month = this.month;
+                    let day = cell.text;
+
+                    if (cell.type === 'prev-month') {
+                        if (month === 0) {
+                            month = 11;
+                            year--;
+                        } else {
+                            month--;
+                        }
+                    } else if (cell.type === 'next-month') {
+                        if (month === 11) {
+                            month = 0;
+                            year++;
+                        } else {
+                            month++;
+                        }
+                    }
+
+                    const newDate = new Date(year, month, day);
+
+                    if (this.selectionMode === 'range') {
+                        // todo
+                    } else {
+                        this.$emit('on-pick', newDate);
+                    }
+                }
             },
             handleMouseMove () {
 

src/components/date-picker/base/month-table.vue

@@ -1,13 +1,70 @@
 <template>
-    <div>month</div>
+    <div :class="classes" @click="handleClick">
+        <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}月</em></span>
+    </div>
 </template>
 <script>
+    import { deepCopy } from '../../../utils/assist';
+    const prefixCls = 'ivu-date-picker-cells';
+
     export default {
-//        props: {},
-        data () {
-            return {}
+        props: {
+            date: {},
+            month: {
+                type: Number
+            },
+            disabledDate: {}
         },
-        computed: {},
-        methods: {}
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-month`
+                ]
+            },
+            cells () {
+                let cells = [];
+                const cell_tmpl = {
+                    text: '',
+                    selected: false,
+                    disabled: false
+                };
+
+                for (let i = 0; i < 12; i++) {
+                    const cell = deepCopy(cell_tmpl);
+                    cell.text = i + 1;
+
+                    const date = new Date(this.date);
+                    date.setMonth(i);
+                    cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date);
+
+                    cell.selected = Number(this.month) === i;
+                    cells.push(cell);
+                }
+
+                return cells;
+            }
+        },
+        methods: {
+            getCellCls (cell) {
+                return [
+                    `${prefixCls}-cell`,
+                    {
+                        [`${prefixCls}-cell-selected`]: cell.selected,
+                        [`${prefixCls}-cell-disabled`]: cell.disabled
+                    }
+                ]
+            },
+            handleClick (event) {
+                const target = event.target;
+                if (target.tagName === 'EM') {
+                    const index = parseInt(event.target.getAttribute('index'));
+                    const cell = this.cells[index];
+                    if (cell.disabled) return;
+
+                    this.$emit('on-pick', index);
+                }
+            }
+        }
     }
 </script>

src/components/date-picker/base/year-table.vue

@@ -1,13 +1,75 @@
 <template>
-    <div>year</div>
+    <div :class="classes" @click="handleClick">
+        <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
+    </div>
 </template>
 <script>
+    import { deepCopy } from '../../../utils/assist';
+    const prefixCls = 'ivu-date-picker-cells';
+
     export default {
-//        props: {},
-        data () {
-            return {}
+        props: {
+            date: {},
+            year: {},
+            disabledDate: {}
         },
-        computed: {},
-        methods: {}
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-year`
+                ]
+            },
+            startYear() {
+                return Math.floor(this.year / 10) * 10;
+            },
+            cells () {
+                let cells = [];
+                const cell_tmpl = {
+                    text: '',
+                    selected: false,
+                    disabled: false
+                };
+
+                for (let i = 0; i < 10; i++) {
+                    const cell = deepCopy(cell_tmpl);
+                    cell.text = this.startYear + i;
+
+                    const date = new Date(this.date);
+                    date.setFullYear(cell.text);
+                    cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date);
+
+                    cell.selected = Number(this.year) === cell.text;
+                    cells.push(cell);
+                }
+
+                return cells;
+            }
+        },
+        methods: {
+            getCellCls (cell) {
+                return [
+                    `${prefixCls}-cell`,
+                    {
+                        [`${prefixCls}-cell-selected`]: cell.selected,
+                        [`${prefixCls}-cell-disabled`]: cell.disabled
+                    }
+                ]
+            },
+            nextTenYear() {
+                this.$emit('on-pick', Number(this.year) + 10, false);
+            },
+            prevTenYear() {
+                this.$emit('on-pick', Number(this.year) - 10, false);
+            },
+            handleClick (event) {
+                const target = event.target;
+                if (target.tagName === 'EM') {
+                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
+                    if (cell.disabled) return;
+                    this.$emit('on-pick', cell.text);
+                }
+            }
+        }
     }
 </script>