The use and comparison of the dtpicker of the pickdate and MUI of the mobile-time control html5+

This article will describe the contents of the two mobile-side time Controls html5+ Pickdate and MUI dtpicker,api This article no longer repeat, only from the actual application process encountered in the analysis and comparison of the problems and the use of methods summarized. Comparative analysis:

1, html5+ 's pickdate http://www.dcloud.io/docs/api/zh_cn/nativeui.html#plus.nativeUI.pickDate

Advantages: Easy to read documents, clear parameters, feel better performance than MUI DTPicker
Disadvantage: The choice of year and day Pickdate and the choice of time and seconds Picktime is separate, need to choose two times

2. MUI's DTPicker http://dev.dcloud.net.cn/mui/ui/#dtpicker

Advantage: You can select the date and time of day and minute, the control content is a bit richer
Disadvantages:

• The document is slightly unclear, such as setting the initial Value section (the default is to get the current time). The value can be set.

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

• Data loading is not very smooth

• This MUI control requires a separate reference to JS and CSS files, not included in the Mui.js and mui.css scopes. For reference files, you can create a new Hello MUI-based mobile project with Hbuilder, with cases and files that need to be referenced.

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

  Usage Summary:

  1, html5+ 's pickdate

  //In this example $this. val () = ' 2018-6-27 13:35 ' is the main setting for several parameters in this format, the documentation is clear, others are determined according to the requirements//Select Datefunction pickdate($this){varCurd= New Date();varMind= New Date();varMaxd= New Date(); Mind.setFullYear(1980, 0, 1);Maxd.setFullYear(2036,  One,  to);varCurdatearr= $this.Val().Split("')[0].Split('-');varCurtimearr= $this.Val().Split("')[1].Split(': ');if(Curdatearr){    Curd.setFullYear(curdatearr[0],curdatearr[1]-1,curdatearr[2]);}Plus.Nativeui.pickdate(function(e){    varD=e.Date;    $this.Val(D.getFullYear()+"-"+Prezero((D.GetMonth()+1),2)+"-"+Prezero(D.getDate(),2));    Picktime($this,Curtimearr);},function(e){    Console.Log("Date not selected:"+e.message);},{    Date:Curd,    MaxDate:Maxd,    MinDate:Mind,    title: ' Please select a date ',    PopOver: {Top: -, Left: -,width: $,Height: $,}});}//Select timefunction Picktime($this,Curtimearr){varT= New Date();T.sethours(curtimearr[0],curtimearr[1]);Plus.Nativeui.Picktime(function(e){    varD=e.Date;    $this.Val($this.Val()+"'+Prezero(D.getHours(),2)+":"+Prezero(D.getminutes(),2));},function(e){    Console.Log("Time not selected:"+e.message);},{     Time:T,    Is24hour:true,    title: ' Please choose Time ',    PopOver: {Top: -, Left: -,width: $,Height: $,}});}

  2, MUI's DTPicker

  function pickerdate($this){varMind= New Date();varMaxd= New Date(); Mind.setFullYear(1980, 0, 1);Maxd.setFullYear(2036,  One,  to);varDTPicker= 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);});}

The use and comparison of the dtpicker of the pickdate and MUI of the mobile-time control html5+