Skip to content

Commit 6303423

Browse files
ManukMinasyanManukMinasyan
committed
Added time picker support for date range
1 parent 118c78e commit 6303423

File tree

5 files changed

+106
-19
lines changed

5 files changed

+106
-19
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
},
77
"name": "vue-functional-calendar",
88
"description": "A style-uninstallable datepicker component for Vue.js",
9-
"version": "2.3.6",
9+
"version": "2.3.7",
1010
"license": "MIT",
1111
"repository": {
1212
"type": "git",

‎src/Demo.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
:change-month-function="true"
1010
:is-typeable="true"
1111
:change-year-function="true"
12-
:is-date-picker="true"
13-
:is-date-range="false"
12+
:is-date-picker="false"
13+
:is-date-range="true"
1414
:with-time-picker="true"
1515
:is-multiple="false"
1616
:calendars-count="2"

‎src/assets/scss/calendar.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,9 @@ input.vfc-single-input {
207207
border-radius: .28571429rem .28571429rem 0 0;
208208
span {
209209
margin-left: 15px;
210+
span.vfc-active {
211+
text-decoration: underline;
212+
}
210213
}
211214
}
212215
}

‎src/components/FunctionalCalendar.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,6 @@
237237
},
238238
'input.dateRange.start.date': {
239239
handler(val) {
240-
console.log(val);
241240
this.input.dateRange.start.date = val = helpCalendar.mask(val);
242241
if (helpCalendar.getDateFromFormat(val).getMonth()) {
243242
this.calendar.dateRange.start.date = val;
@@ -468,9 +467,7 @@
468467
469468
// Time Picker
470469
if (this.fConfigs.withTimePicker) {
471-
if (this.fConfigs.isDateRange && this.calendar.dateRange.end.date) {
472-
this.openTimePicker();
473-
} else if (this.fConfigs.isDatePicker) {
470+
if (this.fConfigs.isDateRange || this.fConfigs.isDatePicker) {
474471
this.openTimePicker();
475472
}
476473
}

‎src/components/TimePicker.vue

Lines changed: 99 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,29 @@
33
<div class="vfc-close" @click="close()"></div>
44
<div class="vfc-modal-time-mechanic">
55
<div id="time-line" class="vfc-modal-time-line">
6-
<span>{{ $parent.calendar.selectedDateTime }}</span>
6+
<span>
7+
<template v-if="$parent.fConfigs.isDateRange">
8+
<span @click="startDateActive = true" :class="{'vfc-active': startDateActive}">{{ $parent.calendar.dateRange.start.dateTime}}</span><template
9+
v-if="$parent.calendar.dateRange.end.date"> -<span @click="startDateActive = false"
10+
:class="{'vfc-active': !startDateActive}">{{ this.$parent.calendar.dateRange.end.dateTime }}</span></template>
11+
</template>
12+
<template v-else>
13+
{{ $parent.calendar.selectedDateTime }}
14+
</template>
15+
</span>
716
</div>
817
<div class="vfc-time-picker">
918
<div class="vfc-time-picker__list vfc-time-picker__list--hours" ref="hourList">
10-
<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>
19+
<div class="vfc-time-picker__item"
20+
:class="{'vfc-time-picker__item--selected': checkHourActiveClass(i)}" v-for="i in 23"
21+
@click="changeHour(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}
22+
</div>
1123
</div>
1224
<div class="vfc-time-picker__list vfc-time-picker__list--minutes" ref="minuteList">
13-
<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>
25+
<div class="vfc-time-picker__item"
26+
:class="{'vfc-time-picker__item--selected': checkMinuteActiveClass(i)}"
27+
v-for="i in 59" @click="changeMinute(i < 10 ? '0'+(i-1) : i)">{{ i < 10 ? '0'+(i-1) : i}}
28+
</div>
1429
</div>
1530
</div>
1631
</div>
@@ -20,7 +35,26 @@
2035
<script>
2136
export default {
2237
name: "TimePicker",
23-
mounted () {
38+
data() {
39+
return {
40+
startDateActive: true
41+
}
42+
},
43+
watch: {
44+
'startDateActive': function(){
45+
this.setStyles();
46+
}
47+
},
48+
mounted() {
49+
let startDate = this.$parent.calendar.dateRange.start.date;
50+
let endDate = this.$parent.calendar.dateRange.end.date;
51+
52+
if (startDate && startDate < endDate) {
53+
this.startDateActive = false;
54+
} else {
55+
this.startDateActive = true;
56+
}
57+
2458
this.setSelectedDateTime();
2559
this.setStyles();
2660
},
@@ -29,24 +63,77 @@
2963
this.$parent.showTimePicker = false;
3064
},
3165
changeHour(hour) {
32-
this.$parent.calendar.selectedHour = hour;
66+
if (this.$parent.fConfigs.isDateRange) {
67+
if (this.checkStartDate()) {
68+
this.$parent.calendar.dateRange.start.hour = hour;
69+
} else {
70+
this.$parent.calendar.dateRange.end.hour = hour;
71+
}
72+
} else {
73+
this.$parent.calendar.selectedHour = hour;
74+
}
75+
3376
this.setSelectedDateTime();
3477
},
35-
changeMinute(minute)
36-
{
37-
this.$parent.calendar.selectedMinute = minute;
78+
changeMinute(minute) {
79+
if (this.$parent.fConfigs.isDateRange) {
80+
if (this.checkStartDate()) {
81+
this.$parent.calendar.dateRange.start.minute = minute;
82+
} else {
83+
this.$parent.calendar.dateRange.end.minute = minute;
84+
}
85+
} else {
86+
this.$parent.calendar.selectedHour = hour;
87+
}
88+
3889
this.setSelectedDateTime();
3990
},
4091
setSelectedDateTime() {
4192
this.$parent.calendar.selectedDateTime = this.$parent.calendar.selectedDate + " " + this.$parent.calendar.selectedHour + ':' + this.$parent.calendar.selectedMinute;
93+
this.$parent.calendar.dateRange.start.dateTime = this.$parent.calendar.dateRange.start.date + " " + this.$parent.calendar.dateRange.start.hour + ':' + this.$parent.calendar.dateRange.start.minute;
94+
this.$parent.calendar.dateRange.end.dateTime = this.$parent.calendar.dateRange.end.date + " " + this.$parent.calendar.dateRange.end.hour + ':' + this.$parent.calendar.dateRange.end.minute;
95+
},
96+
checkStartDate() {
97+
return this.startDateActive;
98+
},
99+
checkHourActiveClass(i) {
100+
let hour;
101+
if (this.$parent.fConfigs.isDateRange) {
102+
if (this.checkStartDate()) {
103+
hour = this.$parent.calendar.dateRange.start.hour;
104+
} else {
105+
hour = this.$parent.calendar.dateRange.end.hour;
106+
}
107+
} else {
108+
hour = this.$parent.calendar.selectedHour;
109+
}
110+
111+
return hour === (i < 10 ? '0' + (i - 1) : i);
112+
},
113+
checkMinuteActiveClass(i) {
114+
let minute;
115+
if (this.$parent.fConfigs.isDateRange) {
116+
if (this.checkStartDate()) {
117+
minute = this.$parent.calendar.dateRange.start.minute;
118+
} else {
119+
minute = this.$parent.calendar.dateRange.end.minute;
120+
}
121+
} else {
122+
minute = this.$parent.calendar.selectedMinute;
123+
}
124+
125+
return minute === (i < 10 ? '0' + (i - 1) : i);
42126
},
43127
setStyles() {
44128
let container = this.$parent.$refs.mainContainer;
45129
46-
const selectedHour = this.$refs.hourList.querySelector('.vfc-time-picker__item--selected');
47-
const selectedMinute = this.$refs.minuteList.querySelector('.vfc-time-picker__item--selected');
48-
this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - container.clientHeight/2 : 0;
49-
this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - container.clientHeight/2 : 0;
130+
this.$nextTick(function(){
131+
const selectedHour = this.$refs.hourList.querySelector('.vfc-time-picker__item--selected');
132+
const selectedMinute = this.$refs.minuteList.querySelector('.vfc-time-picker__item--selected');
133+
134+
this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - container.clientHeight / 2 : 0;
135+
this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - container.clientHeight / 2 : 0;
136+
});
50137
51138
let timeLine = document.getElementById('time-line');
52139
document.getElementsByClassName('vfc-time-picker__list')[0].style.height = container.clientHeight - timeLine.clientHeight + 'px';

0 commit comments

Comments
 (0)