Skip to content
Permalink
Browse files

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
  • Loading branch information...
VdustR authored and marcosmoura committed Jan 23, 2018
1 parent a2cbc98 commit af0dc0a7b74647197ee910944b833911f502e843
@@ -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>
@@ -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)
},
@@ -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
}
})

0 comments on commit af0dc0a

Please sign in to comment.
You can’t perform that action at this time.