手机端时间转换html5,HTML5教程 移动端时间控件HTML5+的pickDate和MUI的dtpicker的使用与对比...

本篇教程探讨了HTML5教程 移动端时间控件HTML5+的pickDate和MUI的dtpicker的使用与对比，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

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);

});

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！