Skip to content

Commit b27f3a4

Browse files
mst101mst101
committed
feat(datepicker): Make from/to dates inclusive
1 parent d6689f0 commit b27f3a4

File tree

17 files changed

+104
-94
lines changed

17 files changed

+104
-94
lines changed

‎docs/guide/DisabledDates/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ var state = {
2525
}
2626
```
2727

28-
All dates before 2016-01-05 are disabled.
28+
2016-01-05 and all earlier dates are disabled.
2929

3030
## Disable from a specific date
3131

@@ -37,7 +37,7 @@ var state = {
3737
}
3838
```
3939

40-
All dates after 2016-01-26 are disabled.
40+
2016-01-26 and all later dates are disabled.
4141

4242
## Disable specific days of the week
4343

@@ -102,7 +102,7 @@ var state = {
102102
}
103103
```
104104

105-
The dates from 2016-12-26 to 2016-12-29 (inclusive) and 2017-02-13 to 2017-03-24
105+
The dates from 2016-12-25 to 2016-12-30 (inclusive) and 2017-02-12 to 2017-03-25
106106
(inclusive) are disabled.
107107

108108
## Disable based on custom logic

‎docs/guide/HighlightedDates/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ var state = {
2323
}
2424
```
2525

26-
Everything before 2016-01-05 is highlighted.
26+
2016-01-05 and all earlier dates are highlighted.
2727

2828
## Highlight from a specific date
2929

@@ -35,7 +35,7 @@ var state = {
3535
}
3636
```
3737

38-
Everything after 2016-01-26 is highlighted.
38+
2016-01-26 and all later dates are highlighted.
3939

4040
## Highlight specific days of the week
4141

‎docs/guide/Migration/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
# Migration
22

3+
## 5.x.x to 6.x.x
4+
5+
- disabled and highlighted `to`/`from` dates are now **inclusive** e.g. `<DatePicker :disabled-dates="{ from: new Date(2023, 6, 15) }" />` now disables 15th July 2023 and all dates beyond.
6+
37
## 4.x.x to 5.x.x
48

9+
- the datepicker now supports Vue 3. Please use version 4.x.x for Vue 2 compatibility.
510
- the `selected` event has been deprecated in favour of `input`. You should therefore listen to `input` events on the datepicker, or simply bind your date via v-model: `<DatePicker v-model="myDate" />`
611
- a `typeable` datepicker no longer selects the date each time the input string can be parsed to a date. Instead, a typed date is only selected - and an `input` event fired - when the input field is focused and the `enter` key is pressed, or when the datepicker loses focus entirely.
712
- a new `changed` event is emitted whenever the selected date deviates from its previous value.

‎src/components/PickerDay.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -204,11 +204,7 @@ export default {
204204
return false
205205
}
206206
207-
const { from } = this.disabledConfig
208-
const disabledFromMonth = this.utils.monthYearDate(from.year, from.month)
209-
const pageMonth = this.utils.monthYearDate(this.pageYear, this.pageMonth)
210-
211-
return disabledFromMonth <= pageMonth
207+
return this.latestPossibleDate < this.firstOfNextMonth
212208
},
213209
/**
214210
* Is the previous month disabled?
@@ -219,11 +215,15 @@ export default {
219215
return false
220216
}
221217
222-
const { to } = this.disabledConfig
223-
const disabledToMonth = this.utils.monthYearDate(to.year, to.month)
224-
const pageMonth = this.utils.monthYearDate(this.pageYear, this.pageMonth)
225-
226-
return disabledToMonth >= pageMonth
218+
return this.earliestPossibleDate > this.lastOfPreviousMonth
219+
},
220+
/**
221+
* The first day of the next page's month.
222+
* @return {Date}
223+
*/
224+
lastOfPreviousMonth() {
225+
const d = new Date(this.pageDate)
226+
return new Date(this.utils.setDate(d, 0))
227227
},
228228
/**
229229
* Returns the current page's month as an integer.

‎src/components/PickerMonth.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export default {
103103
if (!this.disabledConfig.has.from) {
104104
return false
105105
}
106-
return this.disabledConfig.from.year <= this.pageYear
106+
return this.latestPossibleDate <= new Date(this.pageYear, 11, 31)
107107
},
108108
/**
109109
* Is the previous year disabled?
@@ -113,7 +113,7 @@ export default {
113113
if (!this.disabledConfig.has.to) {
114114
return false
115115
}
116-
return this.disabledConfig.to.year >= this.pageYear
116+
return this.earliestPossibleDate >= new Date(this.pageYear, 0, 1)
117117
},
118118
/**
119119
* Display the current page's year as the title.

‎src/components/PickerYear.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ export default {
113113
if (!this.disabledConfig.has.from) {
114114
return false
115115
}
116-
return this.disabledConfig.from.year <= this.pageDecadeEnd
116+
const firstDayOfNextDecade = new Date(this.pageDecadeEnd + 1, 0, 1)
117+
return this.latestPossibleDate < firstDayOfNextDecade
117118
},
118119
/**
119120
* Is the previous decade disabled?
@@ -123,7 +124,8 @@ export default {
123124
if (!this.disabledConfig.has.to) {
124125
return false
125126
}
126-
return this.disabledConfig.to.year >= this.pageDecadeStart
127+
const lastDayOfPreviousDecade = new Date(this.pageDecadeStart - 1, 11, 31)
128+
return this.earliestPossibleDate > lastDayOfPreviousDecade
127129
},
128130
/**
129131
* The year at which the current yearRange starts

‎src/utils/DateUtils.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -390,18 +390,6 @@ const utils = {
390390
)
391391
},
392392

393-
/**
394-
* Create a date object from a month and year, using UTC or not
395-
* @param {Number} year
396-
* @param {Number} monthIndex
397-
* @return {Date}
398-
*/
399-
monthYearDate(year, monthIndex) {
400-
return this.useUtc
401-
? new Date(Date.UTC(year, monthIndex, 1))
402-
: new Date(year, monthIndex, 1)
403-
},
404-
405393
/**
406394
* Return a new date object with hours/minutes/seconds/milliseconds removed.
407395
* Defaults to today's date, if no parameter is provided

‎src/utils/DisabledDate.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export default class DisabledDate {
4242

4343
return {
4444
to: () => {
45-
return has.to && date < disabledDates.to
45+
return has.to && date <= disabledDates.to
4646
},
4747
from: () => {
48-
return has.from && date > disabledDates.from
48+
return has.from && date >= disabledDates.from
4949
},
5050
range: () => {
5151
if (!has.ranges) return false
@@ -58,7 +58,7 @@ export default class DisabledDate {
5858
const hasTo = u.isDefined(thisRange, 'to')
5959

6060
return (
61-
hasFrom && hasTo && date < thisRange.to && date > thisRange.from
61+
hasFrom && hasTo && date <= thisRange.to && date >= thisRange.from
6262
)
6363
})
6464
},

‎src/utils/HighlightedDate.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ export default class HighlightedDate {
5050

5151
return {
5252
to: () => {
53-
return has.to && date < highlightedDates.to
53+
return has.to && date <= highlightedDates.to
5454
},
5555
from: () => {
56-
return has.from && date > highlightedDates.from
56+
return has.from && date >= highlightedDates.from
5757
},
5858
range: () => {
5959
if (!has.ranges) return false

‎test/e2e/specs/CellNavigation.feature

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ Feature: Cell Navigation
4343

4444
Examples:
4545
| # | openDate | direction | view | toOrFrom | disabled | page | focusedCell |
46-
| 1 | 2020-01-01 | up | day | to | 2019-12-26 | previous | 26 |
47-
| 2 | 2020-01-31 | down | day | from | 2020-02-05 | next | 5 |
46+
| 1 | 2020-01-01 | up | day | to | 2019-12-25 | previous | 26 |
47+
| 2 | 2020-01-31 | down | day | from | 2020-02-06 | next | 5 |
4848
| 3 | 2020-01-01 | up | month | to | 2019-12-01 | previous | December |
4949
| 4 | 2019-12-31 | down | month | from | 2020-01-31 | next | January |
5050
| 5 | 2022-01-01 | up | year | to | 2019-01-01 | previous | 2019 |
@@ -59,8 +59,8 @@ Feature: Cell Navigation
5959

6060
Examples:
6161
| # | openDate | direction | view | toOrFrom | disabled | focusedCell |
62-
| 1 | 2020-01-15 | left | day | to | 2020-01-14 | 14 |
63-
| 2 | 2020-01-15 | right | day | from | 2020-01-16 | 16 |
62+
| 1 | 2020-01-15 | left | day | to | 2020-01-13 | 14 |
63+
| 2 | 2020-01-15 | right | day | from | 2020-01-17 | 16 |
6464
| 3 | 2020-06-01 | left | month | to | 2020-05-15 | May |
6565
| 4 | 2020-06-01 | right | month | from | 2020-07-15 | July |
6666
| 5 | 2023-01-01 | left | year | to | 2022-06-01 | 2022 |

‎test/e2e/specs/InitialFocus/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe('Set the initial focus', () => {
6060
})
6161

6262
Then('the {string} day cell has focus', (firstAvailableCell) => {
63-
const cellId = firstAvailableCell === 'next-day' ? 19 : 4
63+
const cellId = firstAvailableCell === 'next-day' ? 20 : 4
6464

6565
cy.get(`[data-id=${cellId}]`).should('have.focus')
6666
})

‎test/unit/specs/DatePicker/Datepicker.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -696,8 +696,8 @@ describe('Datepicker mounted and attached to body with openDate', () => {
696696
it('cannot arrow to a disabled page', async () => {
697697
await wrapper.setProps({
698698
disabledDates: {
699-
to: new Date(2020, 0, 1),
700-
from: new Date(2020, 0, 31),
699+
to: new Date(2019, 11, 31),
700+
from: new Date(2020, 1, 1),
701701
},
702702
})
703703

‎test/unit/specs/DateUtils.spec.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -309,11 +309,4 @@ describe('UTC functions', () => {
309309
expect(dateUtils.getTime()).toEqual('T00:00:00')
310310
expect(utcUtils.getTime()).toEqual('T00:00:00Z')
311311
})
312-
313-
it('monthYearDate', () => {
314-
expect(dateUtils.monthYearDate(2000, 0)).toEqual(new Date(2000, 0, 1))
315-
expect(utcUtils.monthYearDate(2000, 0)).toEqual(
316-
new Date(Date.UTC(2000, 0, 1)),
317-
)
318-
})
319312
})

‎test/unit/specs/PickerDay/disabledDates.spec.js

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,10 @@ describe('PickerDay mounted', () => {
7272
},
7373
})
7474

75-
expect(wrapper.vm.isDisabledDate(new Date(2005, 6, 5))).toEqual(false)
76-
expect(wrapper.vm.isDisabledDate(new Date(2005, 6, 6))).toEqual(true)
77-
expect(wrapper.vm.isDisabledDate(new Date(2030, 11, 24))).toEqual(true)
78-
expect(wrapper.vm.isDisabledDate(new Date(2030, 11, 25))).toEqual(false)
75+
expect(wrapper.vm.isDisabledDate(new Date(2005, 6, 4))).toEqual(false)
76+
expect(wrapper.vm.isDisabledDate(new Date(2005, 6, 5))).toEqual(true)
77+
expect(wrapper.vm.isDisabledDate(new Date(2030, 11, 25))).toEqual(true)
78+
expect(wrapper.vm.isDisabledDate(new Date(2030, 11, 26))).toEqual(false)
7979
})
8080

8181
it('accepts an array of disabled days of the week', async () => {
@@ -117,16 +117,26 @@ describe('PickerDay mounted', () => {
117117
expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 11))).toEqual(false)
118118
})
119119

120-
it('sets `isNextDisabled` and `isPreviousDisabled` correctly', async () => {
120+
it.only('sets `isNextDisabled` and `isPreviousDisabled` correctly', async () => {
121121
await wrapper.setProps({
122122
disabledDates: {
123-
from: new Date(2016, 9, 26),
124-
to: new Date(2016, 9, 4),
123+
to: new Date(2016, 8, 30),
124+
from: new Date(2016, 10, 1),
125125
},
126126
})
127127

128128
expect(wrapper.vm.isNextDisabled).toBeTruthy()
129129
expect(wrapper.vm.isPreviousDisabled).toBeTruthy()
130+
131+
await wrapper.setProps({
132+
disabledDates: {
133+
to: new Date(2016, 8, 29),
134+
from: new Date(2016, 10, 2),
135+
},
136+
})
137+
138+
expect(wrapper.vm.isNextDisabled).toBeFalsy()
139+
expect(wrapper.vm.isPreviousDisabled).toBeFalsy()
130140
})
131141

132142
it('knows the earliest possible date', async () => {
@@ -135,7 +145,7 @@ describe('PickerDay mounted', () => {
135145
await wrapper.setProps({
136146
disabledDates: {
137147
dates: [new Date(2016, 9, 4)],
138-
to: new Date(2016, 9, 4),
148+
to: new Date(2016, 9, 3),
139149
},
140150
})
141151

@@ -154,7 +164,7 @@ describe('PickerDay mounted', () => {
154164
},
155165
})
156166

157-
expect(wrapper.vm.earliestPossibleDate).toEqual(new Date(2016, 9, 8))
167+
expect(wrapper.vm.earliestPossibleDate).toEqual(new Date(2016, 9, 9))
158168
})
159169

160170
it('knows the latest possible date', async () => {
@@ -163,25 +173,25 @@ describe('PickerDay mounted', () => {
163173
await wrapper.setProps({
164174
disabledDates: {
165175
dates: [new Date(2016, 9, 26)],
166-
from: new Date(2016, 9, 26),
176+
from: new Date(2016, 9, 27),
167177
},
168178
})
169179

170180
expect(wrapper.vm.latestPossibleDate).toEqual(new Date(2016, 9, 25))
171181

172182
await wrapper.setProps({
173183
disabledDates: {
174-
dates: [new Date(2016, 9, 26)],
184+
dates: [new Date(2016, 9, 19)],
175185
ranges: [
176186
{
177187
from: new Date(2016, 9, 20),
178188
to: new Date(2016, 9, 28),
179189
},
180190
],
181-
from: new Date(2016, 9, 26),
191+
from: new Date(2016, 9, 29),
182192
},
183193
})
184194

185-
expect(wrapper.vm.latestPossibleDate).toEqual(new Date(2016, 9, 20))
195+
expect(wrapper.vm.latestPossibleDate).toEqual(new Date(2016, 9, 25))
186196
})
187197
})

0 commit comments

Comments
 (0)