Skip to content

Commit

Permalink
Added time picker support for date range
Browse files Browse the repository at this point in the history
  • Loading branch information
@ManukMinasyan
ManukMinasyan committed May 28, 2019
1 parent 118c78e commit 6303423
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 19 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/Demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions src/assets/scss/calendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,9 @@ input.vfc-single-input {
border-radius: .28571429rem .28571429rem 0 0;
span {
margin-left: 15px;
span.vfc-active {
text-decoration: underline;
}
}
}
}
Expand Down
5 changes: 1 addition & 4 deletions src/components/FunctionalCalendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
}
Expand Down
111 changes: 99 additions & 12 deletions src/components/TimePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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();
},
Expand All @@ -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';
Expand Down

0 comments on commit 6303423

Please sign in to comment.