Timepicker.js

Timepicker.js demo.

by Jonatas Walker

HTML

<script src="https://cdn.jsdelivr.net/npm/timepicker.js/dist/timepicker.iife.min.js"></script>
    <h1>
        <a href="https://github.com/jonataswalker/timepicker.js" class="link">Timepicker.js</a>
        &mdash; Example
    </h1>

    <div class="main-container">
        <div class="left-container">
            <h3>Focusing:</h3>
            <div>
                <input type="text" id="focus-trigger" class="icon" placeholder="Time" />
            </div>
        </div>
        <div class="right-container">
            <h3 style="margin-top: 10px;">Triggering:</h3>
            <div class="flex">
                <input type="text" id="click-trigger-input" class="center" placeholder="Time" />
                <button id="click-trigger"><i class="icon"></i></button>
            </div>
        </div>
    </div>

CSS

html,
body {
  margin: 0;
  height: 100%;
  font: 1em/1.5 BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  color: #222;
  font-weight: 400;
  padding: 20px 40px;
  background: linear-gradient(#efefef, #999) fixed;
}

.main-container {
  height: 100%;
  display: flex;
}

.left-container {
  flex: 1 1 0;
  padding: 5px;
}

.right-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}

h1 {
  font-size: 250%;
  text-align: center;
  margin: 10px 0;
  font-weight: 700;
}

h3 {
  margin: 5px 0;
  font-weight: 700;
}

input {
  padding: 5px;
  font-size: 1.5em;
  font-family: inherit;
  border: solid 1px #444;
  border-radius: 3px;
  width: 100px;
}

.icon {
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: right center;
  background-image:...

JavaScript

const focusPicker = new TimePicker('#focus-trigger');
const triggerPicker = new TimePicker('#click-trigger');
const triggerInput = document.getElementById('click-trigger-input');

triggerPicker.on('open', function(evt) {
  console.log('triggerPicker open', { evt });
});
triggerPicker.on('close', function(evt) {
  console.log('triggerPicker close', { evt });
});

triggerPicker.on('change', function(evt) {
  console.log('triggerPicker change', { evt });
  triggerInput.value = `${evt.hour || '00'}:${evt.minute || '00'}`;
});

focusPicker.on('change', function(evt) {
  console.log('focusPicker change', { evt });
  evt.element.value = `${evt.hour || '00'}:${evt.minute || '00'}`;
});