mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-11 08:52:28 +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>
<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>
</div>
</template>
```
## Attributes
| Prop | Type | Default | Description |
|-----------------|---------------|-------------|---------------------------------------------------|
| range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es) |
| placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size |
| 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-after | String | '' | Disable all dates after date in YYY-MM-DD format |
| shortcuts | Boolean/Array | true | the shortcuts for the range picker |
| Prop | Type | Default | Description |
|-------------------|---------------|-------------|---------------------------------------------------|
| range | Boolean | false | if true, the type is daterange |
| format | String | yyyy-MM-dd | Date formatting string |
| lang | String | zh | Translation (en/zh/es) |
| placeholder | String | | input placeholder text |
| width | String/Number | 210 | input size |
| 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-after | String | '' | Disable all dates after date in YYY-MM-DD format |
| 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
* true - show the default shortcuts
datepicker/calendar-panel.vue
+7 -3
View File
@@ -42,7 +42,6 @@ export default {
data () {
const translation = this.$parent.translation
return {
days: translation.days,
months: translation.months,
dates: [],
now: new Date(), // calendar-header 显示的时间, 用于切换日历
@@ -51,6 +50,11 @@ export default {
}
},
computed: {
days () {
const days = this.$parent.translation.days
const firstday = +this.$parent.firstDayOfWeek
return days.concat(days).slice(firstday, firstday + 7)
},
currentYear () {
return this.now.getFullYear()
},
@@ -94,9 +98,10 @@ export default {
}
})
}
const firstDayOfWeek = this.$parent.firstDayOfWeek
const time = new Date(this.now)
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 lastMonth = getCalendar(time, lastMonthfirst, lastMonthLength, 'lastMonth')
@@ -214,7 +219,6 @@ export default {
}
}
}
</script>
<style scoped>
datepicker/index.vue
+6 -1
View File
@@ -81,6 +81,11 @@ export default {
notAfter: {
type: String,
default: ''
},
firstDayOfWeek: {
default: 7,
type: Number,
validator: val => val >= 1 && val <= 7
}
},
data () {
@@ -218,7 +223,7 @@ export default {
}]
this.ranges.forEach((v, i) => {
v.text = this.translation.pickers[i]
})
})
} else {
this.ranges = []
}
demo/App.vue
+3 -4
View File
@@ -2,11 +2,11 @@
<div id="app">
<div class="demo">
<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 class="demo">
<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>
</template>
@@ -19,9 +19,8 @@ export default {
components: { DatePicker },
data () {
return {
value1: '2017-6-15',
value1: new Date(),
disabledDays: ['2017-6-13'],
notAfter: '2017-6-16',
value2: ''
}
}