javadbat/jb-time-picker

jb-time-picker web component

this component is 24hour svg-base time picker web component that use wheel to get time from user. sample: https://codepen.io/javadbat/pen/yLgjGdv

usage

you just need to install it with npm and import it and use tag nothing more.

npm i jb-time-picker

import and load web component in any js file

import 'jb-time-picker'

use it in your html or jsx or any other markup file:

<jb-time-picker></jb-time-picker>

set and get value

you can set or get component value by using standard value property object

//get value
console.log(document.querySelector('jb-time-picker').value)
//set value
document.querySelector('jb-time-picker').value = {hour:3,minute:10,second:20}

set time focus

you can focus in one of time unit like hour or minute with code when you need to. for example when you want user pay attention to hour and change it first to do that just call setTimeUnitFocus function:

//focus on hour
document.querySelector('jb-time-picker').setTimeUnitFocus('hour')
//focus on minute
document.querySelector('jb-time-picker').setTimeUnitFocus('minute')
//focus on second
document.querySelector('jb-time-picker').setTimeUnitFocus('second')

event

//on change
document.querySelector('jb-time-picker').addEventListener('change', (e)=>{console.log(e.target.value)});

disable second

if you want to just input minute and hour and disable second in picker and input just set secondEnabled to false

    document.querySelector('jb-time-picker').secondEnabled = false;

frontal zero

if you want picker to show 02 instead of 2 when number is less than 10 just set frontalZero of timepicker default is false.

document.querySelector('jb-time-picker').frontalZero = true;

optional units

if you want to tell user some units is optional and greyout the numbers in picker you can set optionalUnits

//it could be 'hour' or 'minute' or 'second'
document.querySelector('jb-time-picker').optionalUnits = ['hour'];

show persian number

if you want to show persian number instead of english number chars. you can set showPersianNumber:

document.querySelector('jb-time-picker').showPersianNumber = true

text width align

different numbers have different width in monitor for example 1 is thinner than 8 or 4. this width different is more visible when chars combined like 11 or 44.
in jb-time-input you can set text width base on your font you use with textWidth prop. so 11 and 44 both occupy same amount of width.

//ideal number is between 150 - 300 base on your app font.
document.querySelector('jb-time-picker').textWidth = 150;