npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jb-time-picker

v2.2.2

Published

time picker web component

Downloads

338

Readme

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;