From d372c6f8a530506e0ffdb2f69b67f07cdbb9f030 Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 17:36:52 +0800 Subject: [PATCH 1/8] Add second selection --- README.md | 1 + demo/index.html | 2 +- src/Datetime.vue | 7 ++++++- src/DatetimePopup.vue | 18 +++++++++++++++-- src/DatetimeTimePicker.vue | 41 ++++++++++++++++++++++++++++++++++++-- src/util.js | 4 ++++ 6 files changed, 67 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ce3b67d..ed09eae 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,7 @@ zone | `String` | `local` | Time zone for the picker. format | `Object` or `String` | `DateTime.DATE_MED`, `DateTime.DATETIME_MED` or `DateTime.TIME_24_SIMPLE` | Input date format. Luxon [presets](https://moment.github.io/luxon/docs/manual/formatting.html#tolocalestring--strings-for-humans-) or [tokens](https://moment.github.io/luxon/docs/manual/formatting.html#formatting-with-tokens--strings-for-cthulhu-). phrases | `Object` | `{ok: 'Ok', cancel: 'Cancel'}` | Phrases. use12-hour | `Boolean` | `false` | Display 12 hour (AM/PM) mode +use-second | `Boolean` | `false` | Display second selection hour-step | `Number` | `1` | Hour step. minute-step | `Number` | `1` | Minute step. min-datetime | ISO 8601 `String` | `null` | Minimum datetime. diff --git a/demo/index.html b/demo/index.html index 8876b66..2304a0a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -36,7 +36,7 @@

Datetime

- +

diff --git a/src/Datetime.vue b/src/Datetime.vue index 34979bf..1c10476 100644 --- a/src/Datetime.vue +++ b/src/Datetime.vue @@ -22,6 +22,7 @@ :datetime="popupDate" :phrases="phrases" :use12-hour="use12Hour" + :use-second="useSecond" :hour-step="hourStep" :minute-step="minuteStep" :min-datetime="popupMinDatetime" @@ -103,6 +104,10 @@ export default { type: Boolean, default: false }, + useSecond: { + type: Boolean, + default: false + }, hourStep: { type: Number, default: 1 @@ -168,7 +173,7 @@ export default { break case 'datetime': case 'default': - format = DateTime.DATETIME_MED + format = this.useSecond ? DateTime.DATETIME_MED_WITH_SECONDS : DateTime.DATETIME_MED break } } diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue index 5f62913..4309ba0 100644 --- a/src/DatetimePopup.vue +++ b/src/DatetimePopup.vue @@ -34,7 +34,9 @@ @change="onChangeTime" :hour="hour" :minute="minute" + :second="second" :use12-hour="use12Hour" + :use-second="useSecond" :hour-step="hourStep" :minute-step="minuteStep" :min-time="minTime" @@ -93,6 +95,10 @@ export default { type: Boolean, default: false }, + useSecond: { + type: Boolean, + default: false + }, hourStep: { type: Number, default: 1 @@ -162,6 +168,9 @@ export default { minute () { return this.newDatetime.minute }, + second () { + return this.newDatetime.second + }, dateFormatted () { return this.newDatetime.toLocaleString({ month: 'long', @@ -230,7 +239,7 @@ export default { this.nextStep() } }, - onChangeTime ({ hour, minute, suffixTouched }) { + onChangeTime ({ hour, minute, second, suffixTouched }) { if (suffixTouched) { this.timePartsTouched['suffix'] = true } @@ -245,7 +254,12 @@ export default { this.timePartsTouched['minute'] = true } - const goNext = this.auto && this.timePartsTouched['hour'] && this.timePartsTouched['minute'] && ( + if (Number.isInteger(second)) { + this.newDatetime = this.newDatetime.set({ second }) + this.timePartsTouched['second'] = true + } + + const goNext = this.auto && this.timePartsTouched['hour'] && this.timePartsTouched['minute'] && this.timePartsTouched['second'] && ( this.timePartsTouched['suffix'] || !this.use12Hour ) diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue index cc9775f..cb9ecba 100644 --- a/src/DatetimeTimePicker.vue +++ b/src/DatetimeTimePicker.vue @@ -1,11 +1,14 @@ diff --git a/src/util.js b/src/util.js index 4452711..4540d1f 100644 --- a/src/util.js +++ b/src/util.js @@ -81,6 +81,10 @@ export function minutes (step) { return Array.apply(null, Array(Math.ceil(60 / step))).map((item, index) => index * step) } +export function seconds (step) { + return Array.apply(null, Array(Math.ceil(60 / step))).map((item, index) => index * step) +} + export function years (current) { return Array.apply(null, Array(201)).map((item, index) => current - 100 + index) } From 9981352034f374854fc0f90f9e7ae90cf9d8c0e6 Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 17:36:52 +0800 Subject: [PATCH 2/8] Add second selection --- README.md | 1 + demo/index.html | 2 +- src/Datetime.vue | 7 ++++++- src/DatetimePopup.vue | 22 ++++++++++++++++---- src/DatetimeTimePicker.vue | 41 ++++++++++++++++++++++++++++++++++++-- src/util.js | 4 ++++ 6 files changed, 69 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ce3b67d..ed09eae 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,7 @@ zone | `String` | `local` | Time zone for the picker. format | `Object` or `String` | `DateTime.DATE_MED`, `DateTime.DATETIME_MED` or `DateTime.TIME_24_SIMPLE` | Input date format. Luxon [presets](https://moment.github.io/luxon/docs/manual/formatting.html#tolocalestring--strings-for-humans-) or [tokens](https://moment.github.io/luxon/docs/manual/formatting.html#formatting-with-tokens--strings-for-cthulhu-). phrases | `Object` | `{ok: 'Ok', cancel: 'Cancel'}` | Phrases. use12-hour | `Boolean` | `false` | Display 12 hour (AM/PM) mode +use-second | `Boolean` | `false` | Display second selection hour-step | `Number` | `1` | Hour step. minute-step | `Number` | `1` | Minute step. min-datetime | ISO 8601 `String` | `null` | Minimum datetime. diff --git a/demo/index.html b/demo/index.html index 8876b66..2304a0a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -36,7 +36,7 @@

Datetime

- +

diff --git a/src/Datetime.vue b/src/Datetime.vue index 34979bf..1c10476 100644 --- a/src/Datetime.vue +++ b/src/Datetime.vue @@ -22,6 +22,7 @@ :datetime="popupDate" :phrases="phrases" :use12-hour="use12Hour" + :use-second="useSecond" :hour-step="hourStep" :minute-step="minuteStep" :min-datetime="popupMinDatetime" @@ -103,6 +104,10 @@ export default { type: Boolean, default: false }, + useSecond: { + type: Boolean, + default: false + }, hourStep: { type: Number, default: 1 @@ -168,7 +173,7 @@ export default { break case 'datetime': case 'default': - format = DateTime.DATETIME_MED + format = this.useSecond ? DateTime.DATETIME_MED_WITH_SECONDS : DateTime.DATETIME_MED break } } diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue index 5f62913..bc2df52 100644 --- a/src/DatetimePopup.vue +++ b/src/DatetimePopup.vue @@ -34,7 +34,9 @@ @change="onChangeTime" :hour="hour" :minute="minute" + :second="second" :use12-hour="use12Hour" + :use-second="useSecond" :hour-step="hourStep" :minute-step="minuteStep" :min-time="minTime" @@ -93,6 +95,10 @@ export default { type: Boolean, default: false }, + useSecond: { + type: Boolean, + default: false + }, hourStep: { type: Number, default: 1 @@ -162,6 +168,9 @@ export default { minute () { return this.newDatetime.minute }, + second () { + return this.newDatetime.second + }, dateFormatted () { return this.newDatetime.toLocaleString({ month: 'long', @@ -174,7 +183,7 @@ export default { this.minDatetime.year === this.year && this.minDatetime.month === this.month && this.minDatetime.day === this.day - ) ? this.minDatetime.toFormat('HH:mm') : null + ) ? this.minDatetime.toFormat('HH:mm:ss') : null }, maxTime () { return ( @@ -182,7 +191,7 @@ export default { this.maxDatetime.year === this.year && this.maxDatetime.month === this.month && this.maxDatetime.day === this.day - ) ? this.maxDatetime.toFormat('HH:mm') : null + ) ? this.maxDatetime.toFormat('HH:mm:ss') : null } }, @@ -230,7 +239,7 @@ export default { this.nextStep() } }, - onChangeTime ({ hour, minute, suffixTouched }) { + onChangeTime ({ hour, minute, second, suffixTouched }) { if (suffixTouched) { this.timePartsTouched['suffix'] = true } @@ -245,7 +254,12 @@ export default { this.timePartsTouched['minute'] = true } - const goNext = this.auto && this.timePartsTouched['hour'] && this.timePartsTouched['minute'] && ( + if (Number.isInteger(second)) { + this.newDatetime = this.newDatetime.set({ second }) + this.timePartsTouched['second'] = true + } + + const goNext = this.auto && this.timePartsTouched['hour'] && this.timePartsTouched['minute'] && this.timePartsTouched['second'] && ( this.timePartsTouched['suffix'] || !this.use12Hour ) diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue index cc9775f..cb9ecba 100644 --- a/src/DatetimeTimePicker.vue +++ b/src/DatetimeTimePicker.vue @@ -1,11 +1,14 @@ diff --git a/src/util.js b/src/util.js index 4452711..4540d1f 100644 --- a/src/util.js +++ b/src/util.js @@ -81,6 +81,10 @@ export function minutes (step) { return Array.apply(null, Array(Math.ceil(60 / step))).map((item, index) => index * step) } +export function seconds (step) { + return Array.apply(null, Array(Math.ceil(60 / step))).map((item, index) => index * step) +} + export function years (current) { return Array.apply(null, Array(201)).map((item, index) => current - 100 + index) } From 7a83c72528cd300ec3a7514b5c6be2b9070b3aaa Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 19:21:15 +0800 Subject: [PATCH 3/8] Postinstall --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 11651b2..a830cd7 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "demo:deploy": "gh-pages -d demo", "version": "auto-changelog -p --starting-commit 975d478b80b8e1ed3663f55b34c3a35521a43bdb --commit-limit false && git add CHANGELOG.md", "prepublish": "yon run build && yon run demo:build", - "postpublish": "yon run demo:deploy" + "postpublish": "yon run demo:deploy", + "postinstall": "yon run build && yon run demo:build" }, "lint-staged": { "*.{vue,js}": [ From f32a856a4fe16bd5ea98b4ab62d460a9f85ea40f Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 19:23:06 +0800 Subject: [PATCH 4/8] postinstall --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a830cd7..b8ffd07 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "version": "auto-changelog -p --starting-commit 975d478b80b8e1ed3663f55b34c3a35521a43bdb --commit-limit false && git add CHANGELOG.md", "prepublish": "yon run build && yon run demo:build", "postpublish": "yon run demo:deploy", - "postinstall": "yon run build && yon run demo:build" + "postinstall": "node build/build.js" }, "lint-staged": { "*.{vue,js}": [ From 2535a6776b99e7df965716053ef8fc3a3b7ac6af Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 19:39:01 +0800 Subject: [PATCH 5/8] postinstall script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b8ffd07..ab36075 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "version": "auto-changelog -p --starting-commit 975d478b80b8e1ed3663f55b34c3a35521a43bdb --commit-limit false && git add CHANGELOG.md", "prepublish": "yon run build && yon run demo:build", "postpublish": "yon run demo:deploy", - "postinstall": "node build/build.js" + "postinstall": "cd ./node_modules/my-forked-project && yarn && yarn build" }, "lint-staged": { "*.{vue,js}": [ From 96a2e6828cd5ecce480fab6d47a10c379e73ee86 Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 19:40:14 +0800 Subject: [PATCH 6/8] Fix --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ab36075..0fefa33 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "version": "auto-changelog -p --starting-commit 975d478b80b8e1ed3663f55b34c3a35521a43bdb --commit-limit false && git add CHANGELOG.md", "prepublish": "yon run build && yon run demo:build", "postpublish": "yon run demo:deploy", - "postinstall": "cd ./node_modules/my-forked-project && yarn && yarn build" + "postinstall": "cd ./node_modules/vue-datetime && yarn && yarn build" }, "lint-staged": { "*.{vue,js}": [ From a51454d161b2a2aca63e521c12f2be2d22e253c4 Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 19:41:52 +0800 Subject: [PATCH 7/8] Fix --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0fefa33..eae665d 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "version": "auto-changelog -p --starting-commit 975d478b80b8e1ed3663f55b34c3a35521a43bdb --commit-limit false && git add CHANGELOG.md", "prepublish": "yon run build && yon run demo:build", "postpublish": "yon run demo:deploy", - "postinstall": "cd ./node_modules/vue-datetime && yarn && yarn build" + "postinstall": "yarn && yarn build" }, "lint-staged": { "*.{vue,js}": [ From 3d4e31dbbcf5abcad0e8c85b7f45177a59c8ba83 Mon Sep 17 00:00:00 2001 From: Constantine <45konstantin2@gmail.com> Date: Sat, 21 Dec 2019 19:49:41 +0800 Subject: [PATCH 8/8] FF --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eae665d..4c73b80 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "version": "auto-changelog -p --starting-commit 975d478b80b8e1ed3663f55b34c3a35521a43bdb --commit-limit false && git add CHANGELOG.md", "prepublish": "yon run build && yon run demo:build", "postpublish": "yon run demo:deploy", - "postinstall": "yarn && yarn build" + "postinstall": "npm install && npm run build" }, "lint-staged": { "*.{vue,js}": [