mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-24 07:10:36 +03:00
Code Activity

添加first-day-of-week 参数

Browse Source
This commit is contained in:
mxie
2017-09-13 13:16:20 +08:00
parent b4b69cad4e
commit c260270a3d
4 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+13 -12
View File
@@ -39,24 +39,25 @@ export default {
<template> <template>
<div> <div>
<date-picker v-model="time1"></date-picker> <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
<date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker> <date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
</div> </div>
</template> </template>
``` ```
## Attributes ## Attributes
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|-----------------|---------------|-------------|---------------------------------------------------| |-------------------|---------------|-------------|---------------------------------------------------|
| range | Boolean | false | if true, the type is daterange | | range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string | | format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es) | | lang | String | zh | Translation (en/zh/es) |
| placeholder | String | | input placeholder text | | placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size | | width | String/Number | 210 | input size |
| disabled-days | Array | [] | Days in YYYY-MM-DD format to disable | | disabled-days | Array | [] | Days in YYYY-MM-DD format to disable |
| not-before | String | '' | Disable all dates before date in YYY-MM-DD format | | not-before | String | '' | Disable all dates before date in YYY-MM-DD format |
| not-after | String | '' | Disable all dates after date in YYY-MM-DD format | | not-after | String | '' | Disable all dates after date in YYY-MM-DD format |
| shortcuts | Boolean/Array | true | the shortcuts for the range picker | | shortcuts | Boolean/Array | true | the shortcuts for the range picker |
| first-day-of-week | Number | 7 | set the first day of week (1-7) |
## shortcuts ## shortcuts
* true - show the default shortcuts * true - show the default shortcuts
datepicker/calendar-panel.vue
+7 -3
View File
@@ -42,7 +42,6 @@ export default {
data () { data () {
const translation = this.$parent.translation const translation = this.$parent.translation
return { return {
days: translation.days,
months: translation.months, months: translation.months,
dates: [], dates: [],
now: new Date(), // calendar-header 显示的时间, 用于切换日历 now: new Date(), // calendar-header 显示的时间, 用于切换日历
@@ -51,6 +50,11 @@ export default {
} }
}, },
computed: { computed: {
days () {
const days = this.$parent.translation.days
const firstday = +this.$parent.firstDayOfWeek
return days.concat(days).slice(firstday, firstday + 7)
},
currentYear () { currentYear () {
return this.now.getFullYear() return this.now.getFullYear()
}, },
@@ -94,9 +98,10 @@ export default {
} }
}) })
} }
const firstDayOfWeek = this.$parent.firstDayOfWeek
const time = new Date(this.now) const time = new Date(this.now)
time.setDate(0) // 把时间切换到上个月最后一天 time.setDate(0) // 把时间切换到上个月最后一天
const lastMonthLength = time.getDay() + 1 // time.getDay() 0是星期天, 1是星期一 ... const lastMonthLength = (time.getDay() + 7 - firstDayOfWeek) % 7 + 1 // time.getDay() 0是星期天, 1是星期一 ...
const lastMonthfirst = time.getDate() - (lastMonthLength - 1) const lastMonthfirst = time.getDate() - (lastMonthLength - 1)
const lastMonth = getCalendar(time, lastMonthfirst, lastMonthLength, 'lastMonth') const lastMonth = getCalendar(time, lastMonthfirst, lastMonthLength, 'lastMonth')
@@ -214,7 +219,6 @@ export default {
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
datepicker/index.vue
+5
View File
@@ -81,6 +81,11 @@ export default {
notAfter: { notAfter: {
type: String, type: String,
default: '' default: ''
},
firstDayOfWeek: {
default: 7,
type: Number,
validator: val => val >= 1 && val <= 7
} }
}, },
data () { data () {
demo/App.vue
+3 -4
View File
@@ -2,11 +2,11 @@
<div id="app"> <div id="app">
<div class="demo"> <div class="demo">
<span class="label">default:</span> <span class="label">default:</span>
<date-picker v-model="value1" lang="en" :not-after="notAfter"></date-picker> <date-picker v-model="value1" lang="en" :first-day-of-week="1"></date-picker>
</div> </div>
<div class="demo"> <div class="demo">
<span class="label">range:</span> <span class="label">range:</span>
<date-picker v-model="value2" range lang="zh" :not-after="notAfter" :disabled-days="disabledDays"></date-picker> <date-picker v-model="value2" range lang="zh" :disabled-days="disabledDays"></date-picker>
</div> </div>
</div> </div>
</template> </template>
@@ -19,9 +19,8 @@ export default {
components: { DatePicker }, components: { DatePicker },
data () { data () {
return { return {
value1: '2017-6-15', value1: new Date(),
disabledDays: ['2017-6-13'], disabledDays: ['2017-6-13'],
notAfter: '2017-6-16',
value2: '' value2: ''
} }
} }