Hbuilder MUI 下拉选择与时间选择器_hbuilder怎么设置年月日-CSDN博客

本文链接：https://blog.csdn.net/JoBo199501/article/details/86657187

本文详细介绍如何在HBuilder中使用mui库实现下拉选择框和时间选择器，包括引用必要文件、初始化选择器、设置数据源及显示回调函数。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引用

<link rel="stylesheet" href="../css/mui.picker.min.css" />
<script type="text/javascript" src="../js/mui.picker.min.js"></script>
//引用mui.picker 的css与js

2、 Hbuilder 下拉选择

	var specModel=new mui.PopPicker(); //初始化 picker
	var item=[
	     {text:测试1,value:0},
	     {text:测试2,value:1},
	     {text:测试3,value:2},
	] //data必须是text与value的。
	specModel.setData(item);
	specModel.show(function(itme){ 
	        //这里的item就是你选中的item
	        var specModelName=item.text;
	        var specModelValue=item.value;
	})
	//(*￣︶￣)  这样一个简单的下拉就完成了 自己按照自己项目需求分装item就行

3、Hbuilder 时间选择器

1.日期选择器
	var Date=new mui.DtPicker({type:'date'});
	Date.show(function(item){
	      //这里你可以用console 看看回调函数中的item的值 
	      console.log(Json.Stringify(item));
	      var endDate=item ;
	      var endDate=item.y.text + '/' + item.m.text + '/' + item.d.text;
	      //这两种都是可以的
	})
	2.日期时间选择器
		var Date=new mui.DtPicker({type:'datetime'});
		Date.show(function(item){
		      //改变一下type值就行 
		      console.log(Json.Stringify(item));
		      var endDate=item ;
		})