html5 plus pickDate和pickTime,mui日期和时间选择器

时间:2020-09-08 发布者: 访问量:3547

mui datePicker

html5 plus用js封装了对安卓和IOS底层日历和时钟的调用,pickDate和pickTime,由于是封装的,直接调用的底层的接口,所以,在UI方面,不同的系统的手机显示可能不同,优点是执行速度快。这里记下使用方法:

html代码:
1 <div class="mui-content">
2     <div style="padding:15px;">
3         <button id='pickDateBtn' type="button" class="mui-btn">选择日期</button>
4     </div>
5     <div style="padding:15px;">
6         <button id='pickTimeBtn' type="button" class="mui-btn">选择时间</button>
7     </div>
8 </div>
JavaScript代码:
01 //日期选择器
02 document.getElementById("pickDateBtn").addEventListener('tap', function() {
03     var dDate = new Date();
04     //设置当前日期(不设置默认当前日期)
05     dDate.setFullYear(2016, 7, 16);
06     var minDate = new Date();
07     //最小时间
08     minDate.setFullYear(2010, 0, 1);
09     var maxDate = new Date();
10     //最大时间
11     maxDate.setFullYear(2016, 11, 31);
12     plus.nativeUI.pickDate(function(e) {
13         var d = e.date;
14         mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
15     }, function(e) {
16         mui.toast("您没有选择日期");
17     }, {
18         title: '请选择日期',
19         date: dDate,
20         minDate: minDate,
21         maxDate: maxDate
22     });
23 });
24 //时间选择器
25 document.getElementById("pickTimeBtn").addEventListener('tap', function() {
26     var dTime = new Date();
27     //设置默认时间
28     dTime.setHours(6, 0);
29     plus.nativeUI.pickTime(function(e) {
30         var d = e.date;
31         mui.toast("您选择的时间是:" + d.getHours() + ":" + d.getMinutes());
32     }, function(e) {
33         mui.toast("您没有选择时间");
34     }, {
35         title: "请选择时间",
36         is24Hour: true,
37         time: dTime
38     });
39 });
另外,记下js获取当前时间
01 var myDate = new Date();
02 myDate.getYear();        //获取当前年份(2位)
03 myDate.getFullYear();    //获取完整的年份(4位,1970-????)
04 myDate.getMonth();       //获取当前月份(0-11,0代表1月)
05 myDate.getDate();        //获取当前日(1-31)
06 myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
07 myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
08 myDate.getHours();       //获取当前小时数(0-23)
09 myDate.getMinutes();     //获取当前分钟数(0-59)
10 myDate.getSeconds();     //获取当前秒数(0-59)
11 myDate.getMilliseconds();    //获取当前毫秒数(0-999)
12 myDate.toLocaleDateString();     //获取当前日期
13 var mytime=myDate.toLocaleTimeString();     //获取当前时间
14 myDate.toLocaleString( );        //获取日期与时间
发布于
  用户评论
    生活编程