代码拉取完成，页面将自动刷新
同步操作将从 慕云枫/layPicker 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,maximum-scale=1">
<title>H5移动端选择器</title>
<link rel="stylesheet" href="css/lay-picker.css" />
</head>
<style>
#app{
padding: 20px;
}
#app>div{
margin-bottom: 10px;
}
input{
border: 1px solid #1E90FF;
border-radius: 4px;
height: 30px;
line-height: 30px;
outline: none;
min-width: 200px;
padding-left: 10px;
}
input:hover,
input:focus{
border: 1px solid #1E90FF;
box-shadow: #1e90ff30 0 0 0 4px;
}
</style>
<body>
<div id="app">
<h2>日期选择器</h2>
<div>
选择年份：<input type="text" id="year" autocomplete='off'/>
</div>
<div>
选择年月：<input type="text" id="month" autocomplete='off'/>
</div>
<div>
选择日期：<input type="text" id="date" autocomplete='off'/>
</div>
<div>
时间到分：<input type="text" id="time" autocomplete='off'/>
</div>
<div>
时间到秒：<input type="text" id="time2" autocomplete='off'/>
</div>
<div>
日期时间：<input type="text" id="datetime" autocomplete='off'/>
</div>
<div>
日期时间到秒：<input type="text" id="datetime2" autocomplete='off'/>
</div>
<h2>地区级联选择</h2>
<div>
所在地区：<input type="text" id="addr" autocomplete='off'/>
</div>
<h2>其他说明</h2>
<div>
动态调整：<input type="text" id="trends" autocomplete='off'/>
</div>
<div>
指定字段：<input type="text" id="field" autocomplete='off'/>
</div>
<div>
圆角设置：<input type="text" id="radius" autocomplete='off' />
</div>
<div>
赋值设置：<input type="text" id="val" autocomplete='off'/>
</div>
<div style="margin: 20px 0;">
<a class="lay-picker-bottom-btn lay-picker-bottom-btn-confirm" style="width: 120px;text-align: center;" href="index-new.html">前往微信样式</a>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="js/lay-picker.js"></script>
<script>
//-----------------------------------------------------------------------------------------------------------------
// 【1】
//-----------------------------------------------------------------------------------------------------------------
// 选择年份
var date_obj = lay_picker_date.getDateTime();// 获取当前每个时间
layPicker.init({
elem: '#year', // 绑定元素
options: 'year', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
layPicker.setValue(index, [
{value: date_obj.year},
])
},
onSelect: function(result){
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#year").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择年月
layPicker.init({
elem: '#month', // 绑定元素
options: 'month', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
layPicker.setValue(index, [
{value: date_obj.year},
{value: date_obj.month},
])
},
onSelect: function(result){
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#month").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择日期
layPicker.init({
elem: '#date', // 绑定元素
options: 'date', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
layPicker.setValue(index, [ // 赋值，以位置类推
{value: date_obj.year},
{value: date_obj.month},
{value: date_obj.day},
])
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#date").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择时间
layPicker.init({
elem: '#time', // 绑定元素
options: 'time', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#time").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
var secondss = lay_picker_date.getSeconds();
// 选择时间-到秒
layPicker.init({
elem: '#time2', // 绑定元素
options: 'timesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#time2").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择日期时间
layPicker.init({
elem: '#datetime', // 绑定元素
options: 'datetime', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#datetime").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择日期时间到秒
layPicker.init({
elem: '#datetime2', // 绑定元素
options: 'datetimesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#datetime2").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 【2】
//-----------------------------------------------------------------------------------------------------------------
var addr_array = [{
name: '北京',
value: "110000",
},{
name: '广东',
value: "440000",
},
]
var addr_array_bj = [
{
name: '东城区',
value: "110001",
}, {
name: '西城区',
value: "110002",
}, {
name: '朝阳区',
value: "110003",
}, {
name: '丰台区',
value: "110004",
}, {
name: '海淀区',
value: "110005",
}, {
name: '房山区',
value: "110006",
}
];
var addr_array_gd = [
{
name: '东莞市',
value: "440301",
},{
name: '广州市',
value: "440100",
},{
name: '深圳市',
value: "440200",
},
]
var add_array_gd_sz = [
{
name: '罗湖区',
value: "440201",
}, {
name: '南山区',
value: "440202",
}, {
name: '福田区',
value: "440203",
}, {
name: '龙华新区',
value: "440204",
}, {
name: '龙岗区',
value: "440205",
}, {
name: '宝安区',
value: "440206",
}
]
var add_array_gd_dg = [
{
name: '寮步镇',
value: "440301",
}, {
name: '茶山镇',
value: "440302",
}, {
name: '长安镇',
value: "440303",
},
]
// 选择地区
layPicker.init({
elem: '#addr', // 绑定元素
data: [addr_array, addr_array_bj, []], // 列数值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
if(i == 0){
if(result[i].name == '北京'){
layPicker.setData(index, i, addr_array_bj);
}else if(result[i].name == '广东'){
layPicker.setData(index, i, addr_array_gd);
layPicker.setData(index, i+1, add_array_gd_dg);
}
}else if(i == 1){
if(result[i].name == '深圳市'){
layPicker.setData(index, i, add_array_gd_sz);
}else if(result[i].name == '东莞市'){
layPicker.setData(index, i, add_array_gd_dg);
}else{
layPicker.setData(index, i, []);
}
}
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
//结果处理后再显示
var text = [];
for(var i = 0; i < result.length; i++) {
text.push(result[i].name);
}
$("#addr").val(text.join('-'))
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 【3】
//-----------------------------------------------------------------------------------------------------------------
// 动态调整
layPicker.init({
elem: '#trends', // 绑定元素
data: [addr_array], // 列数值（使用动态这里可以不用占位）
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
if(i == 0){
if(result[i].name == '北京'){
layPicker.setDataTrends(index, i, addr_array_bj);
}else if(result[i].name == '广东'){
layPicker.setDataTrends(index, i, addr_array_gd);
layPicker.setDataTrends(index, i+1, add_array_gd_dg);
}
}else if(i == 1){
if(result[i].name == '深圳市'){
layPicker.setDataTrends(index, i, add_array_gd_sz);
}else if(result[i].name == '广州市'){
layPicker.setDataTrends(index, i, null);
}else if(result[i].name == '东莞市'){
layPicker.setDataTrends(index, i, add_array_gd_dg);
}
}
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
//结果处理后再显示
var text = [];
for(var i = 0; i < result.length; i++) {
text.push(result[i].name);
}
$("#trends").val(text.join('-'))
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
var field_arr = [
{
title: '张三',
id: 101,
},{
title: '李四',
id: 102,
},{
title: '王五',
id: 103,
},
]
// 指定字段
layPicker.init({
elem: '#field', // 绑定元素
data: [field_arr],
textField: 'title',
valueField: 'id',
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#field").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 圆角
layPicker.init({
elem: '#radius', // 绑定元素
data: [field_arr],
textField: 'title',
valueField: 'id',
radius: 15, // 默认无圆角，设置圆角值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#radius").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 赋值
var layIndex = layPicker.init({
elem: '#val', // 绑定元素
data: [field_arr],
textField: 'title',
valueField: 'id',
radius: 15, // 默认无圆角，设置圆角值
onSuccess: function(index, elem){ // 渲染成功回调
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#val").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
onShow: function(index){ // 点击显示回调
layPicker.setValue(index, [{id: 102}]);
},
})
// 删除指定
//layPicker.remove(layIndex);
// 删除所有
//layPicker.removeAll();
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
