Pickers

Enyo provides a variety of Picker controls to allow developers to present a consistent user interface across different applications for a common set of user tasks. The core set of Enyo Pickers includes the DatePicker and TimePicker, both of which inherit from enyo.PickerGroup, as well as the IntegerPicker, which derives from enyo.HFlexBox. Also available are FilePicker and PeoplePicker, both of which derive from enyo.Popup.

(Note: The PeoplePicker control is documented in its own separate article.)

enyo.Picker

A Picker is a basic control offering a selection of items. Each item in the Picker has an associated caption and value.

A Picker may be initialized with a simple array of strings, like so:

{
  kind: "Picker",
  value: "name",
  items: ["title", "name", "first last", "bool"],
  onChange: "pickerPick"
}

You may also specify the caption and value of each item separately:

{
  kind: "Picker",
  value: "am",
  items: [
      {caption: "A.M.", value: "am"},
      {caption: "P.M.", value: "pm"}
  ]
}

The selected item may be retrieved by calling getValue:

pickerPick: function(inSender) {
  this.fieldType = this.$.picker.getValue();
}

enyo.PickerGroup

A PickerGroup is a container used to group multiple Pickers together.

{kind: "PickerGroup", label: "preferences", onChange: "pickerPick",
  components: [
      {name: "searchEnginePicker", value: "Google", items: ["Google", "Yahoo", "Bing"]},
      {name: "contactTypePicker", value: "Mail", items: ["Mail", "IM", "Text"]}
  ]
}

The selected item in each Picker may be retrieved by calling getValue:

pickerPick: function(inSender) {
  this.searchEngine = this.$.searchEnginePicker.getValue();
  this.contactType = this.$.contactTypePicker.getValue();
}

Or you may find it helpful to write a getValue method for the PickerGroup as a whole, as has been done for the Date and Time Pickers (discussed below).

DatePicker

DatePicker is a PickerGroup that allows selection of the month, day and year. The DatePicker uses the JavaScript Date object to represent the chosen date.

{kind: "DatePicker", label: "birthday", onChange: "pickerPick"}

The selected date may be retrieved by calling getValue:

pickerPick: function(inSender) {
  var bDate = this.$.datePicker.getValue();
}

The year range may be adjusted by setting the minYear and maxYear properties:

{
  kind: "DatePicker",
  label: "birthday",
  minYear: 1900,
  maxYear: 2011,
  onChange: "pickerPick"
}

TimePicker

TimePicker is a PickerGroup that offers selection of the hour and minutes, with an optional AM/PM selector. Like the DatePicker, the TimePicker uses the JavaScript Date object to represent the chosen time.

{kind: "TimePicker", label: "start time", onChange: "pickerPick"}

The selected time may be retrieved by calling getValue:

pickerPick: function(inSender) {
  var startTime = this.$.timePicker.getValue();
}

To enable 24-hour mode, set the is24HrMode flag:

{
  kind: "TimePicker",
  label: "start time",
  is24HrMode: true,
  onChange: "pickerPick"
}

IntegerPicker

IntegerPicker is a control that allows selection from a single integer field. The default selection range is 0-9. You can adjust the range by setting the min and max properties.

{kind: "IntegerPicker", label: "rating", min: 0, max: 10, onChange: "pickerChange"}

The selected integer may be retrieved by calling getValue:

pickerPick: function(inSender) {
  var rating = this.$.integerPicker.getValue();
}

FilePicker

FilePicker is a control that allows the user to choose files using the standard Picker UI.

The onPickFile event fires with a response from the file picker if/when the user chooses a file. The response object is an array of objects representing the chosen files:

[
  {
      fullPath: // Absolute File Path
      iconPath: // Absolute File Path with ExtractFS prefix
      attachmentType: // File Type (image, document, audio, video)
      size: // File Size in Bytes
  },
  { ... }, ...
]

Published Properties

A FilePicker may be customized by setting values for its published properties, all of which are optional.