Convenient Time Picker In Vanilla JavaScript – fg.timepicker

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',
});