mobiscroll选择日期时间插件

最新推荐文章于 2025-05-18 16:49:17 发布

酸奶吖！

最新推荐文章于 2025-05-18 16:49:17 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏： vue'

本文链接：https://blog.youkuaiyun.com/qq_45375420/article/details/103631662

vue' 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用mobiscroll这个强大的插件来优化日期和时间的选择体验，详细阐述了其安装、配置及在项目中的应用，帮助开发者提升用户界面的交互性。

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

<link rel="stylesheet" href="../css/mobiscroll.custom.min.css">

	<script src="../js/jquery.min.js"></script>
	<script src="../js/mobiscroll.custom.min.js"></script>
	<script src="../js/mui.js"></script>
	<script src="../js/vue.min.js"></script>

<script type="text/javascript">
			mui.init();
			var theme = "ios";
			var mode = "scroller";
			var display = "bottom";
			var lang="zh";
			var dateFormat = "yyyy年mm月";
			var dateOrder = 'yymm';
			var rows =3;
			var date = new Date();
			var year = date .getFullYear(); //获取完整的年份(4位)
			var month = date .getMonth()+1; //获取当前月份(0-11,0代表1月)
			var endYear = year + 10;//结束年份
			mui.plusReady(function(){
				var session_id = plus.storage.getItem('session_id');
				var vue = new Vue({
					el: '#bill',
					data: {
					},
					methods: {
						//back
						back:function(){
							mui.back();
						},
						//点击选择时间
						presenttime:function(){
							var that = this;
							$('#timebilldata').mobiscroll().date({
							   theme: theme,
								mode: mode,
								display: display,
								lang: lang,
								dateFormat: dateFormat,
								dateOrder: dateOrder,
								rows:rows,
								endYear:endYear,
								onSelect: function (textVale, inst) { //选中时触发事件
									   that.yeartime = textVale;
									   console.log(JSON.stringify(that.yeartime))
									 },
								// onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
								// 	 console.log("textVale--" +'取消了');
								// 	 // console.log(this.id);//this表示调用该插件的对象
							 //        }
							});
						},
					},
					});
					
				
				})
		</script>