This time I will share jQuery Plugin and tutorial about Lightweight Duration Picker Plugin For jQuery and Semantic UI, hope it will help you in programming stack.
A lightweight jQuery duration / time picker plugin for Semantic UI that allows to pick duration in days, hours, minutes, seconds from a popover dropdown. Persian and RTL language are supported as well.
Basic usage:
1. Load jQuery library and the jQuery Duration Picker plugin’s files in your Semantic project.
1 |
<link rel="stylesheet" href="/path/to/semantic.min.css"> |
2 |
<link rel="stylesheet" href="dist/jquery-duration-picker.min.css"> |
4 |
<script src="/path/to/jquery-1.11.3.min.js"></script> |
5 |
<script src="/path/to/semantic.min.js"></script> |
6 |
<script src="dist/jquery-duration-picker.min.js"></script> |
2. Create a normal text input that will be converted into a duration picker.
1 |
<input type="text" placeholder="Pick Duration..." id="demo" value="1450"> |
3. Initialize the duration picker plugin on the text input.
1 |
$('#demo').duration_picker(); |
4. Default settings.
1 |
$('#demo').duration_picker({ |
7 |
formatter: function(s) {return s} |
This awesome jQuery plugin is developed by mjnaderi. For more Advanced Usages, please check the demo page or visit the official website.
