nj-timepicker

1.3.118 • Public • Published

NJ-TimePicker

NJ-TimePicker is a pure JavaScript based timepicker that enables you to select time both in 12-hour and 24-hour format in a web and mobile friendly user interface. Checkout the DEMO HERE or FIDDLE IT OUT

Table of Contents

Installation

npm install --save nj-timepicker

You can use NJ-TimePicker as an ES6 module as follows:

import NJTimePicker from 'nj-timepicker'; 
 
const picker = new NJTimePicker(...);

Alertnatively you can include the njtimepicker.min.js script before the closing </body> tag and then in your JS create a new instance of NJ-TimePicker as below.

<script src="path/to/njtimepicker.min.js"></script>
<script>
    const picker = new NJTimePicker(...);
</script> 

Usage

let container = document.querySelector('#container');
// init picker
var picker = new NJTimePicker({
    targetID: 'container'
});
// on save event
picker.on('save', function (data) {
    container.textContent = data.fullResult;
});

Configuration

The plugin ships with various configuration and events that can be used to meet your requirements.

Initialization Options

Property Values Default Description
target DOM Element -- target DOM element
targetID String -- the DOM element ID
id String alphanumeric string a unique ID for the picker
format 12 \| 24 12 picker display format
clickOutsideToClose true \| false true to close the picker when clicked outside
autoSave true \| false false save when all values are selected
minutes array [0, 15, 30, 45] a list of minutes
disabledHours array [] a list of disabled Hours
disabledMinutes array [] a list of disabled Minutes
texts object {
header: ''
hours: 'Hours'
minutes: 'Minutes'
ampm: 'AM/PM'
save: 'Save'
clear: 'Clear'
close: 'Close'
}
picker texts

Methods

NJ-TimePicker ships with methods that can be used to change the picker behaviour. These methods have strict input formatting which helps achive desired result

picker.show()

This is methods triggers the show event and presents the picker on-screen.

picker.hide()

This is methods triggers the hide event and hides the picker.

picker.setValue(param)

The setValue method sets the value of the picker. It take one argument which can be a string or a object

// as string
picker.setValue('12'); // h-12
picker.setValue('12:45'); // h-12, m-45 
picker.setValue('12:45 am'); // h-12, m-45, meridiem-am
 
// as object
picker.setValue({
    hours: 12, // h-12
    minutes: 45, // m-45 
    ampm: 'am' // meridiem-am
});

picker.getValue(param)

The getValue method gets the value of the picker. It takes an optional argument.

picker.getValue();
// result object
{
  ampm: "am"
  fullResult: "12:45 am"
  hours: "12"
  minutes: "45"
}
// with parameter
picker.getValue('hours'); // outputs hours, 12
picker.getValue('minutes'); // outputs minutes, 45
picker.getValue('am'); // outputs meridiem, am
picker.getValue('fullResult'); // outputs full string, 12:45 am

Events

Name Description
ready when plugin initialization is complete
show picker is presented to the user
hide when picker is hidden
save on save button click
cancel on cancel button click
clear on clear button click

Theming

You can overridde the default theme by changing the following css variables

:root {
    /* save button */ 
    --save-button-bg: #008000;
    --save-button-fc: #ffffff;
 
    /* clear button */
    --clear-button-bg: #ffa500;
    --clear-button-fc: #ffffff;
 
    /* close button */
    --close-button-bg: #ff0000;
    --close-button-fc: #ffffff;
 
    /* header */ 
    --header-text-color: #ffffff;  
    --header-text-align: left;
    --header-bg: #414141;
 
    /* picker container */
    --picker-bg: #fff;
    --picker-selection-bg: #0000ff;
    --picker-selection-fc: #fff; 
    --picker-max-width: 400px;
    --picker-min-width: 350px;
}

How to Contribute

  1. Clone repo and create a new branch: $ git checkout https://github.com/nj-coder/nj-timepicker -b name_for_new_branch.
  2. Make changes and test
  3. Submit Pull Request with comprehensive description of changes

Releases and Changes

Check out the Releases and Change Logs for more information.

Copyright and License

The MIT license

Package Sidebar

Install

npm i nj-timepicker

Weekly Downloads

1

Version

1.3.118

License

MIT

Unpacked Size

123 kB

Total Files

33

Last publish

Collaborators

  • nj-coder