code-boxx/0-JS-TIMEPICKER.MD

## 0-JS-TIMEPICKER.MD

      
    Raw
  

              0-JS-TIMEPICKER.MD
            
          
    JAVASCRIPT TIMEPICKER

https://code-boxx.com/simple-time-picker-javascript-css/
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-basic.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Time Picker Demo</title>

    <!-- (A) LOAD CSS & JS -->
    <link href="time-pick.css" rel="stylesheet">
    <script src="time-pick.js"></script>
  </head>
  <body>
    <!-- (B) HTML FIELD -->
    <input type="text" id="demoA">

    <!-- (C) ATTACH -->
    <script>
    tp.attach({
      target: document.getElementById("demoA")
    });
    </script>
  </body>
</html>

## 2-options.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Time Picker Demo</title>

    <!-- (A) LOAD CSS & JS -->
    <link href="time-pick.css" rel="stylesheet">
    <script src="time-pick.js"></script>
  </head>
  <body>
    <!-- (B) HTML FIELD -->
    <input type="text" id="demoB">

    <!-- (C) ATTACH -->
    <script>
    tp.attach({
      target: document.getElementById("demoB"),
      "24": true, // 24 hours
      after : time => alert(time) // run function after select
    });
    </script>
  </body>
</html>

## time-pick.css
/* (A) WRAPPER */
#tp-wrap * {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#tp-wrap *::selection {
  background: transparent;
}
#tp-wrap {
  width: 100vw; height: 100vh;
  position: fixed; top: 0; left: 0; z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s;
}
#tp-wrap.show {
  opacity: 1; visibility: visible;
}

/* (B) BOX */
#tp-box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  display: flex; flex-wrap: wrap;
  border: 1px solid #000;
  background: #2d2d2d;
}

/* (C) HR/MIN/AM/PM */
.tp-cell {
  width: 33.3%; padding: 0 15px;
  text-align: center;
}
.tp-up, .tp-down {
  padding: 10px 0;
  color: #e01717;
  font-size: 32px; font-weight: 700;
  cursor: pointer;
}
.tp-val {
  width: 100%; padding: 10px 0;
  text-align: center; font-size: 22px;
  background: #fff;
}

/* (D) CLOSE & SET BUTTON */
#tp-close, #tp-set {
  width: 50%; padding: 15px 0; border: 0;
  font-size: 18px; font-weight: 700;
  color: #fff; cursor: pointer;
}
#tp-close { background: #951a1a; }
#tp-set { background: #1339a7; }

/* (E) 24-HOUR MODIFY */
#tp-wrap.tp-24 #tp-ap { display: none; }
#tp-wrap.tp-24 #tp-hr, #tp-wrap.tp-24 #tp-min { width: 50%; }

## time-pick.js
var tp = {
  // (A) INIT - GENERATE TIME PICKER HTML
  hwrap : null, // entire html time picker
  hhr : null,   // html hour value
  hmin : null,  // html min value
  hap : null,   // html am/pm value
  init : () => {
    // (A1) ADD TIME PICKER TO BODY
    tp.hwrap = document.createElement("div");
    tp.hwrap.id = "tp-wrap";
    document.body.appendChild(tp.hwrap);

    // (A2) TIME PICKER INNER HTML
    tp.hwrap.innerHTML =
    `<div id="tp-box">
      <div class="tp-cell" id="tp-hr">
        <div class="tp-up">&#65087;</div> <div class="tp-val">0</div> <div class="tp-down">&#65088;</div>
      </div>
      <div class="tp-cell" id="tp-min">
        <div class="tp-up">&#65087;</div> <div class="tp-val">0</div> <div class="tp-down">&#65088;</div>
      </div>
      <div class="tp-cell" id="tp-ap">
        <div class="tp-up">&#65087;</div> <div class="tp-val">AM</div> <div class="tp-down">&#65088;</div>
      </div>
      <button id="tp-close" onclick="tp.hwrap.classList.remove('show')">Close</button>
      <button id="tp-set" onclick="tp.set()">Set</button>
    </div>`;

    // (A3) GET VALUE ELEMENTS + SET CLICK ACTIONS
    for (let segment of ["hr", "min", "ap"]) {
      let up = tp.hwrap.querySelector(`#tp-${segment} .tp-up`),
          down = tp.hwrap.querySelector(`#tp-${segment} .tp-down`);
      tp["h"+segment] = tp.hwrap.querySelector(`#tp-${segment} .tp-val`);

      if (segment=="ap") {
        up.onclick = () => tp.spin(true, segment);
        down.onclick = () => tp.spin(true, segment);
      } else {
        up.onmousedown = () => tp.spin(true, segment);
        down.onmousedown = () => tp.spin(false, segment);
        up.onmouseup = () => tp.spin(null);
        down.onmouseup = () => tp.spin(null);
        up.onmouseleave = () => tp.spin(null);
        down.onmouseleave = () => tp.spin(null);
      }
    }
  },

  // (B) SPIN HOUR/MIN/AM/PM
  //  direction : true (up), false (down), null (stop)
  //  segment : "hr", "min", "ap" (am/pm)
  timer : null, // for "continous" time spin
  minhr : 1,    // min spin limit for hour
  maxhr : 12,   // max spin limit for hour
  minmin : 0,   // min spin limit for minute
  maxmin : 59,  // max spin limit for minute
  spin : (direction, segment) => {
    // (B1) CLEAR TIMER
    if (direction==null) { if (tp.timer!=null) {
      clearTimeout(tp.timer);
      tp.timer = null;
    }}

    // (B2) SPIN FOR AM/PM
    else if (segment=="ap") { tp.hap.innerHTML = tp.hap.innerHTML=="AM" ? "PM" : "AM"; }

    // (B3) SPIN FOR HR/MIN
    else {
      // (B3-1) INCREMENT/DECREMENT
      let next = +tp["h"+segment].innerHTML;
      next = direction ? next+1 : next-1;

      // (B3-2) MIN/MAX
      if (segment=="hr") {
        if (next > tp.maxhr) { next = tp.maxhr; }
        if (next < tp.minhr) { next = tp.minhr; }
      } else {
        if (next > tp.maxmin) { next = tp.maxmin; }
        if (next < tp.minmin) { next = tp.minmin; }
      }

      // (B3-3) SET VALUE
      if (next<10) { next = "0"+next; }
      tp["h"+segment].innerHTML = next;

      // (B3-4) KEEP ROLLING - LOWER TIMEOUT WILL SPIN FASTER
      tp.timer = setTimeout(() => tp.spin(direction, segment), 100);
    }
  },

  // (C) ATTACH TIME PICKER TO HTML FIELD
  //  target : html field to attach to
  //  24 : 24 hours time? default false.
  //  after : optional, function to run after selecting time
  attach : instance => {
    // (C1) READONLY FIELD + NO AUTOCOMPLETE
    // IMPORTANT, PREVENTS ON-SCREEN KEYBOARD
    instance.target.readOnly = true;
    instance.target.setAttribute("autocomplete", "off");

    // (C2) DEFAULT 12 HOURS MODE
    if (instance["24"]==undefined) { instance["24"] = false; }

    // (C3) CLICK TO OPEN TIME PICKER
    instance.target.addEventListener("click", () => tp.show(instance));
  },

  // (D) SHOW TIME PICKER
  setfield : null, // set selected time to this html field
  set24 : false,   // 24 hours mode? default false.
  setafter : null, // run this after selecting time
  show : instance => {
    // (D1) INIT FIELDS TO SET + OPTIONS
    tp.setfield = instance.target;
    tp.setafter = instance.after;
    tp.set24 = instance["24"];
    tp.minhr = tp.set24 ? 0 : 1 ;
    tp.maxhr = tp.set24 ? 23 : 12 ;

    // (D2) READ CURRENT VALUE
    let val = tp.setfield.value;
    if (val=="") {
      tp.hhr.innerHTML = "0"+tp.minhr;
      tp.hmin.innerHTML = "0"+tp.minmin;
      tp.hap.innerHTML = "AM";
    } else {
      tp.hhr.innerHTML = val.substring(0, 2);
      if (tp.set24) {
        tp.hmin.innerHTML = val.substring(2, 4);
      } else {
        tp.hmin.innerHTML = val.substring(3, 5);
        tp.hap.innerHTML = val.substring(6, 8);
      }
    }

    // (D3) SHOW TIME PICKER
    if (tp.set24) { tp.hwrap.classList.add("tp-24"); }
    else { tp.hwrap.classList.remove("tp-24"); }
    tp.hwrap.classList.add("show");
  },

  // (E) SET TIME
  set : () => {
    // (E1) TIME TO FIELD
    if (tp.set24) {
      tp.setfield.value = tp.hhr.innerHTML + tp.hmin.innerHTML;
    } else {
      tp.setfield.value = tp.hhr.innerHTML + ":" + tp.hmin.innerHTML + " " + tp.hap.innerHTML;
    }
    tp.hwrap.classList.remove("show");

    // (E2) RUN AFTER, IF SET
    if (tp.setafter) { tp.setafter(tp.setfield.value); }
  }
};
document.addEventListener("DOMContentLoaded", tp.init);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Javascript Time Picker Demo</title>

	<!-- (A) LOAD CSS & JS -->
	<link href="time-pick.css" rel="stylesheet">
	<script src="time-pick.js"></script>
	</head>
	<body>
	<!-- (B) HTML FIELD -->
	<input type="text" id="demoA">

	<!-- (C) ATTACH -->
	<script>
	tp.attach({
	target: document.getElementById("demoA")
	});
	</script>
	</body>
	</html>
	/* (A) WRAPPER */
	#tp-wrap * {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	#tp-wrap *::selection {
	background: transparent;
	}
	#tp-wrap {
	width: 100vw; height: 100vh;
	position: fixed; top: 0; left: 0; z-index: 999;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s;
	}
	#tp-wrap.show {
	opacity: 1; visibility: visible;
	}

	/* (B) BOX */
	#tp-box {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 320px;
	display: flex; flex-wrap: wrap;
	border: 1px solid #000;
	background: #2d2d2d;
	}

	/* (C) HR/MIN/AM/PM */
	.tp-cell {
	width: 33.3%; padding: 0 15px;
	text-align: center;
	}
	.tp-up, .tp-down {
	padding: 10px 0;
	color: #e01717;
	font-size: 32px; font-weight: 700;
	cursor: pointer;
	}
	.tp-val {
	width: 100%; padding: 10px 0;
	text-align: center; font-size: 22px;
	background: #fff;
	}

	/* (D) CLOSE & SET BUTTON */
	#tp-close, #tp-set {
	width: 50%; padding: 15px 0; border: 0;
	font-size: 18px; font-weight: 700;
	color: #fff; cursor: pointer;
	}
	#tp-close { background: #951a1a; }
	#tp-set { background: #1339a7; }

	/* (E) 24-HOUR MODIFY */
	#tp-wrap.tp-24 #tp-ap { display: none; }
	#tp-wrap.tp-24 #tp-hr, #tp-wrap.tp-24 #tp-min { width: 50%; }
	var tp = {
	// (A) INIT - GENERATE TIME PICKER HTML
	hwrap : null, // entire html time picker
	hhr : null, // html hour value
	hmin : null, // html min value
	hap : null, // html am/pm value
	init : () => {
	// (A1) ADD TIME PICKER TO BODY
	tp.hwrap = document.createElement("div");
	tp.hwrap.id = "tp-wrap";
	document.body.appendChild(tp.hwrap);

	// (A2) TIME PICKER INNER HTML
	tp.hwrap.innerHTML =
	`<div id="tp-box">
	<div class="tp-cell" id="tp-hr">
	<div class="tp-up">︿</div> <div class="tp-val">0</div> <div class="tp-down">﹀</div>
	</div>
	<div class="tp-cell" id="tp-min">
	<div class="tp-up">︿</div> <div class="tp-val">0</div> <div class="tp-down">﹀</div>
	</div>
	<div class="tp-cell" id="tp-ap">
	<div class="tp-up">︿</div> <div class="tp-val">AM</div> <div class="tp-down">﹀</div>
	</div>
	<button id="tp-close" onclick="tp.hwrap.classList.remove('show')">Close</button>
	<button id="tp-set" onclick="tp.set()">Set</button>
	</div>`;

	// (A3) GET VALUE ELEMENTS + SET CLICK ACTIONS
	for (let segment of ["hr", "min", "ap"]) {
	let up = tp.hwrap.querySelector(`#tp-${segment} .tp-up`),
	down = tp.hwrap.querySelector(`#tp-${segment} .tp-down`);
	tp["h"+segment] = tp.hwrap.querySelector(`#tp-${segment} .tp-val`);

	if (segment=="ap") {
	up.onclick = () => tp.spin(true, segment);
	down.onclick = () => tp.spin(true, segment);
	} else {
	up.onmousedown = () => tp.spin(true, segment);
	down.onmousedown = () => tp.spin(false, segment);
	up.onmouseup = () => tp.spin(null);
	down.onmouseup = () => tp.spin(null);
	up.onmouseleave = () => tp.spin(null);
	down.onmouseleave = () => tp.spin(null);
	}
	}
	},

	// (B) SPIN HOUR/MIN/AM/PM
	// direction : true (up), false (down), null (stop)
	// segment : "hr", "min", "ap" (am/pm)
	timer : null, // for "continous" time spin
	minhr : 1, // min spin limit for hour
	maxhr : 12, // max spin limit for hour
	minmin : 0, // min spin limit for minute
	maxmin : 59, // max spin limit for minute
	spin : (direction, segment) => {
	// (B1) CLEAR TIMER
	if (direction==null) { if (tp.timer!=null) {
	clearTimeout(tp.timer);
	tp.timer = null;
	}}

	// (B2) SPIN FOR AM/PM
	else if (segment=="ap") { tp.hap.innerHTML = tp.hap.innerHTML=="AM" ? "PM" : "AM"; }

	// (B3) SPIN FOR HR/MIN
	else {
	// (B3-1) INCREMENT/DECREMENT
	let next = +tp["h"+segment].innerHTML;
	next = direction ? next+1 : next-1;

	// (B3-2) MIN/MAX
	if (segment=="hr") {
	if (next > tp.maxhr) { next = tp.maxhr; }
	if (next < tp.minhr) { next = tp.minhr; }
	} else {
	if (next > tp.maxmin) { next = tp.maxmin; }
	if (next < tp.minmin) { next = tp.minmin; }
	}

	// (B3-3) SET VALUE
	if (next<10) { next = "0"+next; }
	tp["h"+segment].innerHTML = next;

	// (B3-4) KEEP ROLLING - LOWER TIMEOUT WILL SPIN FASTER
	tp.timer = setTimeout(() => tp.spin(direction, segment), 100);
	}
	},

	// (C) ATTACH TIME PICKER TO HTML FIELD
	// target : html field to attach to
	// 24 : 24 hours time? default false.
	// after : optional, function to run after selecting time
	attach : instance => {
	// (C1) READONLY FIELD + NO AUTOCOMPLETE
	// IMPORTANT, PREVENTS ON-SCREEN KEYBOARD
	instance.target.readOnly = true;
	instance.target.setAttribute("autocomplete", "off");

	// (C2) DEFAULT 12 HOURS MODE
	if (instance["24"]==undefined) { instance["24"] = false; }

	// (C3) CLICK TO OPEN TIME PICKER
	instance.target.addEventListener("click", () => tp.show(instance));
	},

	// (D) SHOW TIME PICKER
	setfield : null, // set selected time to this html field
	set24 : false, // 24 hours mode? default false.
	setafter : null, // run this after selecting time
	show : instance => {
	// (D1) INIT FIELDS TO SET + OPTIONS
	tp.setfield = instance.target;
	tp.setafter = instance.after;
	tp.set24 = instance["24"];
	tp.minhr = tp.set24 ? 0 : 1 ;
	tp.maxhr = tp.set24 ? 23 : 12 ;

	// (D2) READ CURRENT VALUE
	let val = tp.setfield.value;
	if (val=="") {
	tp.hhr.innerHTML = "0"+tp.minhr;
	tp.hmin.innerHTML = "0"+tp.minmin;
	tp.hap.innerHTML = "AM";
	} else {
	tp.hhr.innerHTML = val.substring(0, 2);
	if (tp.set24) {
	tp.hmin.innerHTML = val.substring(2, 4);
	} else {
	tp.hmin.innerHTML = val.substring(3, 5);
	tp.hap.innerHTML = val.substring(6, 8);
	}
	}

	// (D3) SHOW TIME PICKER
	if (tp.set24) { tp.hwrap.classList.add("tp-24"); }
	else { tp.hwrap.classList.remove("tp-24"); }
	tp.hwrap.classList.add("show");
	},

	// (E) SET TIME
	set : () => {
	// (E1) TIME TO FIELD
	if (tp.set24) {
	tp.setfield.value = tp.hhr.innerHTML + tp.hmin.innerHTML;
	} else {
	tp.setfield.value = tp.hhr.innerHTML + ":" + tp.hmin.innerHTML + " " + tp.hap.innerHTML;
	}
	tp.hwrap.classList.remove("show");

	// (E2) RUN AFTER, IF SET
	if (tp.setafter) { tp.setafter(tp.setfield.value); }
	}
	};
	document.addEventListener("DOMContentLoaded", tp.init);