代码拉取完成，页面将自动刷新
同步操作将从 慕云枫/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.min.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="val" autocomplete='off'/>
</div>
<div>
自定义html：<input type="text" id="custom" 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.html">前往旧版样式</a>
</div>
<div>
最小最大日期限制：<input type="text" id="minMaxDate" autocomplete='off'/>
</div>
<div>
最小最大时间限制：<input type="text" id="minMaxTime" autocomplete='off'/>
</div>
<div>
最小最大时间日期限制：<input type="text" id="minMaxDateTime" autocomplete='off'/>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="js/lay-picker.min.js"></script>
<script>
//-----------------------------------------------------------------------------------------------------------------
var date_obj = lay_picker_date.getDateTime();
var years = lay_picker_date.getYear();
var months = lay_picker_date.getMonth(
[
{value: date_obj.year},
]
);
// 选择年月
layPicker.init({
elem: '#year', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
options: 'year', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
title: '选择器标题',
onSuccess: function(index, elem){ // 渲染成功回调
},
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', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
title: '选择器标题',
radius: 15,
data: [years, months], // 列数值
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', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
radius: 15,
options: 'date', // 设置为日期选择器（日期选择器可设置：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){ // 点击确认回调
$("#date").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择日期
layPicker.init({
elem: '#custom', // 绑定元素
type: 3, // 类型2微信效果， 类型3自定义，不设置则默认效果
radius: 15,
content: '<div>慕云枫同学是后端开发人员</div>',
onSuccess: function(index, elem){ // 渲染成功回调
},
onShade: function(index){ // 点击遮罩回调
},
})
var field_arr = [
{
title: '张三',
id: 101,
},{
title: '李四',
id: 102,
},{
title: '王五',
id: 103,
},
]
//-----------------------------------------------------------------------------------------------------------------
// 赋值
var layIndex = layPicker.init({
elem: '#val', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
data: [field_arr],
textField: 'title',
valueField: 'id',
btns: ['重置', '确认'], // 自定义按钮文字
//search: true, // 是否开启搜索【注：只对单列有效】
search: '请输入关键字搜索', // 开启搜索，并替换提示
title: '可搜索内容',
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.init({
elem: '#minMaxDate', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
radius: 15,
minDate: '2022-08-02',
maxDate: '2023-11-05',
options: 'date', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
// 默认值设置（赋值）
layPicker.setValue(index, [
{value: 2023},
{value: 12},
{value: 02},
])
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#minMaxDate").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择最小最大日期
layPicker.init({
elem: '#minMaxTime', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
radius: 15,
minDate: '14:39:11',
maxDate: '18:02:12',
options: 'timesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
// 默认值设置（赋值）
layPicker.setValue(index, [
{value: 15},
{value: 01},
{value: 10},
])
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#minMaxTime").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
//-----------------------------------------------------------------------------------------------------------------
// 选择最小最大日期时间
layPicker.init({
elem: '#minMaxDateTime', // 绑定元素
type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
radius: 15,
minDate: '2022-08-02 14:39:11',
maxDate: '2023-11-05 18:02:12',
options: 'datetimesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
onSuccess: function(index, elem){ // 渲染成功回调
// 默认值设置（赋值）
layPicker.setValue(index, [
{value: 2023},
{value: 12},
{value: 02},
{value: 15},
{value: 01},
{value: 10},
])
},
onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
console.log('onSelect --- ', JSON.stringify(result))
},
onConfirm: function(index, value, result){ // 点击确认回调
$("#minMaxDateTime").val(value)
console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
},
onCancel: function(index){ // 点击取消回调
},
onShade: function(index){ // 点击遮罩回调
},
})
// 删除指定
//layPicker.remove(layIndex);
// 删除所有
//layPicker.removeAll();
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
