Framework7 Picker

In Framework7, picker is a very powerful component which facilitates you to choose any values from list and also used to create custom overlay pickers. It looks like iOS native picker.

Picker can be used as inline component or as overlay. The overlay picker will be automatically converted to Popover on tablets (iPad).

You can create an initialize the JavaScript method by using the following syntax:

Here parameters are required objects, used to initialize the picker instance and it is a required method.

Picker Parameters

Following is a list of available parameters in Picker:

Index	Parameter	Type	Description
1)	container	string or HTMLElement	String with CSS selector or HTMLElement used to generate Picker HTML for an inline pickers.
2)	input	string or HTMLElement	The related input element placed with the string with CSS selector or HTMLElement.
3)	scrollToInput	boolean	It is used to scroll viewport (page-content) of input, whenever picker is opened.
4)	inputReadOnly	boolean	Used to set the "readonly" attribute on specified input.
5)	convertToPopover	boolean	It is used to convert the picker modal to Popover on large screens like iPad.
6)	onlyOnPopover	boolean	You can open the picker in Popover by enabling it.
7)	cssClass	string	To picker modal, you can use additional CSS class name.
8)	closeByOutsideClick	boolean	You can close the picker by clicking outside of picker or input element by enabling the method.
9)	toolbar	boolean	It is used to enable the picker modal toolbar.
10)	toolbarCloseText	string	Used for Done/Close toolbar button.
11)	toolbarTemplate	string	It is toolbar HTML Template, by default it is HTML string with the following template: {{closeText}}

Specific Picker Parameters

Following is a list of some specific picker parameters:

Index	Parameter	Type	Description
1)	rotateEffect	boolean	It enables 3D rotate effect in picker.
2)	momentumRatio	number	When you release picker after fast touch and move, it produces more momentum.
3)	updateValuesOnMomentum	boolean	Used to update pickers and input values during momentum.
4)	updateValuesOnTouchmove	boolean	Used to update pickers and input values during touch move.
5)	value	array	The array has its initial values and also each array item represents the value of related column.
6)	formatValue	function (p, values, displayValues)	The function is used to format the input value, and it should return new/formatted string value. The values and displayValues are array of related column.
7)	cols	array	Every array item represents an object with column parameters.

Picker Parameter Callbacks

Following is a list of callback functions available in pickers:

Index	Callbacks	Type	Description
1)	onChange	function (p, values, displayValues)	The callback function will be executed whenever the picker value changed and the values and displayValues are arrays of related column.
2)	onOpen	function (p)	The callback function will be executed whenever picker is opened.
3)	onClose	function (p)	The callback function will be executed whenever picker is closed.

Column Parameters

When Picker is configured, we have to pass cols parameter. It is a represented as array, where each item is object with column parameters.

Index	Parameter	Type	Description
1)	values	array	You can specify the string columns values with an array.
2)	displayValues	array	It has array with string columns values and it will display value from values parameter, When it not specified.
3)	cssClass	string	The CSS class name used to set on column HTML container.
4)	textAlign	string	It is used to set text alignment of column values and it could be "left", "center" or "right".
5)	width	number	Width is calculated automatically, by default. If you need to fix column widths in picker with dependent columns that should be in px.
6)	divider	boolean	It is used for column that should be visual divider, it doesn't have any values.
7)	content	string	It is used to specified divider-column (divider:true) with content of the column.

Picker Properties

Following is a list of Picker properties:

Index	Property	Description
1)	myPicker.params	You can initialize passed parameters with object.
2)	myPicker.value	The selected value for each column is represented by an array of item.
3)	myPicker.displayValue	The selected display value for each column is represented by an array of item.
4)	myPicker.opened	When picker is opened, it sets to true value.
5)	myPicker.inline	When picker is inline, it sets to true value.
6)	myPicker.cols	The Picker columns has its own methods and properties.
7)	myPicker.container	The Dom7 instance is used for HTML container.

Picker Methods

Following is a list of some useful methods of picker variable.

Index	Method	Description
1)	myPicker.setValue(values, duration)	Use to set new picker value. The values are in array where each item represents value for each column. Duration: It is transition duration in ms.
2)	myPicker.open()	Use to open Picker.
3)	myPicker.close()	Use to close Picker.
4)	myPicker.destroy()	Use to destroy Picker instance and remove all events.

Types of Pickers

There are mainly 5 types of pickers:

Picker With Single Value
Two Values and 3D-Rotate Effect
Dependent Values
Custom Toolbar
Inline Picker / Date-time

Index	Picker	Description
1)	Picker With Single Value	It is a powerful component that allows you to pick any values from list.
2)	Two Values and 3D-Rotate Effect	In the picker you can use for 3D rotate effect.
3)	Dependent Values	Values are dependent on each other for specified element.
4)	Custom Toolbar	You can use one or more picker on single page for customize.
5)	Inline Picker / Date-time	You can select number of values in the inline picker.Like date has date, month, year and time has hours, minutes, seconds.