Merge pull request #57 from frohikey/week-starts-with

DatePicker property week-starts-with
uiv-lib · Aug 21, 2017 · 0131e8c · 0131e8c
2 parents b5b9e06 + a3ead26
commit 0131e8c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 11 deletions.
diff --git a/src/components/datepicker/DatePicker.vue b/src/components/datepicker/DatePicker.vue
@@ -6,6 +6,7 @@
                :date="valueDateObj"
                :today="now"
                :limit="limit"
+               :week-starts-with="weekStartsWith"
                @month-change="onMonthChange"
                @year-change="onYearChange"
                @date-change="onDateChange"
@@ -77,6 +78,13 @@
       dateParser: {
         type: Function,
         'default': Date.parse
+      },
+      weekStartsWith: {
+        type: Number,
+        default: 7,
+        validator (value) {
+          return value >= 1 && value <= 7
+        }
       }
     },
     data () {

diff --git a/src/components/datepicker/DateView.vue b/src/components/datepicker/DateView.vue
@@ -48,13 +48,21 @@
 
   export default {
     mixins: [Locale],
-    props: ['month', 'year', 'date', 'today', 'limit'],
-    data () {
-      return {
-        weekDays: [7, 1, 2, 3, 4, 5, 6]
-      }
-    },
+    props: ['month', 'year', 'date', 'today', 'limit', 'weekStartsWith'],
     computed: {
+      weekDays () {
+        let days = []
+        let firstDay = this.weekStartsWith
+        while (days.length < 7) {
+          days.push(firstDay)
+          firstDay++
+          if (firstDay > 7) {
+            firstDay = 1
+          }
+        }
+
+        return days
+      },
       yearMonthStr () {
         return typeof this.month !== 'undefined' ? `${this.year} ${this.t(`uiv.datePicker.month${this.month + 1}`)}` : this.year
       },
@@ -68,7 +76,11 @@
         for (let i = 0; i < 6; i++) {
           rows.push([])
           for (let j = 0; j < 7; j++) {
-            let currentIndex = i * 7 + j
+            let plus = this.weekDays[0]
+            if (plus === 7) {
+              plus = 0
+            }
+            let currentIndex = i * 7 + j + plus
             let date = {year: this.year, disabled: false}
             // date in and not in current month
             if (currentIndex < startIndex) {

diff --git a/src/docs/pages/DatePickerDoc.vue b/src/docs/pages/DatePickerDoc.vue
@@ -15,7 +15,7 @@
                          :today-btn="todayBtn"
                          :clear-btn="clearBtn"
                          :limit-from="limitFrom"
-                         :format="format"
+                         :format="format"                         
                          :limit-to="limitTo"></date-picker>
           </div>
         </div>
@@ -38,7 +38,8 @@
                              :clear-btn="clearBtn"
                              :limit-from="limitFrom"
                              :limit-to="limitTo"
-                             :format="format"
+                             :format="format"                             
+                             :week-starts-with="weekStartsWith"
                              :close-on-selected="closeOnSelected"></date-picker>
               </li>
             </template>
@@ -81,7 +82,13 @@
                 </select>
                 <p class="help-block">* Some browser (e.g. IE) might not support all of these formats.</p>
               </div>
-            </div>
+              <div class="col-md-6">
+                <label>Week starts with</label>
+                <select class="form-control" v-model="weekStartsWith">
+                  <option v-for="day in 7" :value="day">{{ day }}</option>                  
+                </select>                
+              </div>     
+            </div>       
           </form>
         </div>
       </div>
@@ -190,6 +197,12 @@ Useful when The formatted String can not be correctly parsed to Date type by <co
   return moment(value, 'DD-MM-YYYY').toDate().getTime()
 }</code></pre>
 `
+            },
+            {
+              name: 'week-starts-with',
+              type: 'Number',
+              desc: 'Starting day of the week.',
+              'default': '7'
             }
           ]
         },
@@ -200,7 +213,8 @@ Useful when The formatted String can not be correctly parsed to Date type by <co
         closeOnSelected: true,
         limitFrom: '',
         limitTo: '',
-        format: 'yyyy-MM-dd'
+        format: 'yyyy-MM-dd',
+        weekStartsWith: 7
       }
     },
     computed: {