码迷,mamicode.com
首页 > 移动开发 > 详细

移动端时间控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker 的使用与对比

时间:2018-06-12 21:36:20      阅读:1424      评论:0      收藏:0      [点我收藏+]

标签:移动端   end   IV   下载   缺点   范围   set   www   基础   

本文将介绍两种移动端的时间控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker,API中的内容此文不再赘述,仅从实际应用过程中的遇到的问题进行分析对比与使用方法总结。

对比分析:

1、HTML5+ 的 pickDate http://www.dcloud.io/docs/api/zh_cn/nativeui.html#plus.nativeUI.pickDate

优点:文档容易看,参数清晰,感觉上性能比mui的dtpicker要好一些
缺点:年月日的选择 pickDate 和时分秒的选择 pickTime 是分开的,需要选择两次

2、MUI 的 dtpicker http://dev.dcloud.net.cn/mui/ui/#dtpicker

优点:可以一次性选择年月日和时分秒,控件内容更丰富一点
缺点:

  • 文档稍有不清晰,比如说设置初始值部分(默认是获取当前时间)。设置value值即可。

    var dtpicker = new mui.DtPicker({
    "type": "date",
    "value":"1950-03-03 09:12"
    });
  • 数据加载不是很流畅
  • 这种mui控件,需要单独引用js和css文件,不包含在mui.js和mui.css范围内。关于引用文件的下载地址,可以通过hbuilder新建一个以hello mui为基础的移动端项目,里面就有案例和需要引用的文件。

    var dtpicker = new mui.DtPicker({
    "type": "date",
    "value":"1950-03-03 09:12"
    });

    使用总结:

    1、HTML5+ 的 pickDate

    //本例中  $this.val() = ‘2018-6-27 13:35‘  是这种格式的   主要是几个参数的设置,文档很清晰,其他根据要求来决定
    //选择日期
    function pickDate($this){
    var curD = new Date();
    var minD = new Date();
    var maxD = new Date();
    minD.setFullYear(1980, 0, 1);
    maxD.setFullYear(2036, 11, 31);
    
    var curDateArr = $this.val().split(‘ ‘)[0].split(‘-‘);
    var curTimeArr = $this.val().split(‘ ‘)[1].split(‘:‘);
    if(curDateArr) {
        curD.setFullYear(curDateArr[0],curDateArr[1]-1,curDateArr[2]);
    }
    plus.nativeUI.pickDate( function(e){
        var d=e.date;
    
        $this.val(d.getFullYear()+"-"+preZero((d.getMonth()+1),2)+"-"+preZero(d.getDate(),2));
        pickTime($this,curTimeArr);
    },function(e){
        console.log( "未选择日期:"+e.message );
    },{
        date: curD,
        maxDate: maxD,
        minDate: minD,
        title: ‘请选择日期‘,
        popover: {top:100,left:20,width:200,height:200,}
    });
    }
    //选择时间
    function pickTime($this,curTimeArr){
    var t = new Date();
    t.setHours(curTimeArr[0],curTimeArr[1]);
    plus.nativeUI.pickTime( function(e){
        var d=e.date;
        $this.val($this.val()+‘ ‘+preZero(d.getHours(),2)+":"+preZero(d.getMinutes(),2));
    },function(e){
        console.log( "未选择时间:"+e.message );
    },{
        time: t,
        is24Hour:true,
        title: ‘请选择时间‘,
        popover: {top:100,left:20,width:200,height:200,}
    });
    }

    2、MUI 的 dtpicker

    function pickerDate($this) {
    var minD = new Date();
    var maxD = new Date();
    minD.setFullYear(1980, 0, 1);
    maxD.setFullYear(2036, 11, 31);
    var dtPicker = new mui.DtPicker({
        type: ‘datetime‘,
        beginDate: minD,
        endDate: maxD,
        value: $this.val()
    });
    dtPicker.show(function (selectItems) {
        $this.val(selectItems.y.value + "-" + selectItems.m.value + "-" + selectItems.d.value + " " + selectItems.h.value + ":" + selectItems.m.value);
    });
    }

移动端时间控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker 的使用与对比

标签:移动端   end   IV   下载   缺点   范围   set   www   基础   

原文地址:https://www.cnblogs.com/chaoyueqi/p/9175087.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!