timepicker-ui

timepicker-ui is an easy library with timepicker. Fully wrote with TypeScript. This library is based on Material Design from Google.

• Free
• Easy to use
• Easy to customize

Click here to see a demo and examples

Desktop version

24h version

Landspace version

Mobile version

Themes

There is 3 available version of theme: crane-straight, crane-radius and m3.

Theme m3 based on the new Material Design v3. Material Design 3 is still not release in offical version for WEB but you can use it if you want. There is new version of Material Design 3. If new version M3 will be released this design will get improve.

Desktop

Landspace

Mobile

Theme m3

Theme m3-mobile

Installation

Install timepicker-ui in your project.

Yarn

$ yarn add timepicker-ui

NPM

$ npm install timepicker-ui

This library is using font Roboto and material-design icons. Basic options for all icons have been taken from material-icons. If you want to use material-icons you have to add dependencies to your project.

You can alawys change icons to another package if you change options iconTemplate and iconTemplateMobile which contains templates for icons. iconTemplate and iconTemplateMobile requiare default class timepicker-ui-keyboard-icon.

Usage

Styles

We provide CSS styles built-in but sometimes if you don't use some normalize/reset CSS styles you have to add box-sizing: border-box to your app to display the correct layout.

*,
::after,
::before {
    box-sizing: border-box;
}

ES Modules

In your project you have to import timepicker from package to your JavaScript file.

import { TimepickerUI } from "timepicker-ui";

UMD

In your html file you have put script tag with path to timepicker-ui.umd.js file. After installing by npm/yarn you can copy the file from node_modules or add a path to this file.

<script src="timepicker-ui.umd.js"></script>
<script src="node_modules/path/timepicker-ui.umd.js"></script>
<script src="/path/timepicker-ui.umd.js"></script>

Information

timepicker-ui has to have a wrapper that has an input inside this wrapper. If you will not add class timepicker-ui to your wrapper, it will be automatically added during initialization.

HTML

<div class="timepicker-ui">
  <input type="text" class="timepicker-ui-input" value="12:00 AM" />
</div>

timepicker-ui has to be created with a new instance with key new. This instance accepts two parameters which first is the wrapper element for timepicker and the second is options that allow customization.

JavaScript

const DOMElement = document.querySelector(".timepicker-ui");
const options = {};
const newTimepicker = new TimepickerUI(DOMElement, options);

By default initialization of timepicker is started when you click on input. If you want to change it you have to add data-open attribute with selector inside and this element has to be inside wrapper.

To initalize a timepicker with UMD version you have to init a window object with tui.

const DOMElement = document.querySelector(".timepicker-ui");
const options = {};
const newTimepicker = new window.tui.TimepickerUI(DOMElement, options);

newTimepicker.create();

HTML

<div class="default-class">
  <input type="text" class="timepicker-ui-input" value="12:00 AM" />
  <button class="timepicker-ui-button" data-open="default-class">Open</button>
</div>

JavaScript

const timepicker = document.querySelector(".default-class");
const initTimepicker = new TimepickerUI(timepicker);

timepicker.create();

Options

You can set options by JavaScript or by data-attribute which attribute is a key option. Data-attributes will be overridden by JavaScript options.

HTML

<div
  class="default-class"
  data-am-label="test"
  data-backdrop="false"
  data-ok-label="fine"
>
  <input type="text" class="timepicker-ui-input" value="12:00 AM" />
  <button class="timepicker-ui-button" data-open="default-class">Open</button>
</div>

JavaScript

const timepicker = document.querySelector(".default-class");
const options = { okLabel: "test", amLabel: "test1", backdrop: false };
const initTimepicker = new TimepickerUI(timepicker, options);

timepicker.create();

CDNJS

This library is aviable in cdnjs packages. Here is a link to the full description https://cdnjs.com/libraries/timepicker-ui.

You can put script tags in your HTML file and use UMD version, without installation.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/timepicker-ui/2.3.0/timepicker-ui.umd.js"
  integrity="sha512-a3QUlKZYbhDBhA0b++tX+QjrbEwk1DNTyCR7rzwM34AUx16sNOLDzh4JQhqV5xYLs010+xsnFjrDjz2jx2+qLw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

React integration

It is possible to use this library on the React application. It's necessary to use the useRef hook to attach a dom element and add a custom event handler to this ref.

Link to an example with React Hooks. Link to an example with React Class Component.

import React, { useRef, useEffect, useState, useCallback } from 'react';
import { TimepickerUI } from 'timepicker-ui';

function App(): JSX.Element {
  const tmRef = useRef(null);
  const [inputValue, setInputValue] = useState('12:00 PM');

  const testHandler = useCallback((e: CustomEvent) => {
    setInputValue(`${e.detail.hour}:${e.detail.minutes} ${e.detail.type}`);
  }, []);

  useEffect(() => {
    if (inputValue === "10:00 PM") {
      alert("You selected 10:00 PM");
    }
  }, [inputValue]);

  useEffect(() => {
    const tm = (tmRef.current as unknown) as HTMLDivElement;

    const newPicker = new TimepickerUI(tm, {});
    newPicker.create();

    //@ts-ignore
    tm.addEventListener('accept', testHandler);

    return () => {
      //@ts-ignore
      tm.removeEventListener('accept', testHandler);
    };
  }, [testHandler]);

  return (
    <div className='timepicker-ui' ref={tmRef}>
      <input
        type='test'
        className='timepicker-ui-input'
        defaultValue={inputValue}
      />
    </div>
  );
}

export default App;

Vue integration

This library can be used on Vue too. You have to use this.$refs to attach elements on DOM and add a custom event listener to this element.

Link to an example with Vue 2 Link to an example with Vue 3

<template>
  <div class="hello">
    <div class="timepicker-ui" ref="tm">
      <input v-model="inputValue" type="text" class="timepicker-ui-input" />
    </div>
    {{ inputValue }}
  </div>
</template>

<script>
import { TimepickerUI } from "timepicker-ui";

export default {
  name: "HelloWorld",
  data() {
    return {
      inputValue: "10:10 PM",
    };
  },
  mounted() {
    const test = new TimepickerUI(this.$refs.tm, { enableSwitchIcon: true });
    test.create();

    this.$refs.tm.addEventListener("accept", ({ detail }) => {
      this.inputValue = `${detail.hour}:${detail.minutes} ${detail.type}`;
    });
  },
};
</script>

Table with options

Methods

Methods are custom function what can be used to manually change the behavior of timepicker.

HTML

<div class="timepicker-ui-test">
  <input type="text" class="timepicker-ui-input" value="12:00 AM">
</div>

JavaScript

const timepicker = document.querySelector("timepicker-ui-test");
const init = new TimepickerUI(timepicker);

timepicker.create();

Table with methods

Events

Events are custom events triggered when you add some event listeners to your timepicker element. If you want to have a property timepicker/input values you have to use detail to the event object.

HTML

<div class="timepicker-ui-test">
  <input type="text" class="timepicker-ui-input" value="12:00 AM">
</div>

JavaScript

const timepicker = document.querySelector("timepicker-ui-test");
const init = new TimepickerUI(timepicker);

timepicker.create();

timepicker.addEventListener("show", (event) => console.log(event.detail));

Table with events

Future Plans

• keyboard accesibilty
• max/min time options

If you have more good ideas please let me know in issue. I will try to add more useful features. This project is still develop, if you find some bugs please report on the issue page.

License

MIT