标签:也有 技术分享 put ref strong lan 日期 onchange 可选参数
开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。
<link rel="stylesheet" href="lazyPicker.min.css" /> <script src="lazyPicker.min.js"></script>
<input type="text" class="date-picker" placeholder="选择日期" />
var picker = new LazyPicker(‘.date-picker‘);
class
可自定义,不过要对应你要将其设置为时间选择器的input
的class
。theme: , // 主题 green(墨绿) | black(纯黑) initDate: , // 设置初始年月日,格式YYYY-MM-DD或YYYY/MM/DD minDate: , // 设置最小年份,默认是1950 maxDate: , // 设置最大年份,默认是初始年份 + 20,如果initDate和maxDate同时存在,年份以maxDate为主。 onChange: function(data) { // 监听选择时间改变 // data返回一个对象,包含属性year、month、day、date,分别表示年、月、日、年-月-日 }
data: // 自定义选择项,JSON格式 type: // 风格,暂时支持1,2,默认是1,当设置为2时,风格可扫描二维码查看第五个(也就是orange颜色那个,会有些许差别)
var data = { "item": [{ /* 第一项 */ "id": 1, "name": "广东", /* name属性是必须的,id可选 */ "child": [{ /* 子项 */ "id": 101, "name": "广州", "child": [{ /* 子子项 */ "id": 3, "name": "天河区" }] }] }, { "id": 1, "name": "云南", "selected": true, /* 默认选项,当设置为true时,打开选择器的当前项是这个 */ "child": [{ "id": 1, "name": "昆明" }, { "id": 1, "name": "玉溪", "selected": true /* 默认选项 */ }, { "id": 1, "name": "丽江" }] }, { "id": 1, "name": "上海", "child": [{ "id": 1, "name": "上海" }] }], "itemName": "省-市-区" /* 选项头说明提示 */ };
onChange
方法返回的值data
也有所不同:[ [name,id],[name,id].....,name-name-name ]
name
)和id
,最后一项是用“-”连接的名称值字符串,也就是input
的值。标签:也有 技术分享 put ref strong lan 日期 onchange 可选参数
原文地址:http://www.cnblogs.com/IronPans/p/6134894.html