Skip to content

Commit 1675da6

Browse files
committed
fix(datepicker): Clear inline date with click
1 parent a993287 commit 1675da6

File tree

3 files changed

+53
-7
lines changed

3 files changed

+53
-7
lines changed

src/components/Datepicker.vue

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,12 @@ export default {
401401
this.setInitialView()
402402
}
403403
},
404+
inline(isInline) {
405+
if (!isInline) {
406+
this.close()
407+
}
408+
this.setInitialView()
409+
},
404410
isActive(hasJustBecomeActive, isNoLongerActive) {
405411
if (hasJustBecomeActive) {
406412
this.datepickerIsActive()
@@ -578,7 +584,15 @@ export default {
578584
}
579585
580586
this.$refs.dateInput.typedDate = ''
581-
this.selectDate(new Date(cell.timestamp))
587+
const date = new Date(cell.timestamp)
588+
589+
if (this.isInline && !this.dateHasChanged(date)) {
590+
this.selectedDate = null
591+
this.$emit('cleared')
592+
return
593+
}
594+
595+
this.selectDate(date)
582596
this.focus.delay = cell.isNextMonth ? this.slideDuration : 0
583597
this.focus.refs = this.isInline ? ['tabbableCell'] : ['input']
584598
this.close()
@@ -696,7 +710,7 @@ export default {
696710
this.hasClass(activeElement, 'cell') &&
697711
!this.hasClass(activeElement, 'open')
698712
699-
return !this.isMinimumView || isOpenCellFocused
713+
return this.isInline || !this.isMinimumView || isOpenCellFocused
700714
},
701715
/**
702716
* Opens the calendar with the relevant view: 'day', 'month', or 'year'
@@ -780,12 +794,13 @@ export default {
780794
* @param {Date=} date The date to set for the page
781795
*/
782796
setPageDate(date) {
783-
const dateTemp = new Date(date || this.computedOpenDate)
784-
let pageTimestamp = this.utils.setDate(dateTemp, 1)
797+
const validDate = this.utils.parseAsDate(date) || this.computedOpenDate
798+
let dateTemp = this.utils.getNewDateObject(validDate)
799+
dateTemp = new Date(this.utils.setDate(dateTemp, 1))
785800
786-
if (this.view === 'year') {
787-
pageTimestamp = this.utils.setMonth(new Date(pageTimestamp), 0)
788-
}
801+
const pageTimestamp = this.utils
802+
.adjustDateToView(dateTemp, this.view)
803+
.valueOf()
789804
790805
this.pageTimestamp = pageTimestamp
791806
},

test/e2e/specs/CellSelection.feature

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,13 @@ Feature: Cell Selection
3434
| # | initialView | view |
3535
| 1 | year | month |
3636
| 2 | month | day |
37+
38+
39+
@id-3
40+
Scenario: Select and deselect a cell when inline>
41+
Given an inline calendar is open
42+
When the user clicks on the tabbable cell
43+
Then the tabbable cell has focus
44+
And the date is selected
45+
When the user clicks on the tabbable cell
46+
And the date is not selected

test/e2e/specs/CellSelection/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ describe('Cell selection', () => {
1919
)
2020

2121
When('the user clicks on the tabbable cell', () => {
22+
the('picker-cells').should('have.length', 1)
2223
clickThe('tabbable-cell')
2324
})
2425

@@ -54,4 +55,24 @@ describe('Cell selection', () => {
5455
the('tabbable-cell').should('be.focused')
5556
})
5657
})
58+
59+
describe('@id-3: Select and deselect a cell when inline', () => {
60+
Given('an inline calendar is open', () => {
61+
createCalendar({
62+
openDate: new Date(2020, 2, 15),
63+
inline: true,
64+
})
65+
66+
the('picker-cells').should('have.length', 1)
67+
the('calendar').should('be.visible')
68+
})
69+
70+
Then('the date is selected', () => {
71+
the('tabbable-cell').should('have.class', 'selected')
72+
})
73+
74+
Then('the date is not selected', () => {
75+
the('tabbable-cell').should('not.have.class', 'selected')
76+
})
77+
})
5778
})

0 commit comments

Comments
 (0)