Highly Customizable jQuery Dropdown Time Picker | qcTimepicker

qcTimepicker is a simple jQuery dropdown timer picker. Small in size, accessible, and highly customizable it automatically converts a text field into a dropdown time picker with custom time formats.

jquery timepicker slider, simple jquery timepicker example, timepicker dropdown, time drop down list jquery, jquery timepicker options

How to make use of it:

1. Include the jQuery javascript library and jQuery qcTimepicker plugin on the bottom of the web web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/qcTimepicker.min.js"></script>

2. Create a time input for the dropdown time picker.

<input type="time" class="timepicker" id="demo" required />

3. Call the plugin on the time input to create a basic time picker.

$(document).ready(function() {

4. Available choices to customize the time format, step, and time range.


  // additional CSS classes
  classes: '',

  // time format
  format: 'H:mm',

  // min/max time
  minTime: '0:00:00',
  maxTime: '23:59:59',

  // step size in ms
  step: 1800,

  // custom placeholder
  placeholder: '-',

5. Public strategies.

// show the time picker

// hide the time picker

// destroy the time picker

// increment or decrement the value

// get the current value

Small Accessible jQuery Dropdown Time Picker, qcTimepicker Plugin/Github, jquery timepicker 12 hour format

See Demo And Download

Official Website(RinkAttendant6): Click Here

This superior jQuery/javascript plugin is developed by RinkAttendant6. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Leave a Reply

Your email address will not be published. Required fields are marked *