H5移动端选择器，layPicker移动端日期选择器_h5时间选择器,h5时间选择器资源-CSDN下载

共8个文件

js：3个

html：2个

css：2个

jquery

微信

html

需积分: 5 113 浏览量 2023-09-11 17:24:24 上传评论收藏 44KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

H5移动端自定义选择器.zip （8个子文件）

H5移动端自定义选择器

lay-picker.min.js 12KB

lay-picker.js 19KB

jquery-2.1.1.min.js 82KB

img

css

lay-picker.min.css 2KB

lay-picker.css 3KB

index.html 17KB

.project 991B

index-new.html 5KB

<!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: '2023'}, ]) }, 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){ // 渲染成功回调 },

评论收藏

内容反馈