Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom parsing for dates #653

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Custom parsing for dates #653

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69bdbe2
Fixed test
tnolli Jan 8, 2019
8eb5597
Updated README.md documentation
tnolli Jan 8, 2019
b6f0307
added default value for 'parse' property
tnolli Jan 27, 2019
1cb2670
Merge branch 'master' into features/typed-dates-custom-parsing
tnolli Jan 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/components/DateInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default {
selectedDate: Date,
resetTypedDate: [Date],
format: [String, Function],
parse: Function,
translation: Object,
inline: Boolean,
id: String,
Expand Down Expand Up @@ -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)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest your replace line 122-123 with this:

const parsed = this.parse(this.input.value)

if (!isNaN(typedDate)) {
this.typedDate = this.input.value
this.$emit('typedDate', new Date(this.typedDate))
this.$emit('typedDate', new Date(typedDate))
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest your replace line 126 with this:

this.$emit('typedDate', parsed)

}
}
},
Expand All @@ -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))) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest your replace line 135-136 with this:

if (this.typeable && isNaN(this.parse(this.input.value))) {

this.clearDate()
this.input.value = null
this.typedDate = null
Expand Down
2 changes: 2 additions & 0 deletions src/components/Datepicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
:selectedDate="selectedDate"
:resetTypedDate="resetTypedDate"
:format="format"
:parse="parse"
:translation="translation"
:inline="inline"
:id="id"
Expand Down Expand Up @@ -118,6 +119,7 @@ export default {
type: [String, Function],
default: 'dd MMM yyyy'
},
parse: Function,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest you replace line 122 with this:

parse: {
  type: Function,
  default: v => new Date(v),
}

language: {
type: Object,
default: () => en
Expand Down
1 change: 1 addition & 0 deletions test/unit/jest.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const path = require('path')

module.exports = {
testURL: 'http://localhost',
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
Expand Down
21 changes: 20 additions & 1 deletion test/unit/specs/DateInput/typedDates.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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()
})

Expand Down