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-input

v1.5.1

Published

time input web component

Downloads

298

Readme

jb-time-input web component

Published on webcomponents.org GitHub license NPM Downloads

in jb-time-input you can create a input special for time the advantage is:

  • validation so it only accept time value and not any other invalid format
  • support arrow key to increase and decrease time value
  • time picker
  • support both rtl and ltr direction
  • easy to use and can be used in any js framework like React, Vue, Angular,etc
  • can be used in pure js without any other dependency
  • has a touch friendly time-picker
  • responsive and mobile friendly

Demo : codepen;

using with JS frameworks

to use this component in react see jb-time-input/react;

instruction

installation and usage

with npm:

    npm i jb-time-input
    import 'jb-time-input'
    <div>
        <jb-time-input/>
    <div>

event

like any other javascript DOM element you can bind event to web component with DOM.addEventListener the supported event is:

    //when default property are defined best time for impl your config
    document.querySelector('jb-date-input').addEventListener('init',this.onCalendarElementInitiated);

    //when calendar init all property and function and dom created and bind successully
    document.querySelector('jb-date-input').addEventListener('load',this.onCalendarElementLoaded);

    //keyboard event
    document.querySelector('jb-time-input').addEventListener('keydown',()=>{});
    document.querySelector('jb-time-input').addEventListener('keyup',()=>{});
    document.querySelector('jb-time-input').addEventListener('keypress',()=>{});
    document.querySelector('jb-time-input').addEventListener('change',()=>{});
    // when user press enter on type good for situation you want so submit form or call search function on user press enter. 
    document.querySelector('jb-time-input').addEventListener('enter',()=>{});
    //focus event
    document.querySelector('jb-time-input').addEventListener('focus',()=>{});
    document.querySelector('jb-time-input').addEventListener('blur',()=>{});

set value

to set value of time input you have 2 way:

  • by html as a attribute:
<jb-time-input value="14:34:63">
  • by javascript
    document.querySelector('jb-date-input').value = "01:11:12";

validation

jb-time-input use jb-validation inside to handle validation so for more information you can read it's documentation.

jb time input will check validation automatically and show error on user blur the input and hide error on user type and blur to use this feature you just have to set validation list of component.

document.querySelector('jb-time-input').validationList = [
    //regex validator
    {
      validator: /^[1][1234].*$/g,
      message:"hour  must be between 11 and 14"
    },
    //callback function validator
    {
      validator:({displayValue,value,valueObject})=>{
        //display value is the value user see
        //value is the value developer get by dom.value
        //valueObject is the {hour:number,minute:number,second:number} object contain inputted value in number
        if(valueObject.minute<30){
          return false;
        }
        return true;
      },
      message:'minute must be 30 to 60'
    }
  ]

you can trigger validation manually by calling checkValidity function. for example you can call it when submit button clicked and check if value is valid or not.

    // if you set showError false you can get validation result but component wont show error to user by itself its good when you want show error in your own way
    const showError = true;
    const validationResult =  document.querySelector('jb-time-input').validation.checkValidity(showError);
    if(validationResult.isAllValid){
        alert('all validation are passed')
    }else{
        alert('validation error!');
    }

you can also get validation result of your time input by following way:

    document.querySelector('jb-time-input').validation.resultSummary

configurable attributes

you can change some attribute in html like label or message configurable attribute are:

<jb-time-input close-button-text="بستن"></jb-time-input>

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-input').secondEnabled = false;

frontal zero

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

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

or

<jb-time-input frontal-zero="true"></jb-time-input>

optional units

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

//it could be 'hour' or 'minute' or 'second'
document.querySelector('jb-time-input').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-input').showPersianNumber = true

set custom style

you can customize jb-time-input look by setting css variable in your app.
jb-time-input use jb-input and jb-time-picker and jb-popover underneath so to change the styles of your component read custom style section of these components and set their css variable. more than above here is the css variable that we use in jb-time-input itself:

| css variable name | description | | ------------- | ------------- | | --jb-time-input-margin | outer margin of web component default is 12px 0 |

Other Related Docs: