+41
-4
lines changedFilter options
+41
-4
lines changed Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
1 1
<template>
2 2
<div>
3 3
<md-datepicker v-model="selectedDate" />
4 +
<md-field>
5 +
<label for="movie">First day of a week</label>
6 +
<md-select v-model="firstDayOfAWeek">
7 +
<md-option value="0">Sunday</md-option>
8 +
<md-option value="1">Monday</md-option>
9 +
</md-select>
10 +
<span class="md-helper-text">This config is global.</span>
11 +
</md-field>
4 12
</div>
5 13
</template>
6 14
@@ -9,6 +17,16 @@
9 17
name: 'BasicDatepicker',
10 18
data: () => ({
11 19
selectedDate: null
12 -
})
20 +
}),
21 +
computed: {
22 +
firstDayOfAWeek: {
23 +
get () {
24 +
return this.$material.locale.firstDayOfAWeek
25 +
},
26 +
set (val) {
27 +
this.$material.locale.firstDayOfAWeek = val
28 +
}
29 +
}
30 +
}
13 31
}
14 32
</script>
Original file line number Diff line number Diff line change
@@ -31,11 +31,12 @@
31 31
<md-button class="md-dense md-datepicker-month-trigger" @click="currentView = 'month'">{{ currentMonthName }} {{ currentYear }}</md-button>
32 32 33 33
<div class="md-datepicker-week">
34 -
<span v-for="(day, index) in locale.shorterDays" :key="index">{{ day }}</span>
34 +
<span v-for="(day, index) in locale.shorterDays" :key="index" v-if="index >= firstDayOfAWeek">{{ day }}</span>
35 +
<span v-for="(day, index) in locale.shorterDays" :key="index" v-if="index < firstDayOfAWeek">{{ day }}</span>
35 36
</div>
36 37 37 38
<div class="md-datepicker-days">
38 -
<span class="md-datepicker-empty" v-for="day in firstDayOfMonth" :key="'day-empty-'+day"></span>
39 +
<span class="md-datepicker-empty" v-for="day in prefixEmptyDays" :key="'day-empty-'+day"></span>
39 40
<div class="md-datepicker-day" v-for="day in daysInMonth" :key="'day-'+day">
40 41
<span
41 42
class="md-datepicker-day-button"
@@ -109,6 +110,8 @@
109 110
import MdArrowLeftIcon from 'core/icons/MdArrowLeftIcon'
110 111
import MdDialog from 'components/MdDialog/MdDialog'
111 112 113 +
const daysInAWeek = 7
114 + 112 115
const getElements = (el, selector) => {
113 116
if (el && el.querySelector) {
114 117
return el.querySelectorAll(selector)
@@ -139,6 +142,16 @@
139 142
availableYears: null
140 143
}),
141 144
computed: {
145 +
firstDayOfAWeek () {
146 +
// normalize
147 +
let firstDayOfAWeek = Number(this.$material.locale.firstDayOfAWeek)
148 +
if (Number.isNaN(firstDayOfAWeek) || !Number.isFinite(firstDayOfAWeek)) {
149 +
return 0
150 +
}
151 +
firstDayOfAWeek = Math.floor(firstDayOfAWeek) % daysInAWeek
152 +
firstDayOfAWeek += firstDayOfAWeek < 0 ? daysInAWeek : 0
153 +
return firstDayOfAWeek
154 +
},
142 155
locale() {
143 156
return this.$material.locale;
144 157
},
@@ -165,6 +178,11 @@
165 178
firstDayOfMonth () {
166 179
return startOfMonth(this.currentDate).getDay()
167 180
},
181 +
prefixEmptyDays () {
182 +
let prefixEmptyDays = this.firstDayOfMonth - this.firstDayOfAWeek
183 +
prefixEmptyDays += prefixEmptyDays < 0 ? daysInAWeek : 0
184 +
return prefixEmptyDays
185 +
},
168 186
daysInMonth () {
169 187
return getDaysInMonth(this.currentDate)
170 188
},
@@ -15,7 +15,8 @@ const init = () => {
15 15
shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
16 16
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
17 17
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
18 -
shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D']
18 +
shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
19 +
firstDayOfAWeek: 0
19 20
}
20 21
})
21 22 You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4