Date-selection-manager NPM

date-selection-manager

Author: Daniel Okwufulueze

Date: 13/02/2016

This package takes care of date entries via select elements. It prevents the entry of invalid dates like February 30, June 31, or February 29 on a non-leap year.

date-selection-manager

    import dateSelectionManager from 'date-selection-manager';
    dateSelectionManager.loadDate(configObject); // the configObject parameter may be absent

How To Use

At the terminal do: cd path/to/your/project/
if you want to use date-selection-manager in devDependencies
npm install --save-dev date-selection-manager
else if you want to have date-selection-manager globally installed
npm install date-selection-manager -g

Setup your DOM elements for example:

  <div id='wrapper'>
    <div class='date-holder'>
      <select id='day'><option value=''>Day</option></select>
      <select id='month'><option value=''>Month</option></select>
      <select id='year'><option value=''>Year</option></select>
    </div>
  </div>

In your JS file which you may need to transpile using babel perhaps, do the following:
- Require date-selection-manager
```
  import dateSelectionManager from 'date-selection-manager';
```
- Invoke the manager to start managing your date DOM elements created in step 2
```
  dateSelectionManager.loadDate();
```

Pass custom JS object to date-selection-manager

date-selection-manager loadDate() method can take a configuration object. This configuration object can be absent in the call to loadDate and defaults will be used instead. So to call loadDate, one can do:

  loadDate(configObject)

  loadDate()

Where configObject can be patterned thus:

  let configObject = {
    dayContainer: [optionalValue], // defaults to document
    dayId: [optionalValue], // defaults to 'day'
    dayText: [optionalValue], // defaults to 'Day'
    dayValue: [optionalValue], // defaults to ''
    dayStartDigit: [optionalValue], // defaults to '1'
    dayEndDigit: [optionalValue], // defaults to '31'
    dayDefaultValue: [optionalValue], // defaults to ''
    dayChangeEventCallback: [optionalValue], // defaults to null
    monthContainer: [optionalValue], // defaults to document
    monthId: [optionalValue], // defaults to 'month'
    monthText: [optionalValue], // defaults to 'Month'
    monthValue: [optionalValue], // defaults to ''
    monthStartDigit: [optionalValue], // defaults to '1'
    monthEndDigit: [optionalValue], // defaults to '12'
    monthDefaultValue: [optionalValue], // defaults to ''
    monthChangeEventCallback: [optionalValue], // defaults to null
    yearContainer: [optionalValue], // defaults to document
    yearId: [optionalValue], // defaults to 'year'
    yearText: [optionalValue], // defaults to 'Year'
    yearValue: [optionalValue], // defaults to ''
    yearStartDigit: [optionalValue], // defaults to '1940'
    yearEndDigit: [optionalValue], // defaults to '2060'
    yearDefaultValue: [optionalValue], // defaults to ''
    yearChangeEventCallback: [optionalValue], // defaults to null
  }

Details on the names and default values of the configuration object properties are shown below:

Key	Default Value	Explanation
dayContainer	`document`	The DOM element you want to reference as holding the 'day' select element.
dayId	'day'	The id of the select element representing "day".
dayText	'Day'	The text of the first option element in the select element representing "day".
dayValue	''	The value of the first option element in the select element representing "day".
dayStartDigit	'1'	Where the select element representing "day" starts counting from.
dayEndDigit	'31'	The number at which the select element representing "day" ends.
dayDefaultValue	''	The value selected by default on the select element representing "day" once date-selection-manager is invoked.
dayChangeEventCallback	null	A callback function that is called when the select element representing "day" changes value.
monthContainer	`document`	The DOM element you want to reference as holding the 'month' select element.
monthId	'month'	The id of the select element representing "month".
monthText	'Month'	The text of the first option element in the select element representing "month".
monthValue	''	The value of the first option element in the select element representing "month".
monthStartDigit	'1'	Where the select element representing "month" starts counting from.
monthEndDigit	'12'	The number at which the select element representing "month" ends.
monthDefaultValue	''	The value selected by default on the select element representing "month" once date-selection-manager is invoked.
monthChangeEventCallback	null	A callback function that is called when the select element representing "month" changes value.
yearContainer	`document`	The DOM element you want to reference as holding the 'year' select element.
yearId	'year'	The id of the select element representing "year".
yearText	'Year'	The text of the first option element in the select element representing "year".
yearValue	''	The value of the first option element in the select element representing "year".
yearStartDigit	'1940'	Where the select element representing "year" starts counting from.
yearEndDigit	'2060'	The number at which the select element representing "year" ends.
yearDefaultValue	''	The value selected by default on the select element representing "year" once date-selection-manager is invoked.
yearChangeEventCallback	null	A callback function that is called when the select element representing "year" changes value.

Change-Event Callbacks

If you want to do something whenever a select element changes value, invoke dateSelectionManager with a configObject having the appropriate ChangeEventCallback dayChangeEventCallback, monthChangeEventCallback, yearChangeEventCallback. You can pass a parameter to the corresponding callback function which will stand for the event object returned whenever a change occurs in the select element. For example:

  dateSelectionManager.loadDate({
    // changeEvent is the event object returned upon a change in the select element.
    //
    dayChangeEventCallback: (changeEvent) => {
      // Do something after the change. You can work with the change event: changeEvent
    },
    monthChangeEventCallback: (changeEvent) => {
      // Do something after the change. You can work with the change event: changeEvent
    },
    yearChangeEventCallback: (changeEvent) => {
      // Do something after the change. You can work with the change event: changeEvent
    }
  });