<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);