diff --git a/package.json b/package.json
index d3e4e83..0233031 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "A style-uninstallable datepicker component for Vue.js",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/Demo.vue b/src/Demo.vue
index ef6a45f..8c18a30 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -9,8 +9,8 @@
                              :change-month-function="true"
                              :is-typeable="true"
                              :change-year-function="true"
-                             :is-date-picker="true"
-                             :is-date-range="false"
+                             :is-date-picker="false"
+                             :is-date-range="true"
                              :with-time-picker="true"
                              :is-multiple="false"
                              :calendars-count="2"
diff --git a/src/assets/scss/calendar.scss b/src/assets/scss/calendar.scss
index a1afca1..982cbf4 100644
--- a/src/assets/scss/calendar.scss
+++ b/src/assets/scss/calendar.scss
@@ -207,6 +207,9 @@ input.vfc-single-input {
         border-radius: .28571429rem .28571429rem 0 0;
         span {
           margin-left: 15px;
+          span.vfc-active {
+            text-decoration: underline;
+          }
         }
       }
     }
diff --git a/src/components/FunctionalCalendar.vue b/src/components/FunctionalCalendar.vue
index d1ce231..0b9773c 100644
--- a/src/components/FunctionalCalendar.vue
+++ b/src/components/FunctionalCalendar.vue
@@ -237,7 +237,6 @@
             },
             'input.dateRange.start.date': {
                 handler(val) {
-                    console.log(val);
                     this.input.dateRange.start.date = val = helpCalendar.mask(val);
                     if (helpCalendar.getDateFromFormat(val).getMonth()) {
                         this.calendar.dateRange.start.date = val;
@@ -468,9 +467,7 @@
 
                 // Time Picker
                 if (this.fConfigs.withTimePicker) {
-                    if (this.fConfigs.isDateRange && this.calendar.dateRange.end.date) {
-                        this.openTimePicker();
-                    } else if (this.fConfigs.isDatePicker) {
+                    if (this.fConfigs.isDateRange || this.fConfigs.isDatePicker) {
                         this.openTimePicker();
                     }
                 }
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index 1f196f0..e81af7c 100644
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -3,14 +3,29 @@
         <div class="vfc-close" @click="close()"></div>
         <div class="vfc-modal-time-mechanic">
             <div id="time-line" class="vfc-modal-time-line">
-                <span>{{ $parent.calendar.selectedDateTime }}</span>
+                <span>
+                    <template v-if="$parent.fConfigs.isDateRange">
+                        <span @click="startDateActive = true" :class="{'vfc-active': startDateActive}">{{ $parent.calendar.dateRange.start.dateTime}}</span><template
+                            v-if="$parent.calendar.dateRange.end.date"> -<span @click="startDateActive = false"
+                                                                               :class="{'vfc-active': !startDateActive}">{{ this.$parent.calendar.dateRange.end.dateTime }}</span></template>
+                    </template>
+                    <template v-else>
+                        {{ $parent.calendar.selectedDateTime }}
+                    </template>
+                </span>
             </div>
             <div class="vfc-time-picker">
                 <div class="vfc-time-picker__list vfc-time-picker__list--hours" ref="hourList">
-                    <div class="vfc-time-picker__item" :class="{'vfc-time-picker__item--selected': ($parent.calendar.selectedHour === (i < 10 ? '0'+(i-1) : i))}" v-for="i in 23" @click="changeHour(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}</div>
+                    <div class="vfc-time-picker__item"
+                         :class="{'vfc-time-picker__item--selected': checkHourActiveClass(i)}" v-for="i in 23"
+                         @click="changeHour(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}
+                    </div>
                 </div>
                 <div class="vfc-time-picker__list vfc-time-picker__list--minutes" ref="minuteList">
-                    <div class="vfc-time-picker__item" :class="{'vfc-time-picker__item--selected': ($parent.calendar.selectedMinute === (i < 10 ? '0'+(i-1) : i))}" v-for="i in 59" @click="changeMinute(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}</div>
+                    <div class="vfc-time-picker__item"
+                         :class="{'vfc-time-picker__item--selected': checkMinuteActiveClass(i)}"
+                         v-for="i in 59" @click="changeMinute(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}
+                    </div>
                 </div>
             </div>
         </div>
@@ -20,7 +35,26 @@
 <script>
     export default {
         name: "TimePicker",
-        mounted () {
+        data() {
+            return {
+                startDateActive: true
+            }
+        },
+        watch: {
+            'startDateActive': function(){
+                this.setStyles();
+            }
+        },
+        mounted() {
+            let startDate = this.$parent.calendar.dateRange.start.date;
+            let endDate = this.$parent.calendar.dateRange.end.date;
+
+            if (startDate && startDate < endDate) {
+                this.startDateActive = false;
+            } else {
+                this.startDateActive = true;
+            }
+
             this.setSelectedDateTime();
             this.setStyles();
         },
@@ -29,24 +63,77 @@
                 this.$parent.showTimePicker = false;
             },
             changeHour(hour) {
-                this.$parent.calendar.selectedHour = hour;
+                if (this.$parent.fConfigs.isDateRange) {
+                    if (this.checkStartDate()) {
+                        this.$parent.calendar.dateRange.start.hour = hour;
+                    } else {
+                        this.$parent.calendar.dateRange.end.hour = hour;
+                    }
+                } else {
+                    this.$parent.calendar.selectedHour = hour;
+                }
+
                 this.setSelectedDateTime();
             },
-            changeMinute(minute)
-            {
-                this.$parent.calendar.selectedMinute = minute;
+            changeMinute(minute) {
+                if (this.$parent.fConfigs.isDateRange) {
+                    if (this.checkStartDate()) {
+                        this.$parent.calendar.dateRange.start.minute = minute;
+                    } else {
+                        this.$parent.calendar.dateRange.end.minute = minute;
+                    }
+                } else {
+                    this.$parent.calendar.selectedHour = hour;
+                }
+
                 this.setSelectedDateTime();
             },
             setSelectedDateTime() {
                 this.$parent.calendar.selectedDateTime = this.$parent.calendar.selectedDate + " " + this.$parent.calendar.selectedHour + ':' + this.$parent.calendar.selectedMinute;
+                this.$parent.calendar.dateRange.start.dateTime = this.$parent.calendar.dateRange.start.date + " " + this.$parent.calendar.dateRange.start.hour + ':' + this.$parent.calendar.dateRange.start.minute;
+                this.$parent.calendar.dateRange.end.dateTime = this.$parent.calendar.dateRange.end.date + " " + this.$parent.calendar.dateRange.end.hour + ':' + this.$parent.calendar.dateRange.end.minute;
+            },
+            checkStartDate() {
+                return this.startDateActive;
+            },
+            checkHourActiveClass(i) {
+                let hour;
+                if (this.$parent.fConfigs.isDateRange) {
+                    if (this.checkStartDate()) {
+                        hour = this.$parent.calendar.dateRange.start.hour;
+                    } else {
+                        hour = this.$parent.calendar.dateRange.end.hour;
+                    }
+                } else {
+                    hour = this.$parent.calendar.selectedHour;
+                }
+
+                return hour === (i < 10 ? '0' + (i - 1) : i);
+            },
+            checkMinuteActiveClass(i) {
+                let minute;
+                if (this.$parent.fConfigs.isDateRange) {
+                    if (this.checkStartDate()) {
+                        minute = this.$parent.calendar.dateRange.start.minute;
+                    } else {
+                        minute = this.$parent.calendar.dateRange.end.minute;
+                    }
+                } else {
+                    minute = this.$parent.calendar.selectedMinute;
+                }
+
+                return minute === (i < 10 ? '0' + (i - 1) : i);
             },
             setStyles() {
                 let container = this.$parent.$refs.mainContainer;
 
-                const selectedHour = this.$refs.hourList.querySelector('.vfc-time-picker__item--selected');
-                const selectedMinute = this.$refs.minuteList.querySelector('.vfc-time-picker__item--selected');
-                this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - container.clientHeight/2 : 0;
-                this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - container.clientHeight/2 : 0;
+                this.$nextTick(function(){
+                    const selectedHour = this.$refs.hourList.querySelector('.vfc-time-picker__item--selected');
+                    const selectedMinute = this.$refs.minuteList.querySelector('.vfc-time-picker__item--selected');
+
+                    this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - container.clientHeight / 2 : 0;
+                    this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - container.clientHeight / 2 : 0;
+                });
 
                 let timeLine = document.getElementById('time-line');
                 document.getElementsByClassName('vfc-time-picker__list')[0].style.height = container.clientHeight - timeLine.clientHeight + 'px';