Press "Enter" to skip to content

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() {
  $('.timepicker').qcTimepicker();
});

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

$('.timepicker').qcTimepicker({

  // 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
$('.timepicker').qcTimepicker('show');

// hide the time picker
$('.timepicker').qcTimepicker('hide');

// destroy the time picker
$('.timepicker').qcTimepicker('destroy');

// increment or decrement the value
$('.timepicker').qcTimepicker('stepUp');
$('.timepicker').qcTimepicker('stepDown');

// get the current value
$('.timepicker').qcTimepicker('valueAsNumber');
$('.timepicker').qcTimepicker('valueAsDate');

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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