feat(MdDatepicker): custom first day of a week (#1409)

* feat(MdDatepicker): custom first day of a week

new props `md-first-day-of-a-week` for custom first day of a week.

fix #1397

* Revert "feat(MdDatepicker): custom first day of a week"

This reverts commit f0788be.

* feat(MdDatepicker): custom first day of a week

global config `locale.firstDayOfAWeek`

fix #1397

Author: VdustR

docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
     <md-datepicker v-model="selectedDate" />
+    <md-field>
+      <label for="movie">First day of a week</label>
+      <md-select v-model="firstDayOfAWeek">
+        <md-option value="0">Sunday</md-option>
+        <md-option value="1">Monday</md-option>
+      </md-select>
+      <span class="md-helper-text">This config is global.</span>
+    </md-field>
   </div>
 </template>
 
@@ -9,6 +17,16 @@
     name: 'BasicDatepicker',
     data: () => ({
       selectedDate: null
-    })
+    }),
+    computed: {
+      firstDayOfAWeek: {
+        get () {
+          return this.$material.locale.firstDayOfAWeek
+        },
+        set (val) {
+          this.$material.locale.firstDayOfAWeek = val
+        }
+      }
+    }
   }
 </script>

src/components/MdDatepicker/MdDatepickerDialog.vue

@@ -31,11 +31,12 @@
                   <md-button class="md-dense md-datepicker-month-trigger" @click="currentView = 'month'">{{ currentMonthName }} {{ currentYear }}</md-button>
 
                   <div class="md-datepicker-week">
-                    <span v-for="(day, index) in locale.shorterDays" :key="index">{{ day }}</span>
+                    <span v-for="(day, index) in locale.shorterDays" :key="index" v-if="index >= firstDayOfAWeek">{{ day }}</span>
+                    <span v-for="(day, index) in locale.shorterDays" :key="index" v-if="index < firstDayOfAWeek">{{ day }}</span>
                   </div>
 
                   <div class="md-datepicker-days">
-                    <span class="md-datepicker-empty" v-for="day in firstDayOfMonth" :key="'day-empty-'+day"></span>
+                    <span class="md-datepicker-empty" v-for="day in prefixEmptyDays" :key="'day-empty-'+day"></span>
                     <div class="md-datepicker-day" v-for="day in daysInMonth" :key="'day-'+day">
                       <span
                         class="md-datepicker-day-button"
@@ -109,6 +110,8 @@
   import MdArrowLeftIcon from 'core/icons/MdArrowLeftIcon'
   import MdDialog from 'components/MdDialog/MdDialog'
 
+  const daysInAWeek = 7
+
   const getElements = (el, selector) => {
     if (el && el.querySelector) {
       return el.querySelectorAll(selector)
@@ -139,6 +142,16 @@
       availableYears: null
     }),
     computed: {
+      firstDayOfAWeek () {
+        // normalize
+        let firstDayOfAWeek = Number(this.$material.locale.firstDayOfAWeek)
+        if (Number.isNaN(firstDayOfAWeek) || !Number.isFinite(firstDayOfAWeek)) {
+          return 0
+        }
+        firstDayOfAWeek = Math.floor(firstDayOfAWeek) % daysInAWeek
+        firstDayOfAWeek += firstDayOfAWeek < 0 ? daysInAWeek : 0
+        return firstDayOfAWeek
+      },
       locale() {
         return this.$material.locale;
       },
@@ -165,6 +178,11 @@
       firstDayOfMonth () {
         return startOfMonth(this.currentDate).getDay()
       },
+      prefixEmptyDays () {
+        let prefixEmptyDays = this.firstDayOfMonth - this.firstDayOfAWeek
+        prefixEmptyDays += prefixEmptyDays < 0 ? daysInAWeek : 0
+        return prefixEmptyDays
+      },
       daysInMonth () {
         return getDaysInMonth(this.currentDate)
       },

src/material.js

@@ -15,7 +15,8 @@ const init = () => {
       shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
-      shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D']
+      shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
+      firstDayOfAWeek: 0
     }
   })