HexaFlip: Time Picker – CSS and JQuery

HTML

<div class="container">
    <!-- Codrops top bar -->
   

    <div class="main">
        <div id="hexaflip-demo3" class="demo"></div>
        <div id="choose-time">
            <select id="hour-select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
            <select id="minute-select">
                <option>00</option>
                <option>10</option>
                <option>20</option>
                <option>30</option>
                <option>40</option>
                <option>50</option>
            </select>
            <select id="meridian-select">
                <option>am</option>
                <option>pm</option>
            </select>
            <span id="set-button">set time</span>
        </div>
    </div>
</div>

CSS

<style>
.hexaflip-cube {
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
display: inline-block;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: transform 0.4s;
}
.hexaflip-cube.no-tween {
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-o-transition-duration: 0;
-ms-transition-duration: 0;
transition-duration: 0;
}
.hexaflip-cube > div {
width: 100%;
overflow: hidden;
height: 100.5%;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
background-color: #2BAACC;
color: #fff;
font-weight: 100;
text-shadow: 0 -2px 0 rgba(0,0,0,0.2);
line-height: 1.5;
}
.hexaflip-left,
.hexaflip-right {
background-color: #252525 !important;
}
.hexaflip-timepicker .hexaflip-cube:last-child > div:nth-child(odd) {
background-color: #F7BF2E;
}

#choose-time {
margin: 80px auto;
width: 300px;
text-align: center;
}
#set-button {
background-color: #2BAACC;
color: #fff;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 2px 6px;
padding-bottom: 4px;
cursor: pointer;
margin-left: 5px;
opacity: 0.95;
filter: alpha(opacity=95);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
font-size: 20px;
font-family: cursive;
}
select {
border: 1px solid #2BAACC;
color: #2BAACC;
font-size: 21px;
/* width: 72px; */
}
#set-button:hover {
opacity: 1;
-ms-filter: none;
filter: none;
}
.demo {
margin: 0 auto;
-webkit-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
-moz-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
}

</style>

JQuery

<script src="http://dice-academy.com/wp-content/uploads/2017/07/hexaflip.js"></script>
<script>
    var hexaDemo3;
    document.addEventListener('DOMContentLoaded', function(){
        hexaDemo3 = new HexaFlip(document.getElementById('hexaflip-demo3'));

        setTimeout(function(){
            var now = new Date,
                hour = now.getHours(),
                minute = now.getMinutes().toString(),
                meridian;

            if(hour > 12){
                hour = (hour - 12).toString();
                meridian = 'pm';
            }else{
                meridian = 'am';
                (hour === 0) && (hour = 12);
                hour = hour.toString();
            }

            if(minute.length > 1){
                minute = minute.substr(0, 1) + '0';
            }else{
                minute = '00';
            }

            hexaDemo3.setValue({ hour: hour, minute: minute, meridian: meridian });

        }, 1);

        var hourSelect = document.getElementById('hour-select'),
            minuteSelect = document.getElementById('minute-select'),
            meridianSelect = document.getElementById('meridian-select');

        document.getElementById('set-button').addEventListener('click', function(){
            var time = {
                hour: hourSelect.value,
                minute: minuteSelect.value,
                meridian: meridianSelect.value
            }
            hexaDemo3.setValue(time);
        });
    }, false);

</script>