diff --git a/.gitignore b/.gitignore
index 219fb81..0d09221 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
node_modules/
npm-debug.log
yarn-error.log
+package-lock.json
diff --git a/README.md b/README.md
index 8abd9e0..60ecfba 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,13 @@ export default {
return {
time1: '',
time2: '',
+ shortcuts: [
+ {
+ text: 'Today',
+ start: new Date(),
+ end: new Date()
+ }
+ ]
}
}
}
@@ -32,19 +39,36 @@ export default {
-
-
+
+
```
## 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/fr) |
-| placeholder | String | | input placeholder text |
-| width | String/Number | 210 | input size |
+| 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/fs) |
+| 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
+* false - hide the shortcuts
+* Object[] - custom shortcuts, [{text, start, end}]
+
+| Prop | Type | Description |
+|-----------------|---------------|------------------------|
+| text | String | Text |
+| start | Date | Start Date |
+| end | Date | End Date |
+
diff --git a/datepicker/calendar-panel.vue b/datepicker/calendar-panel.vue
index d0f0888..e3df7cd 100644
--- a/datepicker/calendar-panel.vue
+++ b/datepicker/calendar-panel.vue
@@ -4,7 +4,7 @@
«
‹
»
- ›
+ ›
{{months[currentMonth]}}
{{currentYear}}
@@ -17,10 +17,7 @@
- | {{cell.day}} |
+ {{cell.day}} |
@@ -45,7 +42,6 @@ export default {
data () {
const translation = this.$parent.translation
return {
- days: translation.days,
months: translation.months,
dates: [],
now: new Date(), // calendar-header 显示的时间, 用于切换日历
@@ -54,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()
},
@@ -88,7 +89,7 @@ export default {
function getCalendar (time, firstday, length, classes) {
return Array.apply(null, { length }).map((v, i) => { // eslint-disable-line
let day = firstday + i
- const date = new Date(time.getFullYear(), time.getMonth(), day)
+ const date = new Date(time.getFullYear(), time.getMonth(), day, 0, 0, 0)
return {
title: date.toLocaleDateString(),
date,
@@ -97,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')
@@ -129,11 +131,18 @@ export default {
const endTime = this.endAt ? new Date(this.endAt).setHours(0, 0, 0, 0) : 0
const today = new Date().setHours(0, 0, 0, 0)
+ if (this.$parent.disabledDays.some(v => +new Date(v) === +cell.date) ||
+ (this.$parent.notBefore !== '' && cell.date.getTime() < (new Date(this.$parent.notBefore)).getTime()) ||
+ (this.$parent.notAfter !== '' && cell.date.getTime() > (new Date(this.$parent.notAfter)).getTime())) {
+ return 'disabled'
+ }
+
classes.push(cell.classes)
if (cellTime === today) {
classes.push('today')
}
+
// range classes
if (cellTime === curTime) {
classes.push('current')
@@ -210,11 +219,9 @@ export default {
}
}
}
-
diff --git a/datepicker/index.vue b/datepicker/index.vue
index 0e0fe5d..9295db1 100644
--- a/datepicker/index.vue
+++ b/datepicker/index.vue
@@ -20,14 +20,22 @@
ref="calendar"
v-show="showPopup">
-
+
-
@@ -57,7 +65,28 @@ export default {
type: String,
default: 'zh'
},
- value: null
+ value: null,
+ shortcuts: {
+ type: [Boolean, Array],
+ default: true
+ },
+ disabledDays: {
+ type: Array,
+ default: function () { return [] }
+ },
+ notBefore: {
+ type: String,
+ default: ''
+ },
+ notAfter: {
+ type: String,
+ default: ''
+ },
+ firstDayOfWeek: {
+ default: 7,
+ type: Number,
+ validator: val => val >= 1 && val <= 7
+ }
},
data () {
return {
@@ -87,7 +116,6 @@ export default {
showPopup (val) {
if (val) {
this.$nextTick(this.displayPopup)
- // this.displayPopup()
}
}
},
@@ -109,9 +137,6 @@ export default {
}
},
methods: {
- selectDate (date) {
-
- },
closePopup () {
this.showPopup = false
},
@@ -176,26 +201,32 @@ export default {
this.$emit('input', [range.start, range.end])
},
initRanges () {
- this.ranges = [{
- text: '未来7天',
- start: new Date(),
- end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
- }, {
- text: '未来30天',
- start: new Date(),
- end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
- }, {
- text: '最近7天',
- start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
- end: new Date()
- }, {
- text: '最近30天',
- start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
- end: new Date()
- }]
- this.ranges.forEach((v, i) => {
- v.text = this.translation.pickers[i]
- })
+ if (Array.isArray(this.shortcuts)) {
+ this.ranges = this.shortcuts
+ } else if (this.shortcuts) {
+ this.ranges = [{
+ text: '未来7天',
+ start: new Date(),
+ end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
+ }, {
+ text: '未来30天',
+ start: new Date(),
+ end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
+ }, {
+ text: '最近7天',
+ start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
+ end: new Date()
+ }, {
+ text: '最近30天',
+ start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
+ end: new Date()
+ }]
+ this.ranges.forEach((v, i) => {
+ v.text = this.translation.pickers[i]
+ })
+ } else {
+ this.ranges = []
+ }
},
displayPopup () {
const dw = document.documentElement.clientWidth
diff --git a/demo/App.vue b/demo/App.vue
new file mode 100644
index 0000000..54c80a0
--- /dev/null
+++ b/demo/App.vue
@@ -0,0 +1,38 @@
+
+
+
+ default:
+
+
+
+ range:
+
+
+