picker

picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。

picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层

{% highlight html %} {% endhighlight %}

关闭picker

在任何元素上加上一个 .close-picker 类，点击它就会关闭 picker。

你也可以通过调用 $(".picker").picker("close") 或者 $.closeModal(".picker-modal.modal-in") 来关闭。

picker参数

你可以通过设置 toolbarTemplate 参数来自定义工具栏模板。在 cols 参数中可以传入多列值。

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

\ \

请选择称呼

', cols: [ { textAlign: 'center', values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王'] //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....] }, { textAlign: 'center', values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby'] }, { textAlign: 'center', values: ['先生', '小姐'] } ] }); {% endhighlight %}

所有可用参数如下：

参数名	默认值	说明
toolbarTemplate	<header class="bar bar-nav"> <button class="button button-link pull-right close-picker">确定</button> <h1 class="title"></h1> </header>	工具栏的模板，可以自己定义。
value	input元素的value属性。多列默认值用空格隔开，如`<input value="钱明小姐">`。如果任一列默认值本身含空格(如‘ipad mini 2’),那就只能用JS方法调用模式传入`value`参数	为 picker 添加默认值，数组里每一项对应每一列默认值，如`["钱", "明", "小姐"]`
rotateEffect	false	是否启用3D效果，启用3D可能会影响性能
toolbar	true	是否显示工具栏
inputReadOnly	true	是否会在input上添加一个 readonly 属性
cssClass	undefined	为 picker 容器增加额外的类，可以用来自定义样式
onOpen	undefined	自定义 picker 打开时的触发动作
onClose	undefined	自定义 picker 关闭时的触发动作
formatValue	undefined	自定义方法，用来控制如何显示picker的选中值，`formatValue: function (picker, value, displayValue){}`，value, displayValue为数组，长度等于cols长度

picker方法

你可以通过 $(".picker").picker("method", args1, args2...) 的方式来调用相关的方法。

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

所有可用方法如下：

方法名	参数说明	方法说明
open	无	打开picker
close	无	关闭picker
setValue	一个字符串数组，其中每个字符串对应每一列	设置值

日期时间选择器

日期时间选择器是一个定制的picker，因此他的用法和picker完全一致。打开picker的默认值是当前时间，可以通过value参数指定

datetime-picker 定制了 onChange 和 cols 参数，请不要设置这两个参数。

{% highlight html %} {% endhighlight %}

如果你只想选择日期，请使用日历