Minimal Duration Picker Plugin For jQuery and Bootstrap

Minimal Duration Picker Plugin For jQuery and Bootstrap
File Size: 41.2 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 logs:

2017-06-15

  • Add destroy() method

2017-06-13

  • v2.1.2: Pass isInitializing to onChanged callback

2017-05-18

  • v2.1.1: Add method to reset picker value

2017-04-23

  • Fix value parsing when days are disabled

2017-03-31

  • New UI for duration picker

2017-02-09

  • Use babel and ES6 syntax

2017-02-05

  • Refactor code duplication

2017-02-04

  • Fix CSS lint issues mockup

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.