CodePen Embed - Time Picker with Day or Night Illustration

#app
	zxc-time-picker(lang="en", v-bind:show-hours="true", v-bind:show-minutes="true", v-bind:show-seconds="true")

View Compiled

// ----- Variable declarations

// ----- .zxc-time-picker-overlay
$zxc-time-picker-overlay-background-color: rgba(0, 0, 0, 0.3);

// ----- .zxc-time-picker
$zxc-time-picker-max-width: 20em;
$zxc-time-picker-responsive-font-size: 5vw;

// ----- .zxc-time-picker-pattern
$zxc-time-picker-pattern-background-color: #2f2f2f;
$zxc-time-picker-pattern-padding: 0.5em;

// ----- .zxc-time-picker-pattern label
$zxc-time-picker-pattern-label-color: #ffffff;
$zxc-time-picker-pattern-label-background-color: #0076db;
$zxc-time-picker-pattern-label-padding: 0.5em 0.9em;
$zxc-time-picker-pattern-label-transition: background-color 200ms ease-in-out;

// ----- .zxc-time-picker-pattern:checked + label
$zxc-time-picker-pattern-checked-label-background-color: #00569f;

// ----- .zxc-time-picker-image
$zxc-time-picker-image-height: 9em;

// ----- .zxc-time-picker-bg-day
$zxc-time-picker-bg-day-background-image: linear-gradient(
	#1878ef 20%,
	#72d2ff 90%
);

// ----- .zxc-time-picker-bg-night
$zxc-time-picker-bg-night-background-image: linear-gradient(
	#130149 10%,
	#550086 80%
);

// ----- .zxc-time-picker-sun
$zxc-time-picker-sun-fill: #e2db00;
$zxc-time-picker-sun-size: 7em;
$zxc-time-picker-sun-width: $zxc-time-picker-sun-size;
$zxc-time-picker-sun-height: $zxc-time-picker-sun-size;
$zxc-time-picker-sun-top: calc(50% - #{$zxc-time-picker-sun-height / 2});
$zxc-time-picker-sun-right: 1.5em;

// ----- .zxc-time-picker-cloud
$zxc-time-picker-cloud-fill: #ffffff;
$zxc-time-picker-cloud-size: 6em;
$zxc-time-picker-cloud-width: $zxc-time-picker-cloud-size;
$zxc-time-picker-cloud-height: $zxc-time-picker-cloud-size;
$zxc-time-picker-cloud-bottom: -0.2em;
$zxc-time-picker-cloud-right: 5.5em;

// ----- .zxc-time-picker-moon
$zxc-time-picker-moon-fill: #fff74d;
$zxc-time-picker-moon-size: 7em;
$zxc-time-picker-moon-width: $zxc-time-picker-moon-size;
$zxc-time-picker-moon-height: $zxc-time-picker-moon-size;
$zxc-time-picker-moon-top: calc(50% - #{$zxc-time-picker-moon-height / 2});

// ----- stars
$zxc-time-picker-star-fill: #f1ff21;

// ----- .zxc-time-picker-star-1
$zxc-time-picker-star-1-fill: $zxc-time-picker-star-fill;
$zxc-time-picker-star-1-size: 3em;
$zxc-time-picker-star-1-width: $zxc-time-picker-star-1-size;
$zxc-time-picker-star-1-height: $zxc-time-picker-star-1-size;
$zxc-time-picker-star-1-top: 1em;
$zxc-time-picker-star-1-left: 6.5em;

// ----- .zxc-time-picker-star-2
$zxc-time-picker-star-2-fill: $zxc-time-picker-star-fill;
$zxc-time-picker-star-2-size: 2em;
$zxc-time-picker-star-2-width: $zxc-time-picker-star-2-size;
$zxc-time-picker-star-2-height: $zxc-time-picker-star-2-size;
$zxc-time-picker-star-2-top: 4em;
$zxc-time-picker-star-2-left: 9em;

// ----- .zxc-time-picker-values
$zxc-time-picker-values-background-color: #ffffff;
$zxc-time-picker-values-height: 10em;

// ----- .zxc-time-picker-nav
$zxc-time-picker-nav-background-color: $zxc-time-picker-values-background-color;
$zxc-time-picker-nav-width: 4.5em;
$zxc-time-picker-nav-height: 1.5em;

// ----- .zxc-time-picker-nav:hover
$zxc-time-picker-nav-hover-background-color: darken($zxc-time-picker-nav-background-color, 15%);

// ----- .zxc-time-picker-nav:active
$zxc-time-picker-nav-active-background-color: darken($zxc-time-picker-nav-background-color, 30%);

// ----- .zxc-time-picker-nav svg
$zxc-time-picker-nav-svg-fill: #a0a0a0;

// ----- .zxc-time-picker-disabled svg
$zxc-time-picker-disabled-fill: lighten($zxc-time-picker-nav-svg-fill, 20%);

// .zxc-time-picker-scroll:before, .zxc-time-picker-scroll:after
$zxc-time-picker-scroll-before-after-height: 2em;

// .zxc-time-picker-scroll:before
$zxc-time-picker-scroll-before-background-image: linear-gradient($zxc-time-picker-values-background-color, transparent);

// .zxc-time-picker-scroll:after
$zxc-time-picker-scroll-after-background-image: linear-gradient(to top, $zxc-time-picker-values-background-color, transparent);

// ----- .zxc-time-picker-option
$zxc-time-picker-option-color: #a0a0a0;
$zxc-time-picker-option-font-size: 1.75em;

// ----- .zxc-time-picker-option:first-child
$zxc-time-picker-option-first-child-margin-top: 1.5em;

// ----- .zxc-time-picker-selected
$zxc-time-picker-selected-background-color: #2f2f2f;
$zxc-time-picker-selected-height: 2em;

// ---- Mixins

@mixin render-image($fill, $width, $height, $transform) {
	fill: $fill;
	width: $width;
	height: $height;
	position: absolute;
	transform: $transform;
}

@mixin render-button($color, $background-color, $padding, $transition) {
	color: $color;
	font-family: inherit;
	background-color: $background-color;
	display: inline-block;
	padding: $padding;
	margin: 0;
	border: none;
	outline: none;
	user-select: none;
	transition: $transition;
}

// ----- CSS Styles

.zxc-time-picker-overlay {
	font-family: inherit;
	background-color: none;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: -100vh;
	left: -100vw;
	&.zxc-active {
		background-color: $zxc-time-picker-overlay-background-color;
		top: 0;
		left: 0;
	}
}

.zxc-time-picker {
	font-family: inherit;
	width: 100%;
	max-width: $zxc-time-picker-max-width;
	// TODO: Do opening animation here...
}

.zxc-time-picker-pattern {
	font-family: inherit;
	background-color: $zxc-time-picker-pattern-background-color;
	width: 100%;
	padding: $zxc-time-picker-pattern-padding;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	input[type="radio"] {
		display: none;
		&:checked + label {
			background-color: $zxc-time-picker-pattern-checked-label-background-color;
		}
	}
	label {
		@include render-button(
			$zxc-time-picker-pattern-label-color,
			$zxc-time-picker-pattern-label-background-color,
			$zxc-time-picker-pattern-label-padding,
			$zxc-time-picker-pattern-label-transition);
		font-size: 0.85em;
	}
}

.zxc-time-picker-image {
	width: 100%;
	height: $zxc-time-picker-image-height;
	position: relative;
	overflow: hidden;
}

.zxc-time-picker-day {
	.zxc-time-picker-sun {
		animation: zxc-time-picker-sun-show 800ms ease-out forwards,
			zxc-time-picker-sun-animate 8000ms linear 1000ms infinite;
	}
	.zxc-time-picker-cloud {
		animation: zxc-time-picker-cloud-show 500ms ease-out forwards,
			zxc-time-picker-cloud-animate 1500ms ease-in-out 1000ms infinite;
	}
	.zxc-time-picker-moon {
		animation: zxc-time-picker-moon-hide 500ms ease-out forwards;
	}
	.zxc-time-picker-star- {
		&1, &2 {
			animation: zxc-time-picker-star-hide 500ms ease-out forwards;
		}
	}
	transition: background-image 300ms linear;
	.zxc-time-picker-bg-day {
		background-image: $zxc-time-picker-bg-day-background-image;
		opacity: 1;
	}
}

.zxc-time-picker-night {
	.zxc-time-picker-sun {
		animation: zxc-time-picker-sun-hide 500ms ease-out forwards;
	}
	.zxc-time-picker-cloud {
		animation: zxc-time-picker-cloud-hide 500ms ease-out forwards;
	}
	.zxc-time-picker-moon {
		animation: zxc-time-picker-moon-show 800ms ease-out forwards,
			zxc-time-picker-moon-animate 8000ms linear 1000ms infinite;
	}
	.zxc-time-picker-star- {
		&1 {
			animation: zxc-time-picker-star-show 800ms ease-out forwards,
				zxc-time-picker-star-animate 3000ms linear 1000ms infinite;
		}
		&2 {
			animation: zxc-time-picker-star-show 800ms ease-out forwards,
				zxc-time-picker-star-animate 2520ms linear 1000ms infinite;
		}
	}
	.zxc-time-picker-bg-night {
		background-image: $zxc-time-picker-bg-night-background-image;
		opacity: 1;
	}
}

.zxc-time-picker-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 800ms ease-in-out;
}

.zxc-time-picker-sun {
	@include render-image($zxc-time-picker-sun-fill, $zxc-time-picker-sun-width, $zxc-time-picker-sun-height, scale(0));
	top: $zxc-time-picker-sun-top;
	right: $zxc-time-picker-sun-right;
}

.zxc-time-picker-cloud {
	@include render-image($zxc-time-picker-cloud-fill, $zxc-time-picker-cloud-width, $zxc-time-picker-cloud-height, translateX(-100%));
	bottom: $zxc-time-picker-cloud-bottom;
	right: $zxc-time-picker-cloud-right;
	opacity: 0;
}

.zxc-time-picker-moon {
	@include render-image($zxc-time-picker-moon-fill, $zxc-time-picker-moon-width, $zxc-time-picker-moon-height, rotate(155deg) scale(0));
	top: $zxc-time-picker-moon-top;
	left: 0;
}

.zxc-time-picker-star- {
	&1 {
		@include render-image($zxc-time-picker-star-1-fill, $zxc-time-picker-star-1-width, $zxc-time-picker-star-1-height, scale(0));
		top: $zxc-time-picker-star-1-top;
		left: $zxc-time-picker-star-1-left;
	}
	&2 {
		@include render-image($zxc-time-picker-star-2-fill, $zxc-time-picker-star-2-width, $zxc-time-picker-star-2-height, scale(0));
		top: $zxc-time-picker-star-2-top;
		left: $zxc-time-picker-star-2-left;
	}
}

.zxc-time-picker-values {
	background-color: $zxc-time-picker-values-background-color;
	height: $zxc-time-picker-values-height;
	display: flex;
	justify-content: center;
}

.zxc-time-picker-select {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.zxc-time-picker-nav {
	background-color: $zxc-time-picker-nav-background-color;
	width: $zxc-time-picker-nav-width;
	height: $zxc-time-picker-nav-height;
	display: block;
	text-align: center;
	transition: background-color 300ms ease-in-out;
	&:not(.zxc-time-picker-disabled):hover {
		background-color: $zxc-time-picker-nav-hover-background-color;
	}
	&:not(.zxc-time-picker-disabled):active {
		background-color: $zxc-time-picker-nav-active-background-color;
	}
	svg {
		fill: $zxc-time-picker-nav-svg-fill;
		height: 1.5em;
	}
	&.zxc-time-picker-disabled {
		cursor: default;
		svg {
			fill: $zxc-time-picker-disabled-fill;
		}
	}
}

.zxc-time-picker-scroll {
	height: 100%;
	overflow: hidden;
	position: relative;
	&:before, &:after {
		content: '';
		width: 100%;
		height: $zxc-time-picker-scroll-before-after-height;
		position: absolute;
	}
	&:before {
		background-image: $zxc-time-picker-scroll-before-background-image;
		top: 0;
		z-index: 1;
	}
	&:after {
		background-image: $zxc-time-picker-scroll-after-background-image;
		bottom: 0;
		z-index: 1;
	}
}

.zxc-time-picker-option {
	color: $zxc-time-picker-option-color;
	font-size: $zxc-time-picker-option-font-size;
	font-weight: bold;
	text-align: center;
	user-select: none;
	transition: transform 300ms ease-in-out;
	&:first-child {
		margin-top: $zxc-time-picker-option-first-child-margin-top;
	}
}

.zxc-time-picker-selected {
	background-color: $zxc-time-picker-selected-background-color;
	width: 100%;
	height: $zxc-time-picker-selected-height;
	position: absolute;
	top: calc(50% - #{$zxc-time-picker-selected-height / 2});
	left: 0;
	mix-blend-mode: difference;
}

// ----- .zxc-time-picker-footer
$zxc-time-picker-footer-background-color: #2f2f2f;
$zxc-time-picker-footer-padding: 0.5em;
 
.zxc-time-picker-footer {
	background-color: $zxc-time-picker-footer-background-color;
	padding: $zxc-time-picker-footer-padding;
	display: flex;
	justify-content: space-between;
}

// ----- .zxc-time-picker-btn
$zxc-time-picker-btn-color: #1f1f1f;
$zxc-time-picker-btn-background-color: #e4e4e4;
$zxc-time-picker-btn-padding: 0.5em 0.9em;
$zxc-time-picker-btn-transition: background-color 200ms ease-in-out;

// ----- .zxc-time-picker-btn:hover
$zxc-time-picker-btn-hover-background-color: #f8f8f8;

// ----- .zxc-time-picker-btn:active, .zxc-time-picker-btn:focus
$zxc-time-picker-btn-active-focus-background-color: #c4c4c4;

// ----- .zxc-time-picker-btn-primary
$zxc-time-picker-btn-primary-color: #ffffff;
$zxc-time-picker-btn-primary-background-color: #0076db;

// ----- .zxc-time-picker-btn-primary:hover
$zxc-time-picker-btn-primary-hover-background-color: #1790f8;

// ----- .zxc-time-picker-btn-primary:active, .zxc-time-picker-btn-primary:focus
$zxc-time-picker-btn-primary-active-focus-background-color: #00569f;

.zxc-time-picker-btn {
	@include render-button(
			$zxc-time-picker-btn-color,
			$zxc-time-picker-btn-background-color,
			$zxc-time-picker-btn-padding,
			$zxc-time-picker-btn-transition);
		&:hover {
			background-color: $zxc-time-picker-btn-hover-background-color;
		}
		&:active, &:focus {
			background-color: $zxc-time-picker-btn-active-focus-background-color;
		}
	&-primary {
		@include render-button(
			$zxc-time-picker-btn-primary-color,
			$zxc-time-picker-btn-primary-background-color,
			$zxc-time-picker-btn-padding,
			$zxc-time-picker-btn-transition);
		&:hover {
			background-color: $zxc-time-picker-btn-primary-hover-background-color;
		}
		&:active, &:focus {
			background-color: $zxc-time-picker-btn-primary-active-focus-background-color;
		}
	}
}

// ----- Keyframes

@keyframes zxc-time-picker-sun-show {
	0%   { transform: scale(0); }
	100% { transform: scale(1); }
}

@keyframes zxc-time-picker-sun-animate {
	0%   { transform: rotate(0deg); }
	15%  { transform: rotate(-25deg); }
	20%  { transform: rotate(-30deg); }
	25%  { transform: rotate(-35deg); }
	65%  { transform: rotate(25deg); }
	70%  { transform: rotate(30deg); }
	75%  { transform: rotate(35deg); }
	100% { transform: rotate(0deg); }
}

@keyframes zxc-time-picker-sun-hide {
	0%   { transform: scale(1); }
	100% { transform: scale(0); }
}

@keyframes zxc-time-picker-cloud-show {
	0%   { opacity: 0; transform: translateX(-100%); }
	100% { opacity: 1; transform: translateX(0%); }
}

@keyframes zxc-time-picker-cloud-animate {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

@keyframes zxc-time-picker-cloud-hide {
	0%   { opacity: 1; transform: translateX(0%); }
	100% { opacity: 0; transform: translateX(-100%); }
}

@keyframes zxc-time-picker-moon-show {
	0%   { transform: rotate(155deg) scale(0); }
	100% { transform: rotate(155deg) scale(1); }
}

@keyframes zxc-time-picker-moon-animate {
	0%   { transform: rotate(155deg); }
	15%  { transform: rotate(150deg); }
	20%  { transform: rotate(145deg); }
	25%  { transform: rotate(140deg); }
	65%  { transform: rotate(160deg); }
	70%  { transform: rotate(165deg); }
	75%  { transform: rotate(170deg); }
	100% { transform: rotate(155deg); }
}

@keyframes zxc-time-picker-moon-hide {
	0%   { transform: rotate(155deg) scale(1); }
	100% { transform: rotate(155deg) scale(0); }
}

@keyframes zxc-time-picker-star-show {
	0%   { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes zxc-time-picker-star-animate {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.5); }
	100% { transform: scale(1); }
}

@keyframes zxc-time-picker-star-hide {
	0%   { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0); }
}

// ----- Media queries

@media (max-width: $zxc-time-picker-max-width) {
	.zxc-time-picker {
		font-size: $zxc-time-picker-responsive-font-size;
	}
}

View Compiled

// TODO: Select values by scroll (mobile)
//       Actual form interaction (and id binding)
//       Default value if opened by form
//       i18n for error messages
//       Different directory for language

// ----- The component

Vue.component('zxc-time-picker', {
	props: ['lang', 'show-hours', 'show-minutes', 'show-seconds'],
	data: function() {
		return {
			language: {
				en: {
					pattern12H: '12-hour',
					pattern24H: '24-hour',
					amText: 'AM',
					pmText: 'PM',
					okText: 'Select',
					cancelText: 'Cancel'
				}, ja: {
					pattern12H: '12 時間',
					pattern24H: '24 時間',
					amText: '午前',
					pmText: '午後',
					okText: '選択',
					cancelText: 'キャンセル'
				}, ph: {
					pattern12H: '12-oras',
					pattern24H: '24-oras',
					amText: 'AM',
					pmText: 'PM',
					okText: 'Piliin',
					cancelText: 'Kansela'
				}
			},
			showLanguage: {
				pattern12H: '12-hour',
				pattern24H: '24-hour',
				amText: 'AM',
				pmText: 'PM',
				okText: 'Select',
				cancelText: 'Cancel'
			},
			overlayActive: true,
			patternId12: null,
			patternId24: null,
			patternName: null,
			selectedPattern: 12,
			dayActive: true,
			nightActive: false,
			transformStyle: {
				h: null,
				m: null,
				s: null,
				p: null
			},
			disabledStyle: {
				up: {
					h: false,
					m: false,
					s: false,
					p: false
				}, down: {
					h: false,
					m: false,
					s: false,
					p: false
				}
			},
			hour: 6,
			minute: 0,
			second: 0,
			pattern: 0
		}
	},
	methods: {
		updateTime: function(time, min, max, dir) {
			if (dir == 'up') {
				if (time >= max) {
					return max;
				} else {
					return time + 1;
				}
			} else if (dir == 'down') {
				if (time <= min) {
					return min;
				} else {
					return time - 1;
				}
			} else {
				// TODO: Language for error messages
				throw 'Direction does not exist';
			}
		},
		changeDayOrNight(hour) {
			if (this.selectedPattern == 12) {
				hour = (this.pattern * 12) + this.hour;
			}
			
			if (hour >= 6 && hour <= 18) {
				this.dayActive   = true;
				this.nightActive = false;
			} else {
				this.dayActive   = false;
				this.nightActive = true;
			}
		},
		renderTime: function(which, min, max) {
			var reference = 0;
			
			if (which == 'h') {
				reference = this.hour - ((this.selectedPattern == 12) ? 1 : 0);
			} else if (which == 'm') {
				reference = this.minute;
			} else if (which == 's') {
				reference = this.second;
			} else if (which == 'p') {
				reference = this.pattern;
			} else {
				// TODO: Language for error messages
				throw 'Invalid time reference';
			}
			
			this.transformStyle[which] = 'translateY(-' + (reference * 100) + '%)';
			
			if (which == 'h' && this.selectedPattern == 12) {
				reference += 1;
			}
			
			if (typeof min !== 'undefined') {
				if (reference == min) {
					this.disabledStyle.down[which] = true;
				} else {
					this.disabledStyle.down[which] = false;
				}
			}
			
			if (typeof max !== 'undefined') {
				if (reference == max) {
					this.disabledStyle.up[which] = true;
				} else {
					this.disabledStyle.up[which] = false;
				}
			}
		},
		renderDefault: function() {
			this.renderTime('h', 0, 12);
			this.renderTime('m', 0, 59);
			this.renderTime('s', 0, 59);
			this.renderTime('p', 0, 1);
		},
		timeScroll: function(evt, which) {
			var dir = (evt.wheelDeltaY < 0) ? 'up' : 'down';
			
			this.adjustTime(evt, which, dir);
		},
		adjustTime: function(evt, which, dir) {
			evt.preventDefault();
			
			let min = 0;
			let max = 0;
			
			if (which == 'h') {
				min = (this.selectedPattern == 12) ? 1  : 0;
				max = (this.selectedPattern == 12) ? 12 : 23;

				this.hour = this.updateTime(this.hour, min, max, dir);
			} else if (which == 'm') {
				min = 0;
				max = 59;

				this.minute = this.updateTime(this.minute, 0, 59, dir);
			} else if (which == 's') {
				min = 0;
				max = 59;

				this.second = this.updateTime(this.second, 0, 59, dir);
			} else if (which == 'p') {
				min = 0;
				max = 1;

				this.pattern = this.updateTime(this.pattern, 0, 1, dir);
			} else {
				// TODO: Language for error messages
				throw 'Time pattern does not exist';
			}
			
			this.renderTime(which, min, max);
			this.changeDayOrNight(this.hour);
		},
		timepickerCancel: function() {
			this.selectedPattern = 12;
			this.hour    = 6;
			this.minute  = 0;
			this.second  = 0;
			this.pattern = 0;
			
			this.renderDefault();
		},
		timepickerSubmit: function() {
			var hourPattern = (this.selectedPattern == 12 && this.pattern == 1) ? (this.hour + 12) : this.hour;
			var hourValue   = ('0' + hourPattern).slice(-2);
			var minuteValue = ('0' + this.minute).slice(-2);
			var secondValue = ('0' + this.second).slice(-2);
			
			// TODO: Change text by language, or do another process here (maybe a callback)
			alert('You selected \'' + hourValue + ':' + minuteValue + ':' + secondValue + '\'');
		}
	},
	template: `
<div v-bind:class="['zxc-time-picker-overlay', { 'zxc-active': overlayActive }]">
	<div class="zxc-time-picker">
		<div class="zxc-time-picker-pattern">
			<input type="radio" v-model="selectedPattern" v-bind:id="patternId12" v-bind:name="patternName" value="12" v-bind:click="this.renderTime('h')" />
			<label v-bind:for="patternId12">{{ showLanguage.pattern12H }}</label>
			<input type="radio" v-model="selectedPattern" v-bind:id="patternId24" v-bind:name="patternName" value="24" v-bind:click="this.renderTime('h')" />
			<label v-bind:for="patternId24">{{ showLanguage.pattern24H }}</label>
		</div>
		<div class="zxc-time-picker-image" v-bind:class="{ 'zxc-time-picker-day': dayActive, 'zxc-time-picker-night': nightActive }">
			<div class="zxc-time-picker-bg zxc-time-picker-bg-day"></div>
			<div class="zxc-time-picker-bg zxc-time-picker-bg-night"></div>
			<svg class="zxc-time-picker-sun" viewBox="0 0 24 24">
				<path d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z" />
			</svg>
			<svg class="zxc-time-picker-cloud" viewBox="0 0 24 24">
				<path d="M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" />
			</svg>
			<svg class="zxc-time-picker-moon" viewBox="0 0 24 24">
				<path d="M10,2C8.18,2 6.47,2.5 5,3.35C8,5.08 10,8.3 10,12C10,15.7 8,18.92 5,20.65C6.47,21.5 8.18,22 10,22A10,10 0 0,0 20,12A10,10 0 0,0 10,2Z" />
			</svg>
			<svg class="zxc-time-picker-star-1" viewBox="0 0 24 24">
				<path d="M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z" />
			</svg>
			<svg class="zxc-time-picker-star-2" viewBox="0 0 24 24">
				<path d="M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z" />
			</svg>
		</div>
		<div class="zxc-time-picker-values">
			<div class="zxc-time-picker-select" v-if="showHours" v-on:mousewheel="timeScroll(event, 'h')">
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.up.h }]" v-on:mousedown="adjustTime(event, 'h', 'up')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
					</svg>
				</a>
				<div class="zxc-time-picker-scroll">
					<div class="zxc-time-picker-option" v-for="i in parseInt(selectedPattern)" v-bind:style="{ transform: transformStyle.h }">
						{{ (selectedPattern == 12) ? i : (i - 1) }}
					</div>
					<div class="zxc-time-picker-selected"></div>
				</div>
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.down.h }]" v-on:mousedown="adjustTime(event, 'h', 'down')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
					</svg>
				</a>
			</div>
			<div class="zxc-time-picker-select" v-if="showMinutes" v-on:mousewheel="timeScroll(event, 'm')">
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.up.m }]" v-on:mousedown="adjustTime(event, 'm', 'up')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
					</svg>
				</a>
				<div class="zxc-time-picker-scroll">
					<div class="zxc-time-picker-option" v-for="i in 60" v-bind:style="{ transform: transformStyle.m }">
						{{ ('0' + (i - 1)).slice(-2) }}
					</div>
					<div class="zxc-time-picker-selected"></div>
				</div>
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.down.m }]" v-on:mousedown="adjustTime(event, 'm', 'down')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
					</svg>
				</a>
			</div>
			<div class="zxc-time-picker-select" v-if="showSeconds" v-on:mousewheel="timeScroll(event, 's')">
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.up.s }]" v-on:mousedown="adjustTime(event, 's', 'up')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
					</svg>
				</a>
				<div class="zxc-time-picker-scroll">
					<div class="zxc-time-picker-option" v-for="i in 60" v-bind:style="{ transform: transformStyle.s }">
						{{ ('0' + (i - 1)).slice(-2) }}
					</div>
					<div class="zxc-time-picker-selected"></div>
				</div>
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.down.s }]" v-on:mousedown="adjustTime(event, 's', 'down')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
					</svg>
				</a>
			</div>
			<div class="zxc-time-picker-select" v-if="selectedPattern == 12" v-on:mousewheel="timeScroll(event, 'p')">
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.up.p }]" v-on:mousedown="adjustTime(event, 'p', 'up')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
					</svg>
				</a>
				<div class="zxc-time-picker-scroll">
					<div class="zxc-time-picker-option" v-for="i in [showLanguage.amText, showLanguage.pmText]" v-bind:style="{ transform: transformStyle.p }">
						{{ i }}
					</div>
					<div class="zxc-time-picker-selected"></div>
				</div>
				<a href="#" v-bind:class="['zxc-time-picker-nav', { 'zxc-time-picker-disabled': disabledStyle.down.p }]" v-on:mousedown="adjustTime(event, 'p', 'down')">
					<svg viewBox="0 0 24 24">
						<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
					</svg>
				</a>
			</div>
		</div>
		<div class="zxc-time-picker-footer">
			<button class="zxc-time-picker-btn" v-on:click="timepickerCancel()">{{ showLanguage.cancelText }}</button>
			<button class="zxc-time-picker-btn-primary" v-on:click="timepickerSubmit()">{{ showLanguage.okText }}</button>
		</div>
	</div>
</div>
`,
	mounted: function() {
		this.patternId12 = 'zxc_pattern_12_' + performance.now().toString().replace('.', '_');
		this.patternId24 = 'zxc_pattern_24_' + performance.now().toString().replace('.', '_');
		this.patternName = 'zxc_pattern_'    + performance.now().toString().replace('.', '_');
		
		if (!!this.lang) {
			this.showLanguage = this.language[this.lang];
		}
		
		this.renderDefault();
	}
});

// ----- Vue VM

var app = new Vue({
	el: '#app'
});

View Compiled

This Pen is owned by Takane Ichinose on CodePen.

See more by @takaneichinose on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js