Skip to content

Commit 118c78e

Browse files
ManukMinasyanManukMinasyan
committed
Improve time picker design and functionality
1 parent 4fe0a66 commit 118c78e

File tree

5 files changed

+137
-63
lines changed

5 files changed

+137
-63
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.5",
9+
"version": "2.3.6",
1010
"license": "MIT",
1111
"repository": {
1212
"type": "git",

‎src/Demo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
ref="Calendar"
55
v-model="calendarData2"
66
:sunday-start="false"
7-
:is-modal="true"
7+
:is-modal="false"
88
:date-format="'yyyy-mm-dd'"
99
:change-month-function="true"
1010
:is-typeable="true"

‎src/assets/scss/calendar.scss

Lines changed: 63 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,18 +112,67 @@ input.vfc-single-input {
112112
}
113113

114114
.vfc-time-picker-container {
115-
height: 100%;
116115
display: flex;
117116
flex-direction: column;
118117
justify-content: center;
119118

119+
.vfc-time-picker {
120+
box-sizing: border-box;
121+
&::after {
122+
content: '';
123+
display: table;
124+
clear: both;
125+
}
126+
& * {
127+
box-sizing: border-box;
128+
}
129+
}
130+
.vfc-time-picker__list {
131+
float: left;
132+
width: 50%;
133+
height: 200px;
134+
overflow-y: scroll;
135+
&::-webkit-scrollbar {
136+
width: 3px;
137+
}
138+
&::-webkit-scrollbar-track {
139+
background: #efefef;
140+
}
141+
&::-webkit-scrollbar-thumb {
142+
background: #ccc;
143+
}
144+
}
145+
.vfc-time-picker__with-suffix .vfc-time-picker__list {
146+
width: 33.3%;
147+
}
148+
.vfc-time-picker__item {
149+
padding: 10px 0;
150+
font-size: 20px;
151+
text-align: center;
152+
cursor: pointer;
153+
transition: font-size .3s;
154+
}
155+
.vfc-time-picker__item:hover {
156+
font-size: 32px;
157+
}
158+
.vfc-time-picker__item--selected {
159+
color: $royalblue;
160+
font-size: 32px;
161+
}
162+
.vfc-time-picker__item--disabled {
163+
opacity: 0.4;
164+
cursor: default;
165+
font-size: 20px !important;
166+
}
167+
120168
.vfc-close {
121169
position: absolute;
122-
right: 32px;
123-
top: 32px;
170+
right: 12px;
171+
top: 16px;
124172
width: 32px;
125173
height: 32px;
126174
opacity: 0.3;
175+
z-index: 10000;
127176
}
128177
.vfc-close:hover {
129178
opacity: 1;
@@ -132,9 +181,9 @@ input.vfc-single-input {
132181
position: absolute;
133182
left: 15px;
134183
content: ' ';
135-
height: 33px;
184+
height: 26px;
136185
width: 2px;
137-
background-color: #333;
186+
background-color: #FFFFFF;
138187
}
139188
.vfc-close:before {
140189
transform: rotate(45deg);
@@ -145,14 +194,20 @@ input.vfc-single-input {
145194

146195
.vfc-modal-time-mechanic {
147196
position: relative;
148-
width: 40%;
149197
margin: 0 auto;
198+
width: 100%;
150199
.vfc-modal-time-line {
151-
text-align: center;
152-
color: #7d7d7d;
200+
width: 100%;
201+
background-color: $royalblue;
202+
text-align: left;
203+
color: #FFFFFF;
153204
font-size: 20px;
154205
padding-top: 15px;
155206
padding-bottom: 15px;
207+
border-radius: .28571429rem .28571429rem 0 0;
208+
span {
209+
margin-left: 15px;
210+
}
156211
}
157212
}
158213

‎src/components/FunctionalCalendar.vue

Lines changed: 11 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -60,41 +60,9 @@
6060
</div>
6161
</div>
6262
</template>
63-
<template v-else-if="showTimePicker">
64-
<div class="vfc-time-picker-container">
65-
<div class="vfc-close" @click="openCloseTimePicker()"></div>
66-
<div class="vfc-modal-time-mechanic">
67-
<div id="time-line" class="vfc-modal-time-line">
68-
{{ calendar.selectedDateTime }}
69-
</div>
70-
<div class="vfc-modal-append">
71-
<div class="vfc-arrow vfc-arrow-up"></div>
72-
<span class="vfc-modal-midle"></span>
73-
<div class="vfc-arrow vfc-arrow-up"></div>
74-
</div>
75-
<div class="vfc-modal-digits">
76-
<select class="vfc-modal-digit" @change="changedHour" v-model="calendar.selectedHour">
77-
<option value="00">00</option>
78-
<option :value="i < 10 ? '0'+i : i" v-for="i in 23">
79-
{{ i < 10 ? '0'+i : i}}
80-
</option>
81-
</select>
82-
<span class="vfc-modal-midle-dig">:</span>
83-
<select class="vfc-modal-digit" @change="changedMinute" v-model="calendar.selectedMinute">
84-
<option value="00">00</option>
85-
<option :value="i < 10 ? '0'+i : i" v-for="i in 59">
86-
{{ i < 10 ? '0'+i : i}}
87-
</option>
88-
</select>
89-
</div>
90-
<div class="vfc-modal-append">
91-
<div class="vfc-arrow vfc-arrow-down"></div>
92-
<span class="vfc-modal-midle"></span>
93-
<div class="vfc-arrow vfc-arrow-down"></div>
94-
</div>
95-
</div>
96-
</div>
97-
</template>
63+
<div v-else-if="showTimePicker">
64+
<time-picker></time-picker>
65+
</div>
9866
<template v-else>
9967
<div class="vfc-calendars-container">
10068
<div class="vfc-navigation-buttons" ref="navigationButtons"
@@ -153,9 +121,11 @@
153121
<script>
154122
import helpCalendar from '../assets/js/calendar'
155123
import {propsAndData} from "../mixins/propsAndData";
124+
import TimePicker from "./TimePicker";
156125
157126
export default {
158127
name: "FunctionalCalendar",
128+
components: {TimePicker},
159129
mixins: [propsAndData],
160130
created() {
161131
this.setConfigs();
@@ -186,7 +156,7 @@
186156
this.$emit('opened');
187157
else
188158
this.$emit('closed');
189-
}, {immediate: true, deep: true})
159+
}, {immediate: true, deep: true});
190160
191161
this.setCalendarStyles();
192162
},
@@ -499,9 +469,9 @@
499469
// Time Picker
500470
if (this.fConfigs.withTimePicker) {
501471
if (this.fConfigs.isDateRange && this.calendar.dateRange.end.date) {
502-
this.openCloseTimePicker();
472+
this.openTimePicker();
503473
} else if (this.fConfigs.isDatePicker) {
504-
this.openCloseTimePicker();
474+
this.openTimePicker();
505475
}
506476
}
507477
},
@@ -663,17 +633,6 @@
663633
this.calendar.currentDate = newDate;
664634
this.initCalendar();
665635
},
666-
changedHour(e) {
667-
this.calendar.selectedHour = e.target.value;
668-
this.setSelectedDateTime();
669-
},
670-
changedMinute(e) {
671-
this.calendar.selectedMinute = e.target.value;
672-
this.setSelectedDateTime();
673-
},
674-
setSelectedDateTime() {
675-
this.calendar.selectedDateTime = this.calendar.selectedDate + " " + this.calendar.selectedHour + ':' + this.calendar.selectedMinute;
676-
},
677636
openMonthPicker() {
678637
if (this.fConfigs.changeMonthFunction)
679638
this.showMonthPicker = true;
@@ -682,9 +641,8 @@
682641
if (this.fConfigs.changeYearFunction)
683642
this.showYearPicker = true;
684643
},
685-
openCloseTimePicker() {
686-
this.setSelectedDateTime();
687-
this.showTimePicker = !this.showTimePicker;
644+
openTimePicker() {
645+
this.showTimePicker = true;
688646
},
689647
pickMonth(key) {
690648
this.showMonthPicker = false;
@@ -830,7 +788,7 @@
830788
}
831789
</script>
832790

833-
<style scoped lang="scss">
791+
<style lang="scss">
834792
.vfc-styles-conditional-class {
835793
@import "../assets/scss/calendar.scss";
836794
}

‎src/components/TimePicker.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="vfc-time-picker-container">
3+
<div class="vfc-close" @click="close()"></div>
4+
<div class="vfc-modal-time-mechanic">
5+
<div id="time-line" class="vfc-modal-time-line">
6+
<span>{{ $parent.calendar.selectedDateTime }}</span>
7+
</div>
8+
<div class="vfc-time-picker">
9+
<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>
11+
</div>
12+
<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>
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: "TimePicker",
23+
mounted () {
24+
this.setSelectedDateTime();
25+
this.setStyles();
26+
},
27+
methods: {
28+
close() {
29+
this.$parent.showTimePicker = false;
30+
},
31+
changeHour(hour) {
32+
this.$parent.calendar.selectedHour = hour;
33+
this.setSelectedDateTime();
34+
},
35+
changeMinute(minute)
36+
{
37+
this.$parent.calendar.selectedMinute = minute;
38+
this.setSelectedDateTime();
39+
},
40+
setSelectedDateTime() {
41+
this.$parent.calendar.selectedDateTime = this.$parent.calendar.selectedDate + " " + this.$parent.calendar.selectedHour + ':' + this.$parent.calendar.selectedMinute;
42+
},
43+
setStyles() {
44+
let container = this.$parent.$refs.mainContainer;
45+
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;
50+
51+
let timeLine = document.getElementById('time-line');
52+
document.getElementsByClassName('vfc-time-picker__list')[0].style.height = container.clientHeight - timeLine.clientHeight + 'px';
53+
document.getElementsByClassName('vfc-time-picker__list')[1].style.height = container.clientHeight - timeLine.clientHeight + 'px';
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style scoped>
60+
61+
</style>

0 commit comments

Comments
 (0)