DEV Community

Cover image for Time Picker Module in Vanilla JS
кαтнєєѕкυмαɾ
кαтнєєѕкυмαɾ

Posted on

3

Time Picker Module in Vanilla JS

I have faced time-picking issues in designing web-based apps. Several types of Time and Date pickers are available on the internet and open-sourced but not found anything vanilla js and zero dependency package. All packages are required NPM dependency. So I decided to create a new module. It's completely customized to your design.

💥 usage in your HTML file

    <input type="text" id="timePick" value="08:06:04">

    <input type="text" class="timePicker"/>
    <input type="text" class="timePicker"/>
    <input type="text" class="timePicker"/>

    <script src="./time-pick.js"></script>
    <script>
        var timepicker = new TimePick('#timePick');
        var timepickerz = new TimePick('.timePicker');
    </script> 
Enter fullscreen mode Exit fullscreen mode

I'll attach the GitHub repository link. If you like use it. Mostly welcome your suggestion and contributions.

Github Repo: https://github.com/Katheesh/TimePick.js

If you're a web designer/developer, now you don't need this just bookmark it or star it. It will use for you!

Image description

😍 Have a good day.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay