标签:移动端 end IV 下载 缺点 范围 set www 基础
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