picker

Picker is a powerful component that allows you to create custom overlay pickers which looks like iOS native picker.

You should init a picker on an input element before you can use it.

Picker will use the value of input as default value. The default read value will be error if you have mutli cols, because picker don't know how to split one string to multi cols.Infact, Piker will use space to split the value of input, and set the them as the value of cols. If your input value is not split with space, you should set the default value with JavaScript.

{% highlight html %} {% endhighlight %}

close picker

Add .close-picker class to any link, and click it to close the picker

You can alose call $(".picker").picker("close") or $.closeModal(".picker-modal.modal-in") to close a picker。

Params

See the examplse:

{% highlight js %} $("#picker-name").picker({ toolbarTemplate: '

\ \

Please Choose

', cols: [ { textAlign: 'center', values: ['Mr', 'Ms'] // displayValues: [.....] the value to display, if not specified, it will display the values }, { textAlign: 'center', values: ['Brook', 'Churchill', 'Hill', 'Field', 'Green', 'Baby'] } ] }); {% endhighlight %}

Let's look on list of all available parameters:

Param	Default	Description
toolbarTemplate	<header class="bar bar-nav"> <button class="button button-link pull-right close-picker">OK</button> <h1 class="title"></h1> </header>	Toolbar HTML Template
value		Array with initial values. Each array item represents value of related column. Picker will auto read value from input if not set.
rotateEffect	false	Enables 3D rotate effect
toolbar	true	Enables picker modal toolbar
inputReadOnly	true	Sets "readonly" attribute on specified input
cssClass	undefined	Additional CSS class name to be set on picker modal

Column parameters

When we configure Picker we need to pass cols parameter. It is an array where each item is object with column parameters:

Parameter	Type	Default	Description
values	array		Array with string columns values
displayValues	array		Array with string columns values that will be displayed in Picker. If not specified, it will display values from values parameter
cssClass	string		Additional CSS class name to be set on column HTML container
textAlign	string		Text alignment of column values, could be "left", "center" or "right"
width	number		Column width in px. Useful if you need to fix column widths in picker with dependent columns. By default, calculated automatically
divider	boolean	false	Defines column that should be used as a visual divider, that doesn't have any values
content	string		Should be specified for divider-column (`divider:true`) with content of the column
Callbacks
onChange	function (p, value, displayValue)		Callback function that will be executed when column value changed. value and displayValue represent current column value and displayValue

picker方法

You can call methods of pickers like this: $(".picker").picker("method", args1, args2...)

{% highlight js %} $("#picker-name").picker("open"); $("#picker-name").picker("close"); $("#picker-name").picker("setValue", ["2012", "12", "12"]); {% endhighlight %}

All aviable methods:

Methods
myPicker.setValue(values, duration)	Set new picker value. values is array where each item represents value for each column. duration - transition duration in ms
myPicker.open()	Open Picker
myPicker.close()	Close Picker
myPicker.destroy()	Destroy Picker instance and remove all events

Datetime Picker

Datetime picker is a customed Picker. So, it'is usage is same to Picker.

datetime-picker customed onChange and cols, don't change these two param please.

datetime-picker will read the value of input as init value, but the format must be yyyy-mm-dd HH:MM, such as 2015-12-12 08:30

{% highlight html %} {% endhighlight %}

If you only want to select date, use Calendar please.