This time I will share jQuery Plugin and tutorial about Minimalist Time Selector Plugin For jQuery – Picktim, hope it will help you in programming stack.
Picktim is a very basic yet fully configurable jQuery time picker plugin where the users are able to select 12-hour or 24-hour times from a popup displayed next to the time input.
How to use it:
1. Insert jQuery library together with the jQuery Picktim plugin’s JavaScript and Stylesheet into the page.
1 |
< link href = "css/picktim.css" rel = "stylesheet" > |
3 |
integrity = "sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin = "anonymous" > |
6 |
< script src = "js/picktim.js" ></ script > |
2. Load the Font Awesome Iconic Font for up/down/clear icons.
3 |
integrity = "sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" |
4 |
crossorigin = "anonymous" > |
3. Create a placeholder element for the time picker.
1 |
< div class = "timepicker" id = "timepicker" ></ div > |
4. Initialize the plugin to create a basic time picker (time input) inside the placeholder element.
1 |
$( ".timepicker" ).picktim(); |
5. Decide whether or not use the 12-hour (AM/PM).
1 |
$( ".timepicker" ).picktim({ |
6. Customize the appearances of the time picker popup.
1 |
$( ".timepicker" ).picktim({ |
2 |
backgroundColor: "#EEE" , |
7. Set the placement of the time picker popup.
1 |
$( ".timepicker" ).picktim({ |
2 |
orientation: "bottomLeft" |
8. Set the initial time.
1 |
$( ".timepicker" ).picktim({ |
9. Change the default icons.
1 |
$( ".timepicker" ).picktim({ |
3 |
up: 'fa fa-chevron-up fa-fw' , |
4 |
down: 'fa fa-chevron-down fa-fw' , |
5 |
clear: 'fa fa-times fa-fw' |
10. More configuration options.
1 |
$( ".timepicker" ).picktim({ |
11. Get the value of the time input.
1 |
$( ".timepicker" ).picktim( 'value' ); |
This awesome jQuery plugin is developed by engel-ja. For more Advanced Usages, please check the demo page or visit the official website.