开发的一个简单的移动端时间选择器，支持多种主题，现在来共享一下。
Github地址：https://github.com/IronPans/LazyPicker
效果图：
你也可以扫描二维码用手机体验：
1.2版本体验：
如果你使用PC浏览器，那么你需要切换到手机模式才可使用。
步骤：按F12或鼠标右键--点击检查，再点击控制台左上角的手机模式按钮即可。
地址：点这里
使用方法
引入CSS和JavaScript脚本：
<link rel="stylesheet" href="lazyPicker.min.css" /> <script src="lazyPicker.min.js"></script>
简单的表单（input）
<input type="text" class="date-picker" placeholder="选择日期" />
初始化时间选择器
var picker = new LazyPicker(‘.date-picker‘);
这里的class可自定义，不过要对应你要将其设置为时间选择器的input的class。
可选参数
LazyPicker构造函数可设置第二个参数，为配置对象，可设参数说明：
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，分别表示年、月、日、年-月-日
}
1.2版本新增功能
data: // 自定义选择项，JSON格式 type: // 风格，暂时支持1,2，默认是1，当设置为2时，风格可扫描二维码查看第五个（也就是orange颜色那个，会有些许差别）
data的JSON格式说明：
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的值。
如果你发现Bug或者有更好的建议，强烈恳求在下方的评论区评论告知，你们的支持，才是LazyPicker改善之道。
时间： 2024-10-13 16:13:03