MUI调用城市和时间控件

最新推荐文章于 2023-05-06 15:53:05 发布

杨葱儿

最新推荐文章于 2023-05-06 15:53:05 发布

阅读量211

点赞数

分类专栏： MUI

本文链接：https://blog.csdn.net/weixin_44285250/article/details/87939384

版权

MUI 专栏收录该内容

14 篇文章 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);