Android 4.4 kitkat time picker

Developer
KyleDavidE
Size
6,524 Kb
Views
34,408
  1. Android 4.4 kitkat time picker Previews
  2. Android 4.4 kitkat time picker HTML Codes
  3. Android 4.4 kitkat time picker CSS Codes
  4. Android 4.4 kitkat time picker JS Codes

How do I make an android 4.4 kitkat time picker?

Dbl-click to change to dark. Made by kyledavide. What is a android 4.4 kitkat time picker? How do you make a android 4.4 kitkat time picker? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.

Android 4.4 kitkat time picker Previews
IQ Test

Android 4.4 kitkat time picker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>android 4.4 kitkat time picker</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="picker"> <div class="time-wrap"> <div class="time"> <span class="part hour active">4</span>:<span class="part min">41</span><span class="part am-pm">PM</span> </div> </div> <div class="face-wrap"> <div class="face"> <span class="face-set hour"> <div class="handle-bar"></div> <div class="face-number" data-css-time="1"> 1 </div> <div class="face-number" data-css-time="2"> 2 </div> <div class="face-number" data-css-time="3"> 3 </div> <div class="face-number" data-css-time="4"> 4 </div> <div class="face-number" data-css-time="5"> 5 </div> <div class="face-number" data-css-time="6"> 6 </div> <div class="face-number" data-css-time="7"> 7 </div> <div class="face-number" data-css-time="8"> 8 </div> <div class="face-number" data-css-time="9"> 9 </div> <div class="face-number" data-css-time="10"> 10 </div> <div class="face-number" data-css-time="11"> 11 </div> <div class="face-number" data-css-time="0"> 12 </div> <div class="handle"> <div class="handle-spot"></div> </div> </span><span class="face-set min"> <div class="handle-bar"></div> <div class="face-number" data-css-time="0"> 00 </div> <div class="face-number" data-css-time="1"> 05 </div> <div class="face-number" data-css-time="2"> 10 </div> <div class="face-number" data-css-time="3"> 15 </div> <div class="face-number" data-css-time="4"> 20 </div> <div class="face-number" data-css-time="5"> 25 </div> <div class="face-number" data-css-time="6"> 30 </div> <div class="face-number" data-css-time="7"> 35 </div> <div class="face-number" data-css-time="8"> 40 </div> <div class="face-number" data-css-time="9"> 45 </div> <div class="face-number" data-css-time="10"> 50 </div> <div class="face-number" data-css-time="11"> 55 </div> <div class="handle"> <div class="handle-spot"></div> </div> </span> </div> </div> <div class="am-pm-btns"> <div class="am-pm-btn am"> AM </div> <div class="am-pm-btn pm active"> PM </div> </div>
</div>
<center></center>
<h1 class="info"> android 4.4 kitkat like time picker by<a href="http://kyledavid.com/"> KyleDavid(E)</a> dbl-click to switch to dark mode.
</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sugar/1.4.1/sugar.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Android 4.4 kitkat time picker - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto);
.picker { margin: auto; margin-top: 5em; box-shadow: black 0 0 0.2em;
}
body:not(.dark) { background: #666666;
}
body:not(.dark) .info { color: #909090;
}
body:not(.dark) .picker { font-size: 0.8em; background: #f2f2f2; width: 15em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #909090; font-family: 'Roboto', sans-serif;
}
body:not(.dark) .picker .time-wrap { background: #fff; padding: 1em; height: 3em; text-align: right;
}
body:not(.dark) .picker .time-wrap .active { color: #33b5e5;
}
body:not(.dark) .picker .time-wrap .time { font-size: 3em; line-height: 1em;
}
body:not(.dark) .picker .time-wrap .time .part { cursor: pointer;
}
body:not(.dark) .picker .time-wrap .time .am-pm { font-size: 0.33333em;
}
body:not(.dark) .picker .face-wrap { padding: 1em;
}
body:not(.dark) .picker .face-wrap .face { position: relative; background: #fff; height: 13em; border-radius: 50%; cursor: move;
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number { position: absolute; -webkit-transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s; transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); text-align: center; pointer-events: none; width: 100%; top: 6em; line-height: 1em; height: 1em;
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="0"] { -webkit-transform: rotate(0deg) translateY(-5.5em) rotate(0deg); transform: rotate(0deg) translateY(-5.5em) rotate(0deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="1"] { -webkit-transform: rotate(30deg) translateY(-5.5em) rotate(-30deg); transform: rotate(30deg) translateY(-5.5em) rotate(-30deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="2"] { -webkit-transform: rotate(60deg) translateY(-5.5em) rotate(-60deg); transform: rotate(60deg) translateY(-5.5em) rotate(-60deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="3"] { -webkit-transform: rotate(90deg) translateY(-5.5em) rotate(-90deg); transform: rotate(90deg) translateY(-5.5em) rotate(-90deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="4"] { -webkit-transform: rotate(120deg) translateY(-5.5em) rotate(-120deg); transform: rotate(120deg) translateY(-5.5em) rotate(-120deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="5"] { -webkit-transform: rotate(150deg) translateY(-5.5em) rotate(-150deg); transform: rotate(150deg) translateY(-5.5em) rotate(-150deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="6"] { -webkit-transform: rotate(180deg) translateY(-5.5em) rotate(-180deg); transform: rotate(180deg) translateY(-5.5em) rotate(-180deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="7"] { -webkit-transform: rotate(210deg) translateY(-5.5em) rotate(-210deg); transform: rotate(210deg) translateY(-5.5em) rotate(-210deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="8"] { -webkit-transform: rotate(240deg) translateY(-5.5em) rotate(-240deg); transform: rotate(240deg) translateY(-5.5em) rotate(-240deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="9"] { -webkit-transform: rotate(270deg) translateY(-5.5em) rotate(-270deg); transform: rotate(270deg) translateY(-5.5em) rotate(-270deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="10"] { -webkit-transform: rotate(300deg) translateY(-5.5em) rotate(-300deg); transform: rotate(300deg) translateY(-5.5em) rotate(-300deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .face-number[data-css-time="11"] { -webkit-transform: rotate(330deg) translateY(-5.5em) rotate(-330deg); transform: rotate(330deg) translateY(-5.5em) rotate(-330deg);
}
body:not(.dark) .picker .face-wrap .face .face-set .handle { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; height: 1.65em; width: 1.65em; top: 5.675em; left: 5.675em; position: absolute; background: rgba(0, 153, 204, 0.5); border-radius: 50%; -webkit-transform: rotate(300deg) translateY(-5.5em); transform: rotate(300deg) translateY(-5.5em);
}
body:not(.dark) .picker .face-wrap .face .face-set .handle.anim { -webkit-transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s; transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81);
}
body:not(.dark) .picker .face-wrap .face .face-set .handle-spot { height: 0.5em; width: 0.5em; top: 0.575em; left: 0.575em; position: absolute; background: #33b5e5; border-radius: 50%;
}
body:not(.dark) .picker .face-wrap .face .face-set .handle-bar { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; -webkit-transform-origin: bottom; transform-origin: bottom; position: absolute; bottom: 6.5em; background: #33b5e5; width: 1px; height: 1em; left: 6.5em;
}
body:not(.dark) .picker .face-wrap .face .face-set .handle-bar.anim { -webkit-transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s; transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off .face-number { opacity: 0;
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off .handle, body:not(.dark) .picker .face-wrap .face .face-set.face-off .handle-bar { opacity: 0;
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="0"] { -webkit-transform: rotate(0deg) translateY(-7em) rotate(0deg); transform: rotate(0deg) translateY(-7em) rotate(0deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="1"] { -webkit-transform: rotate(30deg) translateY(-7em) rotate(-30deg); transform: rotate(30deg) translateY(-7em) rotate(-30deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="2"] { -webkit-transform: rotate(60deg) translateY(-7em) rotate(-60deg); transform: rotate(60deg) translateY(-7em) rotate(-60deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="3"] { -webkit-transform: rotate(90deg) translateY(-7em) rotate(-90deg); transform: rotate(90deg) translateY(-7em) rotate(-90deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="4"] { -webkit-transform: rotate(120deg) translateY(-7em) rotate(-120deg); transform: rotate(120deg) translateY(-7em) rotate(-120deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="5"] { -webkit-transform: rotate(150deg) translateY(-7em) rotate(-150deg); transform: rotate(150deg) translateY(-7em) rotate(-150deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="6"] { -webkit-transform: rotate(180deg) translateY(-7em) rotate(-180deg); transform: rotate(180deg) translateY(-7em) rotate(-180deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="7"] { -webkit-transform: rotate(210deg) translateY(-7em) rotate(-210deg); transform: rotate(210deg) translateY(-7em) rotate(-210deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="8"] { -webkit-transform: rotate(240deg) translateY(-7em) rotate(-240deg); transform: rotate(240deg) translateY(-7em) rotate(-240deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="9"] { -webkit-transform: rotate(270deg) translateY(-7em) rotate(-270deg); transform: rotate(270deg) translateY(-7em) rotate(-270deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="10"] { -webkit-transform: rotate(300deg) translateY(-7em) rotate(-300deg); transform: rotate(300deg) translateY(-7em) rotate(-300deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="11"] { -webkit-transform: rotate(330deg) translateY(-7em) rotate(-330deg); transform: rotate(330deg) translateY(-7em) rotate(-330deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="0"] { -webkit-transform: rotate(0deg) translateY(-4em) rotate(0deg); transform: rotate(0deg) translateY(-4em) rotate(0deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="1"] { -webkit-transform: rotate(30deg) translateY(-4em) rotate(-30deg); transform: rotate(30deg) translateY(-4em) rotate(-30deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="2"] { -webkit-transform: rotate(60deg) translateY(-4em) rotate(-60deg); transform: rotate(60deg) translateY(-4em) rotate(-60deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="3"] { -webkit-transform: rotate(90deg) translateY(-4em) rotate(-90deg); transform: rotate(90deg) translateY(-4em) rotate(-90deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="4"] { -webkit-transform: rotate(120deg) translateY(-4em) rotate(-120deg); transform: rotate(120deg) translateY(-4em) rotate(-120deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="5"] { -webkit-transform: rotate(150deg) translateY(-4em) rotate(-150deg); transform: rotate(150deg) translateY(-4em) rotate(-150deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="6"] { -webkit-transform: rotate(180deg) translateY(-4em) rotate(-180deg); transform: rotate(180deg) translateY(-4em) rotate(-180deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="7"] { -webkit-transform: rotate(210deg) translateY(-4em) rotate(-210deg); transform: rotate(210deg) translateY(-4em) rotate(-210deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="8"] { -webkit-transform: rotate(240deg) translateY(-4em) rotate(-240deg); transform: rotate(240deg) translateY(-4em) rotate(-240deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="9"] { -webkit-transform: rotate(270deg) translateY(-4em) rotate(-270deg); transform: rotate(270deg) translateY(-4em) rotate(-270deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="10"] { -webkit-transform: rotate(300deg) translateY(-4em) rotate(-300deg); transform: rotate(300deg) translateY(-4em) rotate(-300deg);
}
body:not(.dark) .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="11"] { -webkit-transform: rotate(330deg) translateY(-4em) rotate(-330deg); transform: rotate(330deg) translateY(-4em) rotate(-330deg);
}
body:not(.dark) .picker .am-pm-btns { margin-top: -1.825em; padding: 1em; padding-top: 0; height: 1.65em; text-align: center;
}
body:not(.dark) .picker .am-pm-btns .am-pm-btn { display: inline-block; height: 1.65em; width: 1.65em; background: #fff; border-radius: 50%; cursor: pointer;
}
body:not(.dark) .picker .am-pm-btns .am-pm-btn.am { float: left;
}
body:not(.dark) .picker .am-pm-btns .am-pm-btn.pm { float: right;
}
body:not(.dark) .picker .am-pm-btns .am-pm-btn.active { background: #80cce6;
}
body.dark { background: #0b0c0e;
}
body.dark .info { color: #fff;
}
body.dark .picker { font-size: 0.8em; background: #404040; width: 15em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #fff; font-family: 'Roboto', sans-serif;
}
body.dark .picker .time-wrap { background: #363636; padding: 1em; height: 3em; text-align: right;
}
body.dark .picker .time-wrap .active { color: #ff4444;
}
body.dark .picker .time-wrap .time { font-size: 3em; line-height: 1em;
}
body.dark .picker .time-wrap .time .part { cursor: pointer;
}
body.dark .picker .time-wrap .time .am-pm { font-size: 0.33333em;
}
body.dark .picker .face-wrap { padding: 1em;
}
body.dark .picker .face-wrap .face { position: relative; background: #363636; height: 13em; border-radius: 50%; cursor: move;
}
body.dark .picker .face-wrap .face .face-set .face-number { position: absolute; -webkit-transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s; transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); text-align: center; pointer-events: none; width: 100%; top: 6em; line-height: 1em; height: 1em;
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="0"] { -webkit-transform: rotate(0deg) translateY(-5.5em) rotate(0deg); transform: rotate(0deg) translateY(-5.5em) rotate(0deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="1"] { -webkit-transform: rotate(30deg) translateY(-5.5em) rotate(-30deg); transform: rotate(30deg) translateY(-5.5em) rotate(-30deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="2"] { -webkit-transform: rotate(60deg) translateY(-5.5em) rotate(-60deg); transform: rotate(60deg) translateY(-5.5em) rotate(-60deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="3"] { -webkit-transform: rotate(90deg) translateY(-5.5em) rotate(-90deg); transform: rotate(90deg) translateY(-5.5em) rotate(-90deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="4"] { -webkit-transform: rotate(120deg) translateY(-5.5em) rotate(-120deg); transform: rotate(120deg) translateY(-5.5em) rotate(-120deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="5"] { -webkit-transform: rotate(150deg) translateY(-5.5em) rotate(-150deg); transform: rotate(150deg) translateY(-5.5em) rotate(-150deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="6"] { -webkit-transform: rotate(180deg) translateY(-5.5em) rotate(-180deg); transform: rotate(180deg) translateY(-5.5em) rotate(-180deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="7"] { -webkit-transform: rotate(210deg) translateY(-5.5em) rotate(-210deg); transform: rotate(210deg) translateY(-5.5em) rotate(-210deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="8"] { -webkit-transform: rotate(240deg) translateY(-5.5em) rotate(-240deg); transform: rotate(240deg) translateY(-5.5em) rotate(-240deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="9"] { -webkit-transform: rotate(270deg) translateY(-5.5em) rotate(-270deg); transform: rotate(270deg) translateY(-5.5em) rotate(-270deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="10"] { -webkit-transform: rotate(300deg) translateY(-5.5em) rotate(-300deg); transform: rotate(300deg) translateY(-5.5em) rotate(-300deg);
}
body.dark .picker .face-wrap .face .face-set .face-number[data-css-time="11"] { -webkit-transform: rotate(330deg) translateY(-5.5em) rotate(-330deg); transform: rotate(330deg) translateY(-5.5em) rotate(-330deg);
}
body.dark .picker .face-wrap .face .face-set .handle { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; height: 1.65em; width: 1.65em; top: 5.675em; left: 5.675em; position: absolute; background: rgba(104, 0, 0, 0.5); border-radius: 50%; -webkit-transform: rotate(300deg) translateY(-5.5em); transform: rotate(300deg) translateY(-5.5em);
}
body.dark .picker .face-wrap .face .face-set .handle.anim { -webkit-transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s; transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81);
}
body.dark .picker .face-wrap .face .face-set .handle-spot { height: 0.5em; width: 0.5em; top: 0.575em; left: 0.575em; position: absolute; background: #ff4444; border-radius: 50%;
}
body.dark .picker .face-wrap .face .face-set .handle-bar { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; -webkit-transform-origin: bottom; transform-origin: bottom; position: absolute; bottom: 6.5em; background: #ff4444; width: 1px; height: 1em; left: 6.5em;
}
body.dark .picker .face-wrap .face .face-set .handle-bar.anim { -webkit-transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81); transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s; transition: transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81), opacity 0.4s, -webkit-transform 0.5s cubic-bezier(0.47, 0.02, 0.74, 1.81);
}
body.dark .picker .face-wrap .face .face-set.face-off .face-number { opacity: 0;
}
body.dark .picker .face-wrap .face .face-set.face-off .handle, body.dark .picker .face-wrap .face .face-set.face-off .handle-bar { opacity: 0;
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="0"] { -webkit-transform: rotate(0deg) translateY(-7em) rotate(0deg); transform: rotate(0deg) translateY(-7em) rotate(0deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="1"] { -webkit-transform: rotate(30deg) translateY(-7em) rotate(-30deg); transform: rotate(30deg) translateY(-7em) rotate(-30deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="2"] { -webkit-transform: rotate(60deg) translateY(-7em) rotate(-60deg); transform: rotate(60deg) translateY(-7em) rotate(-60deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="3"] { -webkit-transform: rotate(90deg) translateY(-7em) rotate(-90deg); transform: rotate(90deg) translateY(-7em) rotate(-90deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="4"] { -webkit-transform: rotate(120deg) translateY(-7em) rotate(-120deg); transform: rotate(120deg) translateY(-7em) rotate(-120deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="5"] { -webkit-transform: rotate(150deg) translateY(-7em) rotate(-150deg); transform: rotate(150deg) translateY(-7em) rotate(-150deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="6"] { -webkit-transform: rotate(180deg) translateY(-7em) rotate(-180deg); transform: rotate(180deg) translateY(-7em) rotate(-180deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="7"] { -webkit-transform: rotate(210deg) translateY(-7em) rotate(-210deg); transform: rotate(210deg) translateY(-7em) rotate(-210deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="8"] { -webkit-transform: rotate(240deg) translateY(-7em) rotate(-240deg); transform: rotate(240deg) translateY(-7em) rotate(-240deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="9"] { -webkit-transform: rotate(270deg) translateY(-7em) rotate(-270deg); transform: rotate(270deg) translateY(-7em) rotate(-270deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="10"] { -webkit-transform: rotate(300deg) translateY(-7em) rotate(-300deg); transform: rotate(300deg) translateY(-7em) rotate(-300deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.min .face-number[data-css-time="11"] { -webkit-transform: rotate(330deg) translateY(-7em) rotate(-330deg); transform: rotate(330deg) translateY(-7em) rotate(-330deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="0"] { -webkit-transform: rotate(0deg) translateY(-4em) rotate(0deg); transform: rotate(0deg) translateY(-4em) rotate(0deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="1"] { -webkit-transform: rotate(30deg) translateY(-4em) rotate(-30deg); transform: rotate(30deg) translateY(-4em) rotate(-30deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="2"] { -webkit-transform: rotate(60deg) translateY(-4em) rotate(-60deg); transform: rotate(60deg) translateY(-4em) rotate(-60deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="3"] { -webkit-transform: rotate(90deg) translateY(-4em) rotate(-90deg); transform: rotate(90deg) translateY(-4em) rotate(-90deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="4"] { -webkit-transform: rotate(120deg) translateY(-4em) rotate(-120deg); transform: rotate(120deg) translateY(-4em) rotate(-120deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="5"] { -webkit-transform: rotate(150deg) translateY(-4em) rotate(-150deg); transform: rotate(150deg) translateY(-4em) rotate(-150deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="6"] { -webkit-transform: rotate(180deg) translateY(-4em) rotate(-180deg); transform: rotate(180deg) translateY(-4em) rotate(-180deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="7"] { -webkit-transform: rotate(210deg) translateY(-4em) rotate(-210deg); transform: rotate(210deg) translateY(-4em) rotate(-210deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="8"] { -webkit-transform: rotate(240deg) translateY(-4em) rotate(-240deg); transform: rotate(240deg) translateY(-4em) rotate(-240deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="9"] { -webkit-transform: rotate(270deg) translateY(-4em) rotate(-270deg); transform: rotate(270deg) translateY(-4em) rotate(-270deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="10"] { -webkit-transform: rotate(300deg) translateY(-4em) rotate(-300deg); transform: rotate(300deg) translateY(-4em) rotate(-300deg);
}
body.dark .picker .face-wrap .face .face-set.face-off.hour .face-number[data-css-time="11"] { -webkit-transform: rotate(330deg) translateY(-4em) rotate(-330deg); transform: rotate(330deg) translateY(-4em) rotate(-330deg);
}
body.dark .picker .am-pm-btns { margin-top: -1.825em; padding: 1em; padding-top: 0; height: 1.65em; text-align: center;
}
body.dark .picker .am-pm-btns .am-pm-btn { display: inline-block; height: 1.65em; width: 1.65em; background: #363636; border-radius: 50%; cursor: pointer;
}
body.dark .picker .am-pm-btns .am-pm-btn.am { float: left;
}
body.dark .picker .am-pm-btns .am-pm-btn.pm { float: right;
}
body.dark .picker .am-pm-btns .am-pm-btn.active { background: #4f1b1b;
}

Android 4.4 kitkat time picker - Script Codes JS Codes

$('.picker').each(function(e){ var self = $(this); var activeFace = $$('.face-set.hour'), min = false, am = false, mouse=false; function $$(q){ return self.find(q); } $$('.face-set').data('hand-ang',0); $$('.face-set.min').data('hand-ang',1); function setHandle(face,a,l,anim){ if(a == null) a = face.data('hand-ang'); if(l == 'hidden') l = face.hasClass('min') ? 7 : 4; if(l == null) l = 5.5; var bl = a % 1 == 0 ? l - 0.25 : l; var deg = a * 30; face.data('hand-ang',a) face.find('.handle').css({ transform:'rotate(' + (deg).toFixed(20) +'deg) translateY(' + -l +'em)' }).toggleClass('anim',anim); face.find('.handle-bar').css({ transform:'rotate(' + (deg).toFixed(20) +'deg) scaleY(' + bl +')' }).toggleClass('anim',!!anim); } function minMode(yes){ var cl = yes ? 'min' : 'hour'; min = yes; activeFace.addClass('face-off'); setHandle(activeFace,null,'hidden',true); activeFace = $$('.face-set.'+cl).removeClass('face-off'); setHandle(activeFace,null,null,true); $$('.time .active').removeClass('active'); $$('.time .part.'+cl).addClass('active'); } minMode(true); minMode(false); $('body').mouseup(function(){ if(mouse && !min) minMode(true); mouse=false; }); function setHour(hour){ if(hour == 0) hour = 12; $$('.time .hour').text(hour); setHandle($$('.face-set.hour'),hour,null,false); } function ang(x,y){ return Math.acos( x / Math.sqrt(x*x + y*y) ); } function setMin(min){ if(min == 60) min = 0 $$('.time .min').text(min.pad(2)); setHandle($$('.face-set.min'),min/5,null,false); } function setAmPm(to_am){ am = to_am; $('.am-pm-btn.am').toggleClass('active',am); $('.am-pm-btn.pm').toggleClass('active',!am); $('.time .am-pm').text(am?'AM':'PM'); } function handleMove(e){ if(!mouse) return; e.preventDefault(); var $this = $$('.face-wrap'); var pos = $this.offset(); var cent = {left:$this.outerWidth() / 2 + pos.left, top:$this.outerHeight() / 2 + pos.top}; console.log(cent); var hrs = Math.atan2(e.pageY - cent.top, e.pageX - cent.left ) / Math.PI * 6 + 3; console.log(hrs); hrs += 12 hrs %= 12 if(min){ setMin((hrs * 5 ).round()); }else{ setHour((hrs).round()); } } $$('.face-wrap').mousedown(function(){ mouse=true; }).mousedown(handleMove) $('body').on('mousemove',handleMove); $$('.face-set.min').addClass('face-off'); $$('.time .part.min').click(minMode.bind(this,true)); $$('.time .part.hour').click(minMode.bind(this,false)); $$('.am-pm-btn.am').click(setAmPm.bind(this,true)); $$('.am-pm-btn.pm').click(setAmPm.bind(this,false)); $$('.time .am-pm').click(function(){ setAmPm(!am); }); $$('*').css('transition','none'); setTimeout(function(){ $$('*').css('transition',false); })
});
$('body').dblclick(function(){ $('body').toggleClass('dark');
});
if(!location.href.match(/cpgrid/)){ $('body').prepend($('.info'));
}
Android 4.4 kitkat time picker - Script Codes
Android 4.4 kitkat time picker - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded August 11, 2022
Rating 4.5
Size 6,524 Kb
Views 34,408
Do you need developer help for Android 4.4 kitkat time picker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KyleDavidE (KyleDavidE) Script Codes
Name
Stars
A Pen by KyleDavidE
Abstract shape 3d
A Pen by Kyle Ehrlich
BLOCK CLOCK
XKCD 1608 Hoverboard zoomable
A lonely pixel rag
A Pen by KyleDavidE
A lonely rectangle
Flexbox Dna Helix by Joe Ski
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!