MUI调用城市和时间控件

深藏阁楼爱情的钟 2022-03-16 05:34 302阅读 0赞

<div class="mui-content">
    			<div class="listt">
    				<div class="mui-input-row" style="margin-top: 98px;">
    					<label style="width: 100px;">所在城市</label>
    					<div class="" style="width: 100%;height: 100%;position: relative;line-height: 36px;">
    						<div id="txt" style="width: 100%;height:30px;position: absolute;top: 0;left: 125px;">点击选择</div>
    						<button id='showCityPicker3' style=";position: absolute;top: 0;left:0;width: 100%;height: 30px;margin-top: 3px;opacity: 0;" class="mui-btn mui-btn-block" type='button'></button>
    					</div>
    				</div>
    				<div class="listo">
    					<div class="mui-input-row">
    						<label style="width: 100px;">开始时间</label>
    						<div class="" style="width: 100%;height: 100%;position: relative;line-height: 36px;">
    							<div id="begin" style="width: 100%;height:30px;position: absolute;top: 0;left: 125px;">点击选择</div>
    							<button id='' data-options='{"value":"2018-12-19 00:00","beginYear":2018,"endYear":2028}' class="btn mui-btn mui-btn-block" style=";position: absolute;top: 0;left:0;width: 100%;height: 30px;margin-top: 3px;opacity: 0;">选择日期 ...</button>
    						</div>
    					</div>
    				</div>
    				<div class="listo">
    					<div class="mui-input-row">
    						<label style="width: 100px;">结束时间</label>
    						<div class="" style="width: 100%;height: 100%;position: relative;line-height: 36px;">
    							<div id="end" style="width: 100%;height:30px;position: absolute;top: 0;left: 125px;">点击选择</div>
    							<button id='' data-options='{"value":"2018-12-19 10:10","beginYear":2018,"endYear":2028}' class="btns mui-btn mui-btn-block" style=";position: absolute;top: 0;left:0;width: 100%;height: 30px;margin-top: 3px;opacity: 0;">选择日期 ...</button>
    						</div>
    					</div>
    				</div>
    				<div class="listo">
    					<div class="mui-input-row" style="border: none;">
    						<label style="width: 100px;">出差事由</label>
    					</div>
    					<textarea class="reason" name="" rows="" cols="" placeholder="请输入内容..." style="width: 100%;height: 200px;border: none;padding:0 20px;font-size: 15px;"></textarea>
    				</div>
    				<div style="padding-left: 10px;">
    					<img src="img/left_positioning@3x.png" style="width: 9px;height: 11px;margin-right: 5px;" />
    					<span class="geolocation" style="font-size: 12px;color: #aaa;">获取定位</span>
    				</div>
    			</div>
    		</div>

//目的地
    (function($, doc) {
    	$.init();
    	
    	$.ready(function() {
    		var _getParam = function(obj, param) {
    			return obj[param] || '';
    		};
    		var cityPicker3 = new $.PopPicker({
    			layer: 3
    		});
    		cityPicker3.setData(cityData3);
    		var showCityPickerButton = doc.getElementById('showCityPicker3');
    		var txt = doc.getElementById('txt');
    		showCityPickerButton.addEventListener('tap', function(event) {
    			cityPicker3.show(function(items) {
    				txt.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
    				//返回 false 可以阻止选择框的关闭
    				//return false;
    			});
    		}, false);
    	});
    })(mui, document);
    //开始时间
    (function($) {
    	$.init();
    	var begin = $('#begin')[0];
    	var btns = $('.btn');
    	btns.each(function(i, btn) {
    		btn.addEventListener('tap', function() {
    			var _self = this;
    			if(_self.picker) {
    				_self.picker.show(function(rs) {
    					begin.innerText = rs.text;
    					_self.picker.dispose();
    					_self.picker = null;
    				});
    			} else {
    				var optionsJson = this.getAttribute('data-options') || '{}';
    				var options = JSON.parse(optionsJson);
    				var id = this.getAttribute('id');
    				_self.picker = new $.DtPicker(options);
    				_self.picker.show(function(rs) {
    					begin.innerText = rs.text;
    					_self.picker.dispose();
    					_self.picker = null;
    				});
    			}
    		}, false);
    	});
    })(mui);
    //结束时间
    (function($) {
    	$.init();
    	var end = $('#end')[0];
    	var btn = $('.btns');
    	btn.each(function(i, btns) {
    		btns.addEventListener('tap', function() {
    			var _self = this;
    			if(_self.picker) {
    				_self.picker.show(function(rs) {
    					end.innerText = rs.text;
    					_self.picker.dispose();
    					_self.picker = null;
    				});
    			} else {
    				var optionsJson = this.getAttribute('data-options') || '{}';
    				var options = JSON.parse(optionsJson);
    				var id = this.getAttribute('id');
    				_self.picker = new $.DtPicker(options);
    				_self.picker.show(function(rs) {
    					end.innerText = rs.text;
    					_self.picker.dispose();
    					_self.picker = null;
    				});
    			}
    		}, false);
    	});
    })(mui);

发表评论取消回复

表情：

评论列表（有 0 条评论，302人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现城市三级联动

引言对于电商行业的开发者来讲，城市三级联动可以说是老伙伴了，不用说了，收货地址肯定会涉及到城市的三级联动，本小节我们来看一个简单的城市三级联动的例子，代码很简单，只...

Love The Way You Lie/ 2024年04月17日 15:52/ 0 赞/ 112 阅读

相关 jquery城市选择控件_jQuery选择插件

jquery城市选择控件 ![jQuery Chosen Plugin][] Without a doubt, my least favorite form element

╰+攻爆jí腚メ/ 2023年02月21日 14:25/ 0 赞/ 148 阅读

相关 layDate时间控件

给大家介绍一款超好用的控件layDate控件，layui.laydate 下载类库之后直接使用，在这里我先展示效果图： ![在这里插入图片描述][watermark_t

た入场券/ 2022年11月05日 14:51/ 0 赞/ 238 阅读

相关 MUI-图片轮播控件

图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；在MUI框架中针对图片的轮播做了一个简单的封装。 DOM结构默认不支持循环播放，DOM

桃扇骨/ 2022年08月09日 13:43/ 0 赞/ 264 阅读

相关 Mui picker修改时间控件默认选中时间，开始时间，结束时间，及日期格式

一通过官网文档，看构造函数里面有开始时间，结束时间和日期格式的参数，如下： ![20170921173751599][] 于是在标签上进行尝试，data-options相

你的名字/ 2022年06月08日 09:47/ 0 赞/ 455 阅读

相关小程序自定义城市选择控件

效果图： ![SouthEast][] 介绍：对于微信小程序，微信提供了一个滚动选择器和自身的城市滚动选择器，但是开发中难免存在一些自定义的样式，这时候就要

傷城~/ 2022年06月01日 01:11/ 0 赞/ 426 阅读

相关 MUI框架-03-自定义MUI控件样式

MUI框架-03-自定义MUI控件样式开发请查阅：官方文档：[http://dev.dcloud.net.cn/mui/ui/][http_dev.dcloud.

àì夳堔傛蜴生んèń/ 2022年05月10日 00:26/ 0 赞/ 276 阅读

相关 js城市树形控件

<td class="width-15 active"><label class="pull-right">省/市/区：</label></td> <td c

╰+攻爆jí腚メ/ 2022年05月04日 14:28/ 0 赞/ 309 阅读

相关 MUI调用城市和时间控件

<div class="mui-content"> <div class="listt"> <div class="mui-input-r

深藏阁楼爱情的钟/ 2022年03月16日 05:34/ 0 赞/ 303 阅读

相关时间控件

页面，在body下面加这块 <body> <script> sd\_body\_init(); </script> 页面里： <td align="

红太狼/ 2021年09月10日 07:00/ 0 赞/ 1143 阅读