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
• Configuration
• Usage
• How to Contribute
• License

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