analogue-time-picker

A small and simple time picker based on google material UI

• 12h and 24h versions
• Mobile and desktop enabled
• Custom styles, and works with material UI
• Responsive
• Accessable
• No dependencies

How to use

Demo

https://shanegh.github.io/analogue-time-picker/demo/

Use

import { timePickerInput } from 'analogue-time-picker'

var input = document.getElementById("myInput");
timePickerInput({ inputElement: input });

Style

The time picker has a default style. You can override by

• Adding a material UI stylesheet (e.g. https://code.getmdl.io/1.3.0/material.cyan-teal.min.css)
• Override the material UI styles used:
  • .atp .mdl-color--primary { background-color: green; } .atp .mdl-button--primary { color: green; }

Size

The size of the time picker is specified by the width and the font size. The clock has a fixed aspect ratio, so the width will determine the width and the height of the component. The font size specifies the size and spacing of the figures.

• Retain the default size of 300px.
• Add a width paramater to the time picker: timePicker({ width: "300px" }). The font size is then generated automatically.
• Specify the width on the parent element

var parent = document.getElementById("theParent");
parent.style.width = "300px";
parent.style.fontSize = "16px";
timePicker({ element: parent });

API

analog-time-picker exposes 3 functions: timePicker, timePickerModal and timePickerInput.

timePicker

Create a timepicker contained in the "element" property of the output.

var timePicker = timePicker({
    element: document.getElementById("parentElement"),
    mode: 12,
    width: "300px",
    time: { hour: 13, minute: 0 }
});

Inputs

| Name | Type | Optional | Description | Default | | - | - | - | - | - | | element | HTMLElement | true | An element to append the time picker html to. | undefined | | mode | number/string | true | 12 hour or 24 hour mode. Accepts 12, 24, "12", "24". | The default browser culture of the user | | width | number/string | true | The width of the component. Will also be used to calculate the font size. If % or em are used, the font sized cannot be auto calculated, and must be specified manually via css | "300px" | | time | {hour: number | string, minute: number | string} or Date | true | The initial time of the component in 24h format | { hour: 0, minute: 0 } | | focus | boolean | true | If set to true, the "hours" input will be focused on render. | false |

Output

| Name | Type | Description | | - | - | - | | element | HTMLElement | The element which contains the time picker | | setWidth | (width: number | string) => void | See width input. | | getTime | () => {hour: number, minute: number} | Return the current time | | setTime | (hours?: number | string, minutes?: number | string) => void | Set the current time programmatically | | set12h | () => void | Set the clock to 12 hour mode. If the clock is in 12h mode, the times used in getTime, setTime and onOk will still be in 24h format | | set24h | () => void | Set the clock to 24 hour mode | | showHours | () => void | Show the hour hand | | showMinutes | () => void | Show the minute hand | | ok | () => void | Dispose of the time picker and invoke any "onOk" event handlers | | cancel | () => void | Dispose of the time picker and invoke any "onCancel" event handlers | | onTimeChanged | (callback: (hour: number, minute: number) => void) => void | Add an event handler for when the time changes | | onOk | (callback: (hour: number, minute: number) => void) => void | Add an event handler for when the set time operation completes successfully | | onCancel | (callback: () => void) => void | Add an event handler for when the set time operation is canceled | | onDispose | (callback: () => void) => void | Add an event handler for when the time picker is disposed of | | dispose | () => void | Manually dispose of the time picker |

timePickerModal

Create a timepicker and render in a modal popup

var timePickerModal = timePickerModal({
    mode: 12,
    width: "300px",
    time: { hour: 13, minute: 0 }
});

Inputs

| Name | Type | Optional | Description | Default | | - | - | - | - | - | | mode | number/string | true | 12 hour or 24 hour mode. Accepts 12, 24, "12", "24". | The default browser culture of the user | | width | number/string | true | The width of the component. Will also be used to calculate the font size. If % or em are used, the font sized cannot be auto calculated, and must be specified manually | "300px" | | time | obj or Date | true | The initial time of the component in 24h format | { hour: 0, minute: 0 } |

Output

See timePicker output

timePickerInput

Create a timepicker from an <input /> element. The timepicker renders when the input is focused and adds it value to the input when closed.

var timePickerModal = timePickerInput({
    inputElement: document.getElementById("myInput"),
    mode: 12,
    width: "300px",
    time: { hour: 13, minute: 0 }
});

Inputs

| Name | Type | Optional | Description | Default | | - | - | - | - | - | | inputElement | HTMLInputElement | false | The input to specify as a time picker | n/a | | mode | number/string | true | 12 hour or 24 hour mode. Accepts 12, 24, "12", "24". | The default browser culture of the user | | width | number/string | true | The width of the component. Will also be used to calculate the font size. If % or em are used, the font sized cannot be auto calculated, and must be specified manually | "300px" | | time | obj or Date | true | The initial time of the component in 24h format | { hour: 0, minute: 0 } |

Output

| Name | Type | Description | | - | - | - | |getTime | () => {hour: number, minute: number}|If the time picker is open, get it's time. Otherwise, get the time in the <input />. If the input cannot be parsed, returns null| |setTime | (hour: number | string, minute: number | string, force?: boolean) => void|Set the time in the time picker if open, otherwise, set the time in the input. If paramater force === true, set the time in the input either way| |dispose | () => void|Dispose of the time picker input|