From c260270a3dcf97c68ba875a3335f431af13f374c Mon Sep 17 00:00:00 2001
From: mxie <15623530290@163.com>
Date: Wed, 13 Sep 2017 13:16:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0first-day-of-week=20=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                     | 25 +++++++++++++------------
 datepicker/calendar-panel.vue | 10 +++++++---
 datepicker/index.vue          |  7 ++++++-
 demo/App.vue                  |  7 +++----
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 2a9aaf8..2d1b7cd 100644
--- a/README.md
+++ b/README.md
@@ -39,24 +39,25 @@ export default {
 
 <template>
   <div>
-    <date-picker v-model="time1"></date-picker>
+    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
     <date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
   </div>
 </template>
 ```
 ## Attributes
 
-| Prop            | Type          | Default     | Description                                       |
-|-----------------|---------------|-------------|---------------------------------------------------|
-| range           | Boolean       | false       | if true, the type is daterange                    |
-| format          | String        | yyyy-MM-dd  | Date formatting string                            |
-| lang            | String        | zh          | Translation (en/zh/es)                            |
-| placeholder     | String        |             | input placeholder text                            |
-| width           | String/Number | 210         | input size                                        |
-| disabled-days   | Array         | []          | Days in YYYY-MM-DD format to disable              |
-| not-before      | String        | ''          | Disable all dates before date in YYY-MM-DD format |
-| not-after       | String        | ''          | Disable all dates after date in YYY-MM-DD format  |
-| shortcuts       | Boolean/Array | true        | the shortcuts for the range picker                |
+| Prop              | Type          | Default     | Description                                       |
+|-------------------|---------------|-------------|---------------------------------------------------|
+| range             | Boolean       | false       | if true, the type is daterange                    |
+| format            | String        | yyyy-MM-dd  | Date formatting string                            |
+| lang              | String        | zh          | Translation (en/zh/es)                            |
+| placeholder       | String        |             | input placeholder text                            |
+| width             | String/Number | 210         | input size                                        |
+| disabled-days     | Array         | []          | Days in YYYY-MM-DD format to disable              |
+| not-before        | String        | ''          | Disable all dates before date in YYY-MM-DD format |
+| not-after         | String        | ''          | Disable all dates after date in YYY-MM-DD format  |
+| shortcuts         | Boolean/Array | true        | the shortcuts for the range picker                |
+| first-day-of-week | Number        | 7           | set the first day of week (1-7)                   |
 
 ## shortcuts
 * true -      show the default shortcuts
diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index 68ac86f..e3df7cd 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -42,7 +42,6 @@ export default {
   data () {
     const translation = this.$parent.translation
     return {
-      days: translation.days,
       months: translation.months,
       dates: [],
       now: new Date(), // calendar-header 显示的时间, 用于切换日历
@@ -51,6 +50,11 @@ export default {
     }
   },
   computed: {
+    days () {
+      const days = this.$parent.translation.days
+      const firstday = +this.$parent.firstDayOfWeek
+      return days.concat(days).slice(firstday, firstday + 7)
+    },
     currentYear () {
       return this.now.getFullYear()
     },
@@ -94,9 +98,10 @@ export default {
           }
         })
       }
+      const firstDayOfWeek = this.$parent.firstDayOfWeek
       const time = new Date(this.now)
       time.setDate(0) // 把时间切换到上个月最后一天
-      const lastMonthLength = time.getDay() + 1  // time.getDay() 0是星期天, 1是星期一 ...
+      const lastMonthLength = (time.getDay() + 7 - firstDayOfWeek) % 7 + 1  // time.getDay() 0是星期天, 1是星期一 ...
       const lastMonthfirst = time.getDate() - (lastMonthLength - 1)
       const lastMonth = getCalendar(time, lastMonthfirst, lastMonthLength, 'lastMonth')
 
@@ -214,7 +219,6 @@ export default {
     }
   }
 }
-
 </script>
 
 <style scoped>
diff --git a/datepicker/index.vue b/datepicker/index.vue
index 513193d..9295db1 100644
--- a/datepicker/index.vue
+++ b/datepicker/index.vue
@@ -81,6 +81,11 @@ export default {
     notAfter: {
       type: String,
       default: ''
+    },
+    firstDayOfWeek: {
+      default: 7,
+      type: Number,
+      validator: val => val >= 1 && val <= 7
     }
   },
   data () {
@@ -218,7 +223,7 @@ export default {
         }]
         this.ranges.forEach((v, i) => {
           v.text = this.translation.pickers[i]
-        })       
+        })
       } else {
         this.ranges = []
       }
diff --git a/demo/App.vue b/demo/App.vue
index 6458d16..54c80a0 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -2,11 +2,11 @@
   <div id="app">
     <div class="demo">
       <span class="label">default:</span>
-      <date-picker v-model="value1" lang="en" :not-after="notAfter"></date-picker>
+      <date-picker v-model="value1" lang="en" :first-day-of-week="1"></date-picker>
     </div>
     <div class="demo">
       <span class="label">range:</span>
-      <date-picker v-model="value2" range lang="zh" :not-after="notAfter" :disabled-days="disabledDays"></date-picker>
+      <date-picker v-model="value2" range lang="zh" :disabled-days="disabledDays"></date-picker>
     </div>
   </div>
 </template>
@@ -19,9 +19,8 @@ export default {
   components: { DatePicker },
   data () {
     return {
-      value1: '2017-6-15',
+      value1: new Date(),
       disabledDays: ['2017-6-13'],
-      notAfter: '2017-6-16',
       value2: ''
     }
   }