- Vanilla
- Featured
flatpickr: lightweight datetimepicker with no dependencies
Appalled at the fact that you have to load 300kb of jquery and jquery UI or hook up bootstrap just to use a calendar? This is a vanillaJS [date][time]picker that’s powerful, easy to use, and looks good out of the box.
Almost every large SPA or project involves date and time input. There are limited options, however, if you also prefer to keep your projects lean and consequently stay away from heavy frameworks such as jQuery, or even Bootstrap.
Written in vanilla javascript, works with anything, anywhere.
Timedropper: A better UI timepicker
Timedropper is a jQuery UI timepicker. Its very unique in style, and adds a touch of polish to any page it’s on. Manage time input fields in a standard form. Focus on the input to open an small interactive timepicker.
Illustration by akselkreis
datedropper: jQuery Dates Plugin
datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for input fields.
It supports 16 different language formats and is easy to use. The plugin only requires three bits of code for activation — head, body and end. The tool is also easy to modify so that it fits the aesthetics of any website outline — just edit the CSS in the datedropper folder and you’ll have a custom plugin.
This tool has plenty of practical applications. Use it to add dates to an an or website, set an itinerary for an upcoming event or even set an expiration date for a digital product.
When it comes to customization, you have plenty of options to choose from there as well; alter the date format, animation style, colors, language, text, number of years included, borders and strokes, shadows and boxed elements. And you can do it all with just a few clicks with datedropper. Find it on GitHub and see for yourself.
- Vanilla
Rome: Custom Date and Time Picker
Rome is a dependency free, opt-in UI for a customizable date and time picker.
The plugin comes with a text input field that includes a drop down calendar and clock menu. (Or users can simply type in the date and time on their own.)
There are plenty of viable applications for this super little plugin. And Rome synchronizes in real-time with inputs, never steals focus and the CSS is entirely customizable. You can select the starting point for the week, date format, time format, display one or multiple months, set and disable use of the plugin on your site, set a time range for dates, black out invalid dates and more. Plus the plugin includes a ton of shortcuts to make workflow a breeze.
The plugin is also designed to work inline as well with the addition of a non-input element. The plugin is easy to install and setup using NPM or Bower. And if you are not sure where to start with customization, the default options are a good place to start. They can be changed at any time as you get more comfortable with using the tool.
Period Selector: Select a Single Month or Year
Period Selector is a visual element to select a single month or year in your design. It simplifies selecting a predefined month or year with a single click.
The plugin is a simple library for selecting a single year or month among predefined ranges. It’s useful to filter a set of items based on the time. You can add any number of options to this Facebook-like component to your page as you need.
Key features of this plugin include:
- Multiple plugins in a single page
- Separated year and month click events
- Auto arrange years and months based on input dates
- Smooth expand and collapse
Period Selector is easy to install and use. Just download and add the markup to the <head> of your website, define the plugin container and start the engine. (The code is fairly simple and easy to understand during the installation process.)
There are multiple options and parameters for a custom experience with this plugin including year, month and year/month combinations. You can set these parameters to work in the way the best suits your website design.
- Spotlight
ClockPicker: Clock-Style Timepicker
Don’t fret any more over the style of the clock or timer in your design. Let ClockPicker help make it easy for you.
This tiny little tool is a clock-style timepicker for Bootstrap websites. (The only dependencies are Bootstrap and jQuery.)
All of the code and options are included in the documenation, making this tool easy to implement for your projects.
