Sabre Spark

DateSelect

Create a select list of days, months or years.

Option name Type Description
module helper/date-select.js
Example
new DateSelect(el);

DateSelect

function
 DateSelect() 

DateSelect constructor

Option name Type Description
el Element

Optional

params Object

Optional

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 = {

_setParams

property
 _setParams 

Include common functionality.

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

_whitelistedParams

property
 _whitelistedParams 

Whitelisted parameters which can be set on construction.

Option name Type Description
_whitelistedParams: ['type', 'monthNames', 'min', 'max', 'onChange'],

defaults

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.

Option name Type Description
defaults: {
  type: null,
  monthNames: null,
  min: null,
  max: null,
  select: null,
  onChange: null,
  _onChangeBound: null
},

getValue

method
 getValue() 

Get the value.

Option name Type Description
asInt Boolean

Get the value as a parsed integer.

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

setValue

method
 setValue() 

Set the value.

Option name Type Description
val Mixed
setValue: function(val) {
  return this.select.setValue(val);
},

setOptions

method
 setOptions() 

Update the date select's options.

Option name Type Description
params Object, Array
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);
},

setLabel

method
 setLabel() 

Set the label text for the select input.

Option name Type Description
text String

Optional

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

_createDefaultElement

method
 _createDefaultElement() 

Create the default input element.

Option name Type Description
type String
return 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;
},

_createSelect

method
 _createSelect() 

Create a select input helper.

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

_getDefaultMonthNames

method
 _getDefaultMonthNames() 

Make a list of month options.

Option name Type Description
return Array
_getDefaultMonthNames: function() {
  return dateHelper.getMonthNamesShort();
},

_getTypeText

method
 _getTypeText() 

Get the text for this type of date select.

Option name Type Description
return String
_getTypeText: function() {
  return this.type.charAt(0).toUpperCase() + this.type.slice(1);
},

_bindEventListenerCallbacks

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

_onSelectChange

method
 _onSelectChange() 

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.

Option name Type Description
val String

The value of the input

oldVal String

The previous value

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

  Base.exportjQuery(DateSelect, 'DateSelect');

  return DateSelect;
}));