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.

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

1. 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

2. 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>
   

3. 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();
     

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)

or

  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:

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

I wish to acknowledge the authors and contributors of the following packages which were used in the devDependencies of this work:

• autoprefixer
• babel [cli, core, loader, preset-es2015]
• chai
• css-loader
• jsdom
• jshint
• jshint-loader
• mocha
• node-sass
• postcss-loader
• sass-loader
• style-loader
• uglifyjs-webpack-plugin
• watch
• webpack
  
  

2017 Daniel Okwufulueze

This package is distributed under the GNU GPL-3.0 licence