开发datepicker组件

example/docs/datepicker/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="box">
+    <div class="doc-title mb15">DatePicker 日期选择器</div>
+    <div class="doc-desc mb15">选择日期</div>
+    <br />
+    <br />
+    <div class="title2 mb15">代码演示</div>
+    <div class="inner">
+      <div style="margin-bottom:20px;">基础使用</div>
+      <DatePicker />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="less" scoped>
+
+</style>

example/menu.config.js

@@ -115,6 +115,10 @@ export default [
       {
         name : 'Checkbox 多选框',
         path : '/checkbox'
+      },
+      {
+        name : 'DatePicker 日期选择器',
+        path : '/datepicker'
       }
     ]
   }

example/router/index.js

@@ -93,6 +93,10 @@ const routes = [
   {
     path : '/checkbox',
     component : () => import('@example/docs/checkbox')
+  },
+  {
+    path : '/datepicker',
+    component : () => import('@example/docs/datepicker')
   }
 ];
 const router = new VueRouter({

src/components/calendar/index.js

@@ -421,7 +421,7 @@ export default {
     getDisplayDays (days , weekOfFirstDay) {
       let displayDays = [];
       const date = new Date(this.currentDate);
-      date.setDate(0)
+      date.setDate(0);
       let prevMonthDays = date.getDate();
       // 当月展示的天数
       for (let i = 1 ; i <= days ; i++) {

src/components/datepicker/carlendar.js

@@ -0,0 +1,59 @@
+import classNames from "classnames";
+import CarlendarHeader from './carlendarHeader';
+export default {
+  props : {
+    date : Date,
+    prefixCls : String
+  },
+  data () {
+    const { date }  = this.$props;
+    return {
+      currentDate : date
+    }
+  },
+  watch : {
+    date (newVal) {
+      this.currentDate = newVal;
+    }
+  },
+  methods : {
+    clickYear (year) {
+      const date = new Date(this.currentDate);
+      date.setFullYear(year);
+      this.currentDate = date;
+    },
+    clickMonth (month) {
+      const date = new Date(this.currentDate);
+      date.setMonth(month - 1);
+      this.currentDate = date;
+    },
+    getCarlendarHeader () {
+      const { prefixCls } = this.$props;
+      const h = this.$createElement;
+      const headerProps = {
+        props : {
+          prefixCls : classNames(prefixCls),
+          year : this.currentDate.getFullYear(),
+          month : this.currentDate.getMonth() + 1
+        },
+        on : {
+          'click-year' : this.clickYear,
+          'click-month' : this.clickMonth
+        }
+      }
+      return h(
+        CarlendarHeader,
+        headerProps
+      )
+    }
+  },
+  render () {
+    const h = this.$createElement;
+    return h(
+      'div',
+      [
+        this.getCarlendarHeader()
+      ]
+    )
+  }
+}

src/components/datepicker/carlendarHeader.js

@@ -0,0 +1,129 @@
+import classNames from "classnames";
+const monthMap = {
+  1 : 'Jan',
+  2 : 'Feb',
+  3 : 'Mar',
+  4 : 'Apr',
+  5 : 'May',
+  6 : 'Jun',
+  7 : 'Jul',
+  8 : 'Aug',
+  9 : 'Sep',
+  10 : 'Oct',
+  11 : 'Nov',
+  12 : 'Dec'
+}
+export default {
+  props : {
+    year : [String , Number],
+    month : [Number , String],
+    prefixCls : String
+  },
+  methods : {
+    clickYear (dir) {
+      let { year } = this.$props;
+      if (dir === 'prev') {
+        // 上一年
+        if (year <= 0) {
+          year = 0;
+        } else {
+          year--;
+        }
+        this.$emit('click-year' , year);
+      } else {
+        // 下一年
+        this.$emit('click-year' , ++year);
+      }
+    },
+    clickMonth (dir) {
+      let { month } = this.$props;
+      if (dir === 'prev') {
+        // 上一月
+        if (month <= 1) {
+          month = 12;
+        } else {
+          month--;
+        }
+        this.$emit('click-month' , month);
+      } else {
+        // 下一月
+        if (month > 12) {
+          month = 12;
+        } else {
+          month++;
+        }
+        this.$emit('click-month' , month);
+      }
+    }
+  },
+  render () {
+    const { prefixCls , year , month } = this.$props;
+    const h = this.$createElement;
+    return h(
+      'div',
+      {
+        class : classNames(prefixCls + '-header')
+      },
+      [
+        h(
+          'span',
+          {
+            class : classNames(prefixCls + '-prev-year-btn'),
+            on : {
+              click : () => this.clickYear('prev')
+            }
+          }
+        ),
+        h(
+          'span',
+          {
+            class : classNames(prefixCls + '-prev-month-btn'),
+            on : {
+              click : () => this.clickMonth('prev')
+            }
+          }
+        ),
+        h(
+          'span',
+          {
+            class : classNames(prefixCls + '-select')
+          },
+          [
+            h(
+              'span',
+              {
+                class : classNames(prefixCls + '-month')
+              },
+              [monthMap[month]]
+            ),
+            h(
+              'span',
+              {
+                class : classNames(prefixCls + '-year')
+              },
+              [year]
+            ),
+          ]
+        ),
+        h(
+          'span',
+          {
+            class : classNames(prefixCls + '-next-month-btn'),
+            on : {
+              click : () => this.clickMonth('next')
+            }
+          }
+        ),
+        h(
+          'span',
+          {
+            class : classNames(prefixCls + '-next-year-btn'),
+            on : {
+              click : () => this.clickYear('next')
+            }
+          }
+        ),
+      ]
+    )
+  }
+}

src/components/datepicker/dateContent.js

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+
+export default {
+  props : {
+    clearable : Boolean,
+    value : [Date , String],
+    prefixCls : String,
+    placeholder : String
+  },
+  render () {
+    const { prefixCls , placeholder } = this.$props;
+    const h = this.$createElement;
+    return h(
+      'span',
+      {
+        class : classNames(prefixCls)
+      },
+      [
+        h(
+          'input',
+          {
+            attrs : {
+              placeholder : placeholder,
+              readonly : true, 
+            },
+            class : classNames(prefixCls + '-input')
+          }
+        ),
+        h(
+          'i',
+          {
+            class : classNames('iconfont icon-rili' , prefixCls + '-rili')
+          }
+        )
+      ]
+    )
+  }
+}

src/components/datepicker/datePicker.js

@@ -0,0 +1,54 @@
+import Trigger from '../utils/trigger';
+export default {
+  props : {
+    prefixCls : {
+      type : String,
+      default : 'ca-date-picker'
+    },
+    format : 'YYYY-MM-DD',
+    clearable : Boolean,
+    autoFocus : Boolean,
+    placeholder : {
+      type : String,
+      default : '请选择'
+    },
+    currentDate : [Date , String],
+    visible : Boolean,
+  },
+  methods : {
+    popupVisibleChange (visible) {
+      this.$emit('visibleChange' , visible);
+      this.$emit('visibleChange1' , visible);
+    }
+  },
+  render () {
+    const { prefixCls , visible } = this.$props;
+    const h = this.$createElement;
+    const triggerProps = {
+      props : {
+        action : 'click',
+        prefixCls : prefixCls,
+        visible : visible,
+        placement : 'bottomLeft',
+        transitionName : 'scaleTop'
+      },
+      on : {
+        popupVisibleChange : this.popupVisibleChange
+      }
+    }
+    return h(
+      Trigger,
+      triggerProps,
+      [
+        h(
+          'template',
+          {
+            slot : 'popup'
+          },
+          [this.$slots.popup]
+        ),
+        this.$slots.default
+      ]
+    )
+  }
+}