添加语言选项

README.md

@@ -1,18 +1,43 @@
 # vue2-datepicker
 
-> A Vue.js project
+> A Datepicker Component For Vue2
 
-## Build Setup
+## Demo
+<>
+![image](https://github.com/mengxiong10/vue2-datepicker/tree/master/screenshot/demo.png)
 
-``` bash
+## Usage
-# install dependencies
-npm install
 
-# serve with hot reload at localhost:8080
+```html
-npm run dev
+<template>
+  <div>
+    <date-picker v-model="time1"></date-picker>
+    <date-picker v-model="time2" range></date-picker>
+  </div>
+</template>
 
-# build for production with minification
+<script>
-npm run build
+import DatePicker from 'datepicker/index.vue'
+
+export default {
+  components: { DatePicker },
+  data() {
+    return {
+      time1: '',
+      time2: '',
+    }
+  }
+}
+</script>
 ```
+## Attributes
+
+| Prop            | Type          | Default     | Description                           |
+|-----------------|---------------|-------------|---------------------------------------|
+| range           | Boolean       | false       | if true, the type is daterange        |
+| format          | String        | yyyy-MM-dd  | Date formatting string                |
+| language        | String        | zh          | Translation (en/zh)      |
+| placeholder     | String        |             | input placeholder text                |
+| width           | String/Number | 210         | input size                            |
+
 
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="app">
     <div class="demo">
-      <span class="label">默认:</span>
+      <span class="label">default:</span>
-      <date-picker v-model="value1"></date-picker>
+      <date-picker v-model="value1" lang="en"></date-picker>
     </div>
     <div class="demo">
       <span class="label">range:</span>
-      <date-picker v-model="value2" range></date-picker>
+      <date-picker v-model="value2" range lang="zh"></date-picker>
     </div>
   </div>
 </template>
@@ -19,7 +19,7 @@ export default {
   components:{ DatePicker },
   data () {
     return {
-      value1:'2015-10-10',
+      value1:'2017-5-9',
       value2:'',
     }
   }

src/datepicker/calendar-panel.vue

@@ -3,8 +3,8 @@
     <div class="calendar-header">
       <i class="calendar__prev-icon" @click="changeYear(-1)">&laquo;</i>
       <i class="calendar__prev-icon" @click="changeMonth(-1)">&lsaquo;</i>
-      <span>{{now.getFullYear() + '年'}}</span>
+      <span>{{months[now.getMonth()]}}</span>
-      <span>{{now.getMonth() + 1 + '月'}}</span>
+      <span>{{now.getFullYear()}}</span>
       <i class="calendar__next-icon" @click="changeYear(1)">&raquo;</i>
       <i class="calendar__next-icon" @click="changeMonth(1)" >&rsaquo;</i>
     </div>
@@ -29,6 +29,8 @@
 </template>
 
 <script>
+import Languages from './languages.js'
+
 export default {
   props: {
     startAt: null,
@@ -37,8 +39,10 @@ export default {
     show: Boolean,
   },
   data() {
+    const translation = this.$parent.translation
     return {
-      days: ['日', '一', '二', '三', '四', '五', '六'],
+      days: translation.days,
+      months: translation.months,
       dates: [],
       now: new Date(),
     }
@@ -203,8 +207,8 @@ export default {
 
 .calendar-table td,
 .calendar-table th {
-  width: 30px;
+  width: 32px;
-  height: 30px;
+  height: 32px;
   text-align: center;
 }
 

src/datepicker/index.vue

@@ -33,6 +33,7 @@
 
 <script>
 import CalendarPanel from './calendar-panel.vue'
+import Languages from './languages.js'
 
 export default {
   components: { CalendarPanel },
@@ -49,7 +50,11 @@ export default {
       type: [String, Number],
       default: 210,
     },
-    palceholder: String,
+    placeholder: String,
+    lang: {
+      type: String,
+      default: 'zh'
+    },
     value: null,
   },
   data() {
@@ -57,7 +62,7 @@ export default {
       showPopup: false,
       showCloseIcon: false,
       currentValue: this.value,
-      ranges: [],
+      ranges: [],  // 快捷选项 
     }
   },
   watch: {
@@ -78,8 +83,11 @@ export default {
     },
   },
   computed: {
+    translation() {
+      return Languages[this.lang] || Languages['en']
+    },
     innerPlaceholder() {
-      return this.placeholder ? this.placeholder : (this.range ? '请选择日期范围' : '请选择日期')
+      return this.placeholder || (this.range ? this.translation.placeholder.dateRange : this.translation.placeholder.date)
     },
     text() {
       if (!this.range && this.currentValue) {
@@ -159,32 +167,29 @@ export default {
       this.$emit('input', [range.start, range.end])
     },
     initRanges() {
-      const time = new Date()
+      this.ranges = [{
-      time.setMonth(time.getMonth() + 1, 0) // 切换到本月最后一天
-      this.ranges.push({
         text: '今天',
         start: new Date(),
         end: new Date(),
+      }, {
+        text: '未来一周',
+        start: new Date(),
+        end: new Date(Date.now() + 3600 * 1000 * 24 * 7),
+      }, {
+        text: '未来一个月',
+        start: new Date(),
+        end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
       }, {
         text: '最近一周',
         start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
         end: new Date(),
-      }, {
-        text: '今后一周',
-        start: new Date(),
-        end: new Date(Date.now() + 3600 * 1000 * 24 * 7),
-      }, {
-        text: '本月',
-        start: new Date(time.getFullYear(), time.getMonth(), 1),
-        end: time,
       }, {
         text: '最近一个月',
         start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
         end: new Date(),
-      }, {
+      }]
-        text: '最近三个月',
+      this.ranges.forEach((v, i) => {
-        start: new Date(Date.now() - 3600 * 1000 * 24 * 90),
+        v.text = this.translation.pickers[i]
-        end: new Date()
       })
     },
   },
@@ -221,7 +226,7 @@ export default {
 
 .datepicker-popup {
   position: absolute;
-  width: 234px;
+  width: 248px;
   margin-top: 1px;
   border: 1px solid #d9d9d9;
   background-color: #fff;
@@ -230,7 +235,7 @@ export default {
 }
 
 .range {
-  width: 468px;
+  width: 496px;
 }
 
 .input {

src/datepicker/languages.js

@@ -0,0 +1,20 @@
+export default {
+  'zh': {
+    'days': ['日', '一', '二', '三', '四', '五', '六'],
+    'months': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    'pickers': ['今天', '未来一周', '未来一个月', '最近一周', '最近一个月'],
+    'placeholder': {
+      'date': '请选择日期',
+      'dateRange': '请选择日期范围'
+    }
+  },
+  'en': {
+    'days': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    'months': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    'pickers': ['today', 'next week', 'next month', 'last week', 'last month'],
+    'placeholder': {
+      'date': 'Select Date',
+      'dateRange': 'Select Date Range'
+    }
+  },
+}