From 1c31375fa926858d02f0d7225254a7835a9f417d Mon Sep 17 00:00:00 2001 From: Jesus Guerrero Date: Fri, 12 Oct 2018 12:10:58 -0400 Subject: [PATCH 1/9] add showCalendarOnFocus prop --- example/Demo.vue | 8 ++++++++ src/components/DateInput.vue | 15 +++++++++++++-- src/components/Datepicker.vue | 4 +++- test/unit/specs/DateInput/DateInput.spec.js | 8 ++++++++ 4 files changed, 32 insertions(+), 3 deletions(-) diff --git a/example/Demo.vue b/example/Demo.vue index cd085741..d27c3a0f 100644 --- a/example/Demo.vue +++ b/example/Demo.vue @@ -17,6 +17,14 @@ +
+

datepicker opens on focus

+ + + <datepicker placeholder="Type or select date" :show-calendar-on-focus="true"></datepicker> + +
+

Bootstrap styled datepicker

@@ -62,7 +63,8 @@ export default { required: Boolean, typeable: Boolean, bootstrapStyling: Boolean, - useUtc: Boolean + useUtc: Boolean, + showCalendarOnFocus: Boolean }, data () { const constructedDateUtils = makeDateUtils(this.useUtc) @@ -102,7 +104,16 @@ export default { }, methods: { showCalendar () { - this.$emit('showCalendar') + // prevent to emit the event twice if we are listening focus + if (!this.showCalendarOnFocus) { + this.$emit('showCalendar') + } + }, + + showFocusCalendar () { + if (this.showCalendarOnFocus) { + this.$emit('showCalendar', true) + } }, /** * Attempt to parse a typed date diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 92d6a91a..1a9eb467 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -22,6 +22,7 @@ :required="required" :bootstrapStyling="bootstrapStyling" :use-utc="useUtc" + :show-calendar-on-focus="showCalendarOnFocus" @showCalendar="showCalendar" @closeCalendar="close" @typedDate="setTypedDate" @@ -157,7 +158,8 @@ export default { maximumView: { type: String, default: 'year' - } + }, + showCalendarOnFocus: Boolean }, data () { const startDate = this.openDate ? new Date(this.openDate) : new Date() diff --git a/test/unit/specs/DateInput/DateInput.spec.js b/test/unit/specs/DateInput/DateInput.spec.js index 82d17e50..7a8ee396 100644 --- a/test/unit/specs/DateInput/DateInput.spec.js +++ b/test/unit/specs/DateInput/DateInput.spec.js @@ -80,4 +80,12 @@ describe('DateInput', () => { wrapper.find('input').trigger('blur') expect(wrapper.emitted('closeCalendar')).toBeTruthy() }) + + it('should open the calendar on focus', () => { + wrapper.setProps({ + showCalendarOnFocus: true + }) + wrapper.find('input').trigger('focus') + expect(wrapper.emitted().showCalendar).toBeTruthy() + }) }) From 19d65e2e8c3857486e280a3408d6b68886ea4eb3 Mon Sep 17 00:00:00 2001 From: Matthew Rathbone Date: Tue, 6 Nov 2018 16:55:25 -0600 Subject: [PATCH 2/9] closed event now fires if you click outside of the input --- src/components/DateInput.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue index 843e1d94..bfdb250b 100644 --- a/src/components/DateInput.vue +++ b/src/components/DateInput.vue @@ -136,7 +136,7 @@ export default { this.typedDate = null } - this.$emit('closeCalendar') + this.$emit('closeCalendar', true) }, /** * emit a clearDate event From 1175c0c0504a6e1b8ff2bcd0cb1e0977e840f247 Mon Sep 17 00:00:00 2001 From: Matthew Rathbone Date: Tue, 6 Nov 2018 17:00:38 -0600 Subject: [PATCH 3/9] Fixes the missing opened event --- src/components/Datepicker.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 67055bef..e9f785cd 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -252,6 +252,7 @@ export default { return this.close(true) } this.setInitialView() + this.$emit('opened') }, /** * Sets the initial picker page view: day, month or year From 69bdbe29596b8933a5607415a12ca4dc338f5f0a Mon Sep 17 00:00:00 2001 From: Tommaso Nolli Date: Tue, 8 Jan 2019 18:19:12 +0100 Subject: [PATCH 4/9] Fixed test --- src/components/DateInput.vue | 9 ++++++--- src/components/Datepicker.vue | 2 ++ test/unit/jest.conf.js | 1 + test/unit/specs/DateInput/typedDates.spec.js | 21 +++++++++++++++++++- 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue index 843e1d94..a377c615 100644 --- a/src/components/DateInput.vue +++ b/src/components/DateInput.vue @@ -45,6 +45,7 @@ export default { selectedDate: Date, resetTypedDate: [Date], format: [String, Function], + parse: Function, translation: Object, inline: Boolean, id: String, @@ -118,10 +119,11 @@ export default { } if (this.typeable) { - const typedDate = Date.parse(this.input.value) + const fn = this.parse || Date.parse + const typedDate = fn(this.input.value) if (!isNaN(typedDate)) { this.typedDate = this.input.value - this.$emit('typedDate', new Date(this.typedDate)) + this.$emit('typedDate', new Date(typedDate)) } } }, @@ -130,7 +132,8 @@ export default { * called once the input is blurred */ inputBlurred () { - if (this.typeable && isNaN(Date.parse(this.input.value))) { + const fn = this.parse || Date.parse + if (this.typeable && isNaN(fn(this.input.value))) { this.clearDate() this.input.value = null this.typedDate = null diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 67055bef..2b73ec8a 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -4,6 +4,7 @@ :selectedDate="selectedDate" :resetTypedDate="resetTypedDate" :format="format" + :parse="parse" :translation="translation" :inline="inline" :id="id" @@ -118,6 +119,7 @@ export default { type: [String, Function], default: 'dd MMM yyyy' }, + parse: Function, language: { type: Object, default: () => en diff --git a/test/unit/jest.conf.js b/test/unit/jest.conf.js index b74e1a94..94bcd266 100644 --- a/test/unit/jest.conf.js +++ b/test/unit/jest.conf.js @@ -1,6 +1,7 @@ const path = require('path') module.exports = { + testURL: 'http://localhost', rootDir: path.resolve(__dirname, '../../'), moduleFileExtensions: [ 'js', diff --git a/test/unit/specs/DateInput/typedDates.spec.js b/test/unit/specs/DateInput/typedDates.spec.js index ef41ddc5..8ec4cd46 100644 --- a/test/unit/specs/DateInput/typedDates.spec.js +++ b/test/unit/specs/DateInput/typedDates.spec.js @@ -29,6 +29,25 @@ describe('DateInput', () => { expect(wrapper.vm.formattedValue).toEqual(dateString) }) + it('uses custom date parser', () => { + wrapper.vm.parse = function (str) { + const tokens = str.split('/') + const dd = parseInt(tokens[0]) + const MM = parseInt(tokens[1]) + const yyyy = parseInt(tokens[2]) + const dt = new Date(yyyy, MM - 1, dd) + return dt.getTime() + } + wrapper.vm.format = 'dd/MM/yyyy' + wrapper.vm.input.value = '07/01/2019' + const input = wrapper.find('input') + input.trigger('keyup') + const dt = wrapper.emitted().typedDate[0][0] + expect(dt.getDate()).toBe(7) + expect(dt.getMonth()).toBe(0) + expect(dt.getFullYear()).toBe(2019) + }) + it('emits the date when typed', () => { const input = wrapper.find('input') wrapper.vm.input.value = '2018-04-24' @@ -40,7 +59,7 @@ describe('DateInput', () => { it('emits closeCalendar when return is pressed', () => { const input = wrapper.find('input') const blurSpy = jest.spyOn(input.element, 'blur') - input.trigger('keyup', {keyCode: 13}) + input.trigger('keyup.enter') expect(blurSpy).toBeCalled() }) From 8eb5597596f40611e2f06cea282dd21cd241ce84 Mon Sep 17 00:00:00 2001 From: Tommaso Nolli Date: Tue, 8 Jan 2019 18:34:00 +0100 Subject: [PATCH 5/9] Updated README.md documentation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 10b8c4c8..642f7e13 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ Inline always open version | name | String | | Input name property | | id | String | | Input id | | format | String\|Function| dd MMM yyyy | Date formatting string or function | +| parse | Function | Date.parse | Date parsing function (to UTC millis) | | full-month-name | Boolean | false | To show the full month name | | language | Object | en | Translation for days and months | | disabled-dates | Object | | See below for configuration | From b6f0307e6d0ae12b00b85d92b271fc4516b02f3f Mon Sep 17 00:00:00 2001 From: Tommaso Nolli Date: Sun, 27 Jan 2019 11:52:38 +0100 Subject: [PATCH 6/9] added default value for 'parse' property --- src/components/DateInput.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue index a377c615..d520845e 100644 --- a/src/components/DateInput.vue +++ b/src/components/DateInput.vue @@ -45,7 +45,10 @@ export default { selectedDate: Date, resetTypedDate: [Date], format: [String, Function], - parse: Function, + parse: { + type: Function, + default: (v) => Date.parse(v) + }, translation: Object, inline: Boolean, id: String, @@ -119,8 +122,7 @@ export default { } if (this.typeable) { - const fn = this.parse || Date.parse - const typedDate = fn(this.input.value) + const typedDate = this.parse(this.input.value) if (!isNaN(typedDate)) { this.typedDate = this.input.value this.$emit('typedDate', new Date(typedDate)) @@ -132,8 +134,7 @@ export default { * called once the input is blurred */ inputBlurred () { - const fn = this.parse || Date.parse - if (this.typeable && isNaN(fn(this.input.value))) { + if (this.typeable && isNaN(this.parse(this.input.value))) { this.clearDate() this.input.value = null this.typedDate = null From 917cfd01f479cd2ef9a4eb80c47d138294592ad7 Mon Sep 17 00:00:00 2001 From: Michael Kopinsky Date: Wed, 19 Jun 2019 19:21:19 -0400 Subject: [PATCH 7/9] Change version and package name so I can publish my own version on npm --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9c925800..4fc24359 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "vuejs-datepicker", - "version": "1.5.4", + "name": "@mkopinsky/vuejs-datepicker", + "version": "1.6.0", "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations", "keywords": [ "vue", From 62330405dc63cec20159db0fc1b2b96832954210 Mon Sep 17 00:00:00 2001 From: Michael Kopinsky Date: Wed, 19 Jun 2019 20:51:59 -0400 Subject: [PATCH 8/9] Add new option format-typed-dates to reformat user-entered dates when the calendar is closed --- README.md | 1 + src/components/Datepicker.vue | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/README.md b/README.md index e0a9dcce..666069dd 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ Inline always open version | disabled | Boolean | false | If true, disable Datepicker on screen | | required | Boolean | false | Sets html required attribute on input | | typeable | Boolean | false | If true, allow the user to type the date | +| format-typed-dates | Boolean | false | If true, user-entered dates will be reformatted (via `format` as soon as the calendar is closed | | use-utc | Boolean | false | use UTC for time calculations | | open-date | Date\|String | | If set, open on that date | | minimum-view | String | 'day' | If set, lower-level views won't show | diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 7603cb76..5fe1f9f2 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -148,6 +148,7 @@ export default { disabled: Boolean, required: Boolean, typeable: Boolean, + formatTypedDates: Boolean, useUtc: Boolean, minimumView: { type: String, @@ -443,6 +444,9 @@ export default { if (emitEvent) { this.$emit('closed') } + if (this.formatTypedDates) { + this.resetTypedDate = new Date() + } document.removeEventListener('click', this.clickOutside, false) } }, From 9a37b6c9e9917a26e434ec255f2134afd711c8d5 Mon Sep 17 00:00:00 2001 From: Michael Kopinsky Date: Wed, 19 Jun 2019 20:52:48 -0400 Subject: [PATCH 9/9] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4fc24359..dee60de2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mkopinsky/vuejs-datepicker", - "version": "1.6.0", + "version": "1.7.0", "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations", "keywords": [ "vue",