npm

analogue-time-picker
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

analogue-time-picker

A small and simple time picker based on google material UI

time picker

  • 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

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

Package Sidebar

Install

npm i analogue-time-picker

Weekly Downloads

804

Version

1.0.2

License

MIT

Unpacked Size

232 kB

Total Files

10

Last publish

Collaborators

  • shanegh