I wanna add selection for seconds

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.

demo/index.html

@@ -36,7 +36,7 @@ <h2>Datetime</h2>
 
   <div class="example">
     <div class="example-inputs">
-      <datetime type="datetime" v-model="datetime"></datetime>
+      <datetime type="datetime" :use-second="true" v-model="datetime"></datetime>
 
       <div class="values">
         <p>

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": "npm install && npm run build"
   },
   "lint-staged": {
     "*.{vue,js}": [

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
         }
       }

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,15 +183,15 @@ 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 (
         this.maxDatetime &&
         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
       )

src/DatetimeTimePicker.vue

@@ -1,11 +1,14 @@
 <template>
-  <div :class="{'vdatetime-time-picker': true, 'vdatetime-time-picker__with-suffix': use12Hour}">
+  <div :class="{'vdatetime-time-picker': true, 'vdatetime-time-picker__with-suffix': use12Hour || useSecond}">
     <div class="vdatetime-time-picker__list vdatetime-time-picker__list--hours" ref="hourList">
       <div class="vdatetime-time-picker__item" v-for="hour in hours" @click="selectHour(hour)" :class="{'vdatetime-time-picker__item--selected': hour.selected, 'vdatetime-time-picker__item--disabled': hour.disabled}">{{ formatHour(hour.number) }}</div>
     </div>
     <div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes" ref="minuteList">
       <div class="vdatetime-time-picker__item" v-for="minute in minutes" @click="selectMinute(minute)" :class="{'vdatetime-time-picker__item--selected': minute.selected, 'vdatetime-time-picker__item--disabled': minute.disabled}">{{ minute.number }}</div>
     </div>
+    <div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes" ref="secondList" v-if="useSecond">
+      <div class="vdatetime-time-picker__item" v-for="second in seconds" @click="selectSecond(second)" :class="{'vdatetime-time-picker__item--selected': second.selected, 'vdatetime-time-picker__item--disabled': second.disabled}">{{ second.number }}</div>
+    </div>
     <div class="vdatetime-time-picker__list vdatetime-time-picker__list--suffix" ref="suffixList" v-if="use12Hour">
       <div class="vdatetime-time-picker__item" @click="selectSuffix('am')" :class="{'vdatetime-time-picker__item--selected': hour < 12}">am</div>
       <div class="vdatetime-time-picker__item" @click="selectSuffix('pm')" :class="{'vdatetime-time-picker__item--selected': hour >= 12}">pm</div>
@@ -14,7 +17,7 @@
 </template>
 
 <script>
-import { hours, minutes, pad, timeComponentIsDisabled } from './util'
+import { hours, minutes, seconds, pad, timeComponentIsDisabled } from './util'
 
 export default {
   props: {
@@ -26,10 +29,18 @@ export default {
       type: Number,
       required: true
     },
+    second: {
+      type: Number,
+      required: true
+    },
     use12Hour: {
       type: Boolean,
       default: false
     },
+    useSecond: {
+      type: Boolean,
+      default: false
+    },
     hourStep: {
       type: Number,
       default: 1
@@ -38,6 +49,10 @@ export default {
       type: Number,
       default: 1
     },
+    secondStep: {
+      type: Number,
+      default: 1
+    },
     minTime: {
       type: String,
       default: null
@@ -73,17 +88,30 @@ export default {
         disabled: timeComponentIsDisabled(this.minMinute, this.maxMinute, minute)
       }))
     },
+    seconds () {
+      return seconds(this.secondStep).map(second => ({
+        number: pad(second),
+        selected: second === this.second,
+        disabled: timeComponentIsDisabled(this.minSecond, this.maxSecond, second)
+      }))
+    },
     minHour () {
       return this.minTime ? parseInt(this.minTime.split(':')[0]) : null
     },
     minMinute () {
       return this.minTime && this.minHour === this.hour ? parseInt(this.minTime.split(':')[1]) : null
     },
+    minSecond () {
+      return this.minTime && this.minHour === this.hour && this.minMinute === this.minute ? parseInt(this.minTime.split(':')[2]) : null
+    },
     maxHour () {
       return this.maxTime ? parseInt(this.maxTime.split(':')[0]) : null
     },
     maxMinute () {
       return this.maxTime && this.maxHour === this.hour ? parseInt(this.maxTime.split(':')[1]) : null
+    },
+    maxSecond () {
+      return this.maxTime && this.maxHour === this.hour && this.maxMinute === this.minute ? parseInt(this.maxTime.split(':')[2]) : null
     }
   },
 
@@ -102,6 +130,13 @@ export default {
 
       this.$emit('change', { minute: parseInt(minute.number) })
     },
+    selectSecond (second) {
+      if (second.disabled) {
+        return
+      }
+
+      this.$emit('change', { second: parseInt(second.number) })
+    },
     selectSuffix (suffix) {
       if (suffix === 'am') {
         if (this.hour >= 12) {
@@ -132,8 +167,10 @@ export default {
   mounted () {
     const selectedHour = this.$refs.hourList.querySelector('.vdatetime-time-picker__item--selected')
     const selectedMinute = this.$refs.minuteList.querySelector('.vdatetime-time-picker__item--selected')
+    const selectedSecond = this.$refs.secondList.querySelector('.vdatetime-time-picker__item--selected')
     this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - 250 : 0
     this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - 250 : 0
+    this.$refs.secondList.scrollTop = selectedSecond ? selectedSecond.offsetTop - 250 : 0
   }
 }
 </script>

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)
 }