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

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

@@ -70,6 +70,12 @@
             type: 'Boolean',
             description: 'Override native browser pickers by changing type of input to text.',
             defaults: 'true'
+          },
+          {
+            name: 'md-first-day-of-a-week',
+            type: 'Number|String',
+            description: 'The first day of a week. <code>0</code> stand for Sunday and <code>1</code> stand for Monday.',
+            defaults: '0'
           }
         ]
       }

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

@@ -1,6 +1,8 @@
 <template>
   <div>
     <md-datepicker v-model="selectedDate" />
+    Start from Monday:
+    <md-datepicker v-model="selectedDate" md-first-day-of-a-week="1" />
   </div>
 </template>
 

src/components/MdDatepicker/MdDatepicker.vue

@@ -6,7 +6,7 @@
     <slot />
 
     <keep-alive>
-      <md-datepicker-dialog :md-date.sync="selectedDate" :md-disabled-dates="mdDisabledDates" v-if="showDialog" @md-closed="toggleDialog" />
+      <md-datepicker-dialog :md-date.sync="selectedDate" :md-disabled-dates="mdDisabledDates" :md-first-day-of-a-week="mdFirstDayOfAWeek" v-if="showDialog" @md-closed="toggleDialog" />
     </keep-alive>
 
     <md-overlay class="md-datepicker-overlay" md-fixed :md-active="showDialog" @click="toggleDialog" />
@@ -44,7 +44,8 @@
       mdOverrideNative: {
         type: Boolean,
         default: true
-      }
+      },
+      mdFirstDayOfAWeek: {}
     },
     data: () => ({
       showDialog: false,

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)
@@ -127,7 +130,8 @@
     },
     props: {
       mdDate: Date,
-      mdDisabledDates: [Array, Function]
+      mdDisabledDates: [Array, Function],
+      mdFirstDayOfAWeek: null
     },
     data: () => ({
       currentDate: null,
@@ -139,6 +143,16 @@
       availableYears: null
     }),
     computed: {
+      firstDayOfAWeek () {
+        // normalize
+        let firstDayOfAWeek = Number(this.mdFirstDayOfAWeek)
+        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 +179,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)
       },