Minimal Duration Picker Plugin For jQuery and Bootstrap

Minimal Duration Picker Plugin For jQuery and Bootstrap
File Size: 17.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery & Bootstrap plugin that converts a normal text field into a duration picker allowing the user to set a duration in time.

How to use it:

1. Download and include Bootstrap Duration Picker plugin's CSS and JavaScript files on the webpage. Assume that you first have jQuery and Bootstrap framework installed.

<link rel="stylesheet" href="src/jquery-duration-picker.css">
<script src="src/jquery-duration-picker.js"></script>

2. Create a regular text input field for the duration picker.

<input type="text" class="form-control" id="duration">

3. Call the function on the input field and done.

$('#duration').durationPicker();

4. Customize the duration picker. Here's a list of default options which can be passed into the duration picker on init.

$('#duration').durationPicker({
  lang: 'en',
  formatter: function (s) {
    return s;
  },
  showSeconds: false
});

5. Localization.

var langs = {
    en: {
        day: 'day',
        hour: 'hour',
        minute: 'minute',
        second: 'second',
        days: 'days',
        hours: 'hours',
        minutes: 'minutes',
        seconds: 'seconds'
    }
};

Change log:

2017-01-08

  • Handle NaN values

2016-12-20

  • Handle NaN values

This awesome jQuery plugin is developed by koss-lebedev. For more Advanced Usages, please check the demo page or visit the official website.