Mobile-friendly Time Picker Popup – nj-timepicker

Category: Date & Time | October 9, 2019
Author: nj-coder
Views Total: 44
Official Page: Go to website
Last Update: October 9, 2019
License: MIT

Preview:

Mobile-friendly Time Picker Popup – nj-timepicker

Description:

nj-timepicker is a user-friendly, mobile-compatible time picker plugin that allows the user to select hours, minutes, AM/PM from a time selection popup.

How to use it:

1. Load the nj-timepicker’s files from the dist folder.

<link rel="stylesheet" href="/dist/style.css" />
<script src="/dist/scripts.js"></script>

2. Create a container to place the time picker.

<div class="container" id="example">
  --:-- --
</div>

3. Initialize the timer picker and done.

let myElement = document.querySelector('#example');
var myPicker = new NJTimePicker({
    targetID: 'example'
});

4. Set an array of preset minutes. Default: [0, 15, 30, 45].

let myElement = document.querySelector('#example');
var picker = new NJTimePicker({
    targetID: 'example',
    minutes: [0, 15, 30, 45]
});

5. Specify a unique ID for the time picker.

let myElement = document.querySelector('#example');
var picker = new NJTimePicker({
    targetID: 'example',
    id: 1234
});

6. Set the time format: 12-h (default) or 24-h.

let myElement = document.querySelector('#example');
var picker = new NJTimePicker({
    targetID: 'example',
    format: '24'
});

7. Determine whether or not to close the time picker popup when clicking outside. Default: true.

let myElement = document.querySelector('#example');
var picker = new NJTimePicker({
    targetID: 'example',
    clickOutsideToClose: false
});

8. Customize the header text.

let myElement = document.querySelector('#example');
var picker = new NJTimePicker({
    headerText: ''
});

9. Open/close the time picker manually.

myPicker.show();
myPicker.hide();

10. Set/get values.

// set
myPicker.setValue('24'); // h-24
myPicker.setValue('12:45');
myPicker.setValue('12:45 am');
myPicker.setValue({
  key: 'hours',
  value: 24
});
myPicker.setValue({
  key: 'minutes',
  value: 30
});

// get
myPicker.getValue('hours');
myPicker.getValue('hours'); // 12 or 24
myPicker.getValue('minutes'); // 30
myPicker.getValue('am'); // am or pm
myPicker.getValue('fullResult');

11. Event handlers.

myPicker.on('ready', function (data) {
  // on init
});

myPicker.on('show', function (data) {
  // on show
});

myPicker.on('hide', function (data) {
  // on hide
});

myPicker.on('cancel', function (data) {
  // on cancel
});

myPicker.on('clear', function (data) {
  // on clear
});

myPicker.on('save', function (data) {
   // data.fullResult
});

You Might Be Interested In:


Leave a Reply