Nasal Piercings Manipulator
    Have ideas to improve npm?Join in the discussion! »

    timepicker-ui
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    timepicker-ui

    downloads npm version License

    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

    desktop-version


    Landspace version

    desktop-version


    Mobile version

    mobile-version

    Themes

    There is two available version of theme ( radius and straight). Examples show radius version.

    Desktop

    desktop-crane-radius-version

    Landspace

    desktop-crane-radius-version-mobile

    Mobile

    desktop-crane-radius-version-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 iconClass and iconClassMobile which contains templates for icons. iconClass and iconClassMobile requiare default class timepicker-ui-keyboard-icon.


    Usage

    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.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.js"></script>
    <script src="node_modules/path/timepicker-ui.js"></script>
    <script src="/path/timepicker-ui.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.

    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();

    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

    Name Default Type Description
    animated true boolean Turn on/off animations on picker on start/close
    amLabel AM string Set custom text to am label
    appendModalSelector '' string Set default selector to append timepicker inside it. Timepicker default append to body
    backdrop true boolean Turn on/off backdrop
    cancelLabel CANCEL string Set custom text to cancel button
    editable false boolean Edit hour/minutes on the web mode. You have set option preventDefault to false.
    enableScrollbar false boolean Turn on/off scroll if timepicker is open
    enableSwitchIcon false boolean Turn on/off icon to switch desktop/mobile
    focusInputAfterCloseModal false boolean Turn on/off focus to input after close modal
    hourMobileLabel Hour string Set custom text to hour label on mobile version
    incrementHours 1 nubmer Increment hour by 1, 2, 3 hour
    incrementMinutes 1 nubmer Increment minutes by 1, 5, 10, 15 minutes
    minuteMobileLabel Minute string Set custom text to minute label on mobile version
    mobile false boolean Turn on mobile version
    okLabel OK string Set custom text to ok label
    pmLabel PM string Set custom text to pm label
    preventDefault true boolean Turn on/off defaults events to clock face events
    selectTimeLabel Select Time string Set custom text to select time label on desktop version
    switchToMinutesAfterSelectHour true boolean Turn on/off switch to minutes by select hour
    iconClass <i class="material-icons timepicker-ui-keyboard-icon"> keyboard </i> string Set default template to switch desktop.This options is using by default material design icon
    iconClassMobile <i class="material-icons timepicker-ui-keyboard-icon"> schedule </i> string Set default template to switch mobile. This options is using by default material design icon
    theme basic string Set theme to timpicker. Available options: basic, crane-straight, crane-radius

    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

    Name Description
    create The create method init timepicker
    open The open method opens immediately timepicker after init
    close Closure method closes the timepicker

    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

    Name Description
    show The event starts if timepicker is showing up
    cancel The event starts if timepicker is closing
    accept The event starts if timepicker button OK is accepted
    update The event starts if mouse/touch events are triggered on a clock face (multiple events)
    selectminutemode The event starts if timepicker minute box is clicked
    selecthourmode The event starts if timepicker hour box is clicked
    selectamtypemode The event starts if timepicker am box is clicked
    selectpmtypemode The event starts if timepicker pm box is clicked

    Future Plans

    • validation
    • keyboard accesibilty
    • max/min time options
    • 24h time mode clock face

    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

    Install

    npm i timepicker-ui

    DownloadsWeekly Downloads

    177

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar