function

DateSelect()

Option name	Type	Description
el	Element	Optional
params	Object	Optional

DateSelect constructor

function DateSelect(el, params) {

  // If the first argument is a plain object, create a default element
  // since the user MUST provide additional params but the element
  // is optional. Doing it this way to keep the arity the same
  // as other components.
  if (!(el instanceof HTMLElement)) {
    params = el || {};
    el = this._createDefaultElement();
  }

  this._setParams(this.defaults, true);
  this._setParams(params);
  this._bindEventListenerCallbacks();
  this._createSelect(el);
}

DateSelect.prototype = {

property

_setParams

Include common functionality.

_setParams: Base.setParams,
remove: Base.remove,

property

_whitelistedParams

Whitelisted parameters which can be set on construction.

_whitelistedParams: ['type', 'monthNames', 'min', 'max', 'onChange'],

property

defaults

Default values for internal properties we will be setting.
These are set on each construction so we don't leak properties
into the prototype chain.

defaults: {
  type: null,
  monthNames: null,
  min: null,
  max: null,
  select: null,
  onChange: null,
  _onChangeBound: null
},

method

getValue()

Option name	Type	Description
asInt	Boolean	Get the value as a parsed integer.
return	Mixed

Get the value.

getValue: function(asInt) {
  return asInt ? parseInt(this.select.getValue(), 10) : this.select.getValue();
},

method

setValue()

Option name	Type	Description
val	Mixed

Set the value.

setValue: function(val) {
  return this.select.setValue(val);
},

method

setOptions()

Option name	Type	Description
params	Object, Array

Update the date select's options.

setOptions: function(params) {

  params = params || {};

  this.min = params.min;
  this.max = params.max;

  // Default days
  if (this.type === 'day') {
    this.min = this.min || 1;
    this.max = this.max || 31;
  }
  // Default months
  else if (this.type === 'month') {

    // No monthNames yet and no min or max
    if ((!this.monthNames && !this.min && !this.max) || params.monthNames) {
      this.monthNames = params.monthNames || this._getDefaultMonthNames();
    } else {
      this.min = this.min || 1;
      this.max = this.max || 12;
    }
  }
  // Default years
  else if (this.type === 'year') {
    var date = new Date();
    this.min = this.min || date.getFullYear() - 100;
    this.max = this.max || (this.min || date.getFullYear()) + 100;
  }

  var i = this.min ? this.min - 1 : 0;
  var len = this.max || this.monthNames.length;
  var opts = [{}];

  for (; i < len; i++) {
    opts.push({
      value: i + 1,
      text: this.monthNames ? this.monthNames[i] : i + 1
    });
  }

  this.select.setOptions(opts);
},

method

setLabel()

Option name	Type	Description
text	String	Optional

Set the label text for the select input.

setLabel: function(text) {
  this.select.setLabel(text !== undefined ? text : this._getTypeText());
},

method

_createDefaultElement()

Option name	Type	Description
type	String
return	Element

Create the default input element.

_createDefaultElement: function() {
  var el = document.createElement('span');
  el.className = 'spark-select';
  el.innerHTML = '<select class="spark-select__input"></select><span class="spark-label"></span>';
  return el;
},

method

_createSelect()

Option name	Type	Description
el	Object

Create a select input helper.

_createSelect: function(el) {
  this.select = new SelectInput(el, {
    onChange: this._onSelectChangeBound
  });
  this.setOptions();
  this.setLabel();
},

method

_getDefaultMonthNames()

Make a list of month options.

_getDefaultMonthNames: function() {
  return dateHelper.getMonthNamesShort();
},

_getTypeText

method

_getTypeText()

Get the text for this type of date select.

_getTypeText: function() {
  return this.type.charAt(0).toUpperCase() + this.type.slice(1);
},

method

_bindEventListenerCallbacks()

Create bound versions of event listener callbacks and store them.
Otherwise we can't unbind from these events later because the
function signatures won't match.

_bindEventListenerCallbacks: function() {
  this._onSelectChangeBound = this._onSelectChange.bind(this);
},

method

_onSelectChange()

Option name	Type	Description
val	String	The value of the input
oldVal	String	The previous value

When the typeahead changes, make sure the value is valid. This
is very basic validation. More complex validation like the number
of days in a specific month should be handled by the callback.
And run our callback.

_onSelectChange: function(val) {
  (this.onChange || noop)(val, this);
}
  };

  Base.exportjQuery(DateSelect, 'DateSelect');

  return DateSelect;
}));