Author: | fgelinas |
---|---|
Views Total: | 720 views |
Official Page: | Go to website |
Last Update: | October 14, 2022 |
License: | MIT |
Preview:

Description:
This is the vanilla JS version of the jQuery UI Timepicker that enables your user to quickly and conveniently select a time (in hours and minutes) from a time picker interface.
How to use it:
1. Import the fg.timepicker’s JavaScript and Stylesheet into the document.
<script src="fg.timepicker.js"></script> <link rel="stylesheet" href="fg.timepicker.css" />
2. Create an inline time picker.
<div id="inline"></div> <input type="text" id="input">
new fg.Timepicker({ bindContainer: document.getElementById('inline'), bindInput: document.getElementById('input'), })
3. Attach the time picker to an input field.
<input type="text" id="example">
new fg.Timepicker({ bindInput: document.getElementById('example'), });
4. Available options to customize the time picker.
new fg.Timepicker({ // custom separator timeSeparator: ":", // show Hours showHours: true, // hoursStart and hoursEnd hoursStart: 0, hoursEnd: 23, // minutesStart, minutesEnd and minutesInterval minutesStart: 0, minutesEnd: 59, minutesInterval: 5, // show Minutes showMinutes: true, // enable/disable animation animatePopup: false, });
5. Callback functions.
new fg.Timepicker({ onTimeChange: function () { logEvent('onTimeChange, new time formatted : ' + instance.getFormattedTime()) }, onHourChange: function () { logEvent('onHourChange, new hour : ' + instance.getHour().toString()); }, onMinuteChange: function () { logEvent('onMinuteChange, new minute : ' + instance.getMinute().toString()); }, onShow: function () { logEvent('onShow triggered'); } });
6. Localize the time picker.
fg.TPLocales = { 'en': { 'am': 'AM', 'pm': 'PM', 'hour': 'Hour', 'minute': 'Minute', 'close': 'Close', 'now': 'Now', 'unselect': 'Unselect', }, 'fr': { 'am': 'AM', 'pm': 'PM', 'hour': 'Heure', 'minute': 'Minute', 'close': 'Fermer', 'now': 'Maintenant', 'unselect': 'Désélectionner', } };
new fg.Timepicker({ locale: 'fr', });