MUI 移动端时间选择器

MUI 时间段的选择

1.效果展示

2.html 部分

按钮部分html

<ul class="mui-table-view" style="height: 40px;"> <li class="mui-table-view-cell mui-collapse" > <a class="mui-navigate-right" href="#" style="top: -5px;">选择时间</a> <div class="mui-collapse-content"> <button type="button" id="startDateBtn" class="mui-btn mui-btn-link" style="right: auto;"> 开始时间 <span class="mui-icon mui-icon-forward"></span> <!-- 显示的时间 --> <label id ="showStartDate"></label> </button> <button type="button" id="endDateBtn" class="mui-btn mui-btn-link" style="left: auto;"> 结束时间 <span class="mui-icon mui-icon-forward"></span> <label id ="showEndDate"></label> </button> </div> </li> </ul>

3.js 部分

开始时间选择器的js，结束时间的选择器js是一样的

var startDate = null; //给时间选择器绑定点击监听事件 tap 为单击 document.getElementById("startDateBtn").addEventListener('tap', function() { var dDate = new Date(); //设置当前日期（不设置默认当前日期） //dDate.setFullYear(2012, 7, 16); var minDate = new Date(); //最小时间 minDate.setFullYear(2010, 0, 1); var maxDate = new Date(); //最大时间 maxDate.setFullYear(2050, 11, 31); //时间选择器组件 plus.nativeUI.pickDate(function(e) { var d = e.date; mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()); startDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); $j("#showStartDate").text(startDate); getDataList(); }, function(e) { mui.toast("您没有选择日期"); }, { title: '请选择日期', date: dDate, startDate :dDate, minDate: minDate, maxDate: maxDate }); });