Pass time steps from date picker to time picker through the popup.

src/Datetime.vue

@@ -9,7 +9,16 @@
            @focus="open">
     <transition-group name="vdatetime-fade" tag="div">
         <div key="overlay" v-if="isOpen" class="vdatetime-overlay" @click.self="cancel"></div>
-        <datetime-popup key="popup" v-if="isOpen":type="type" :datetime="popupDate" :phrases="phrases" @confirm="confirm" @cancel="cancel"></datetime-popup>
+        <datetime-popup
+            key="popup"
+            v-if="isOpen"
+            :type="type"
+            :datetime="popupDate"
+            :phrases="phrases"
+            :hour-step="hourStep"
+            :minute-step="minuteStep"
+            @confirm="confirm"
+            @cancel="cancel"></datetime-popup>
     </transition-group>
   </div>
 </template>
@@ -50,6 +59,14 @@
             ok: 'Ok'
           }
         }
+      },
+      hourStep: {
+        type: Number,
+        default: 1
+      },
+      minuteStep: {
+        type: Number,
+        default: 1
       }
     },
 

src/DatetimePopup.vue

@@ -5,8 +5,19 @@
       <div class="vdatetime-popup__date">{{ dateFormatted }}</div>
     </div>
     <div class="vdatetime-popup__body">
-      <datetime-calendar v-if="step === 'date'" @change="onChangeDate" :year="year" :month="month" :day="day"></datetime-calendar>
-      <datetime-time-picker v-if="step === 'time'" @change="onChangeTime" :hour="hour" :minute="minute"></datetime-time-picker>
+      <datetime-calendar
+          v-if="step === 'date'"
+          @change="onChangeDate"
+          :year="year"
+          :month="month"
+          :day="day"></datetime-calendar>
+      <datetime-time-picker
+          v-if="step === 'time'"
+          @change="onChangeTime"
+          :hour="hour"
+          :minute="minute"
+          :hour-step="hourStep"
+          :minute-step="minuteStep"></datetime-time-picker>
     </div>
     <div class="vdatetime-popup__actions">
       <div class="vdatetime-popup__actions__button vdatetime-popup__actions__button--cancel" @click="cancel">{{ phrases.cancel }}</div>
@@ -43,6 +54,14 @@
       type: {
         type: String,
         default: 'date'
+      },
+      hourStep: {
+        type: Number,
+        default: 1
+      },
+      minuteStep: {
+        type: Number,
+        default: 1
       }
     },
 

test/specs/Datetime.spec.js

@@ -78,6 +78,22 @@ describe('Datetime.vue', function () {
         done()
       })
     })
+
+    it('should pass time steps to popup', function (done) {
+      const vm = createVM(this,
+        `<Datetime type="datetime" :hour-step="2" :minute-step="15"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$findChild('.vdatetime-popup').hourStep).to.be.equal(2)
+        expect(vm.$findChild('.vdatetime-popup').minuteStep).to.be.equal(15)
+        done()
+      })
+    })
   })
 
   describe('types', function () {

test/specs/DatetimePopup.spec.js

@@ -142,6 +142,29 @@ describe('DatetimePopup.vue', function () {
     })
   })
 
+  describe('pass props', function () {
+    it('should pass time steps to time picker', function (done) {
+      const vm = createVM(this,
+        `<DatetimePopup :datetime="datetime" type="datetime" :hour-step="2" :minute-step="15"></DatetimePopup>`,
+        {
+          components: { DatetimePopup },
+          data () {
+            return {
+              datetime: LuxonDatetime.local()
+            }
+          }
+        })
+
+      vm.$('.vdatetime-popup__actions__button--confirm').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$findChild('.vdatetime-time-picker').hourStep).to.be.equal(2)
+        expect(vm.$findChild('.vdatetime-time-picker').minuteStep).to.be.equal(15)
+        done()
+      })
+    })
+  })
+
   describe('events', function () {
     it('should emit confirm event on confirm', function () {
       const vm = createVM(this,