mui 時間選擇器和上傳圖片

時間 2019-12-09

標籤 mui 時間選擇器上傳圖片简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>編輯店鋪信息</title>
<link href="../css/mui.picker.min.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<script src="../js/mui.picker.min.js"></script>
<script src="../js/mui.poppicker.js"></script>

</script>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style>

</style>
</head>
<body class="d_bg_fff">

<header id="backbtn" class="mui-bar2 mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">編輯店鋪信息</h1>
</header>


<div class="mui-content">


<div class="d_pin_fenge"></div>

<div class="d_up_list w96 d_kuang fo">
<div class="d_dian_lil fl">
<i class="iconfont icon-shijian"></i>
<span class="">店鋪營業時間</span>
</div>
<div class="time fr">
<input name="start" type="hidden" id="start" value="">
<button id='demo2' class="btn mui-btn mui-btn-block" style="text-align: right;padding-left: 0;margin-left: 0;">請選擇開始時間
<i class="iconfont icon-arrow-down color_999 lsy-font-size-12"></i>
</button>
</div>
</div>


<div class="d_up_list w96 d_kuang fo">
<div class="d_dian_lil fl">
<i class="iconfont icon-shijian1"></i>
<span class="">店鋪打烊時間</span>
</div>
<div class="time fr">
<input name="end" type="hidden" id="end" value="">
<button id='demo3' class="btn mui-btn mui-btn-block" style="text-align: right;padding-left: 0;margin-left: 0;">請選擇打烊時間
<i class="iconfont icon-arrow-down color_999 lsy-font-size-12"></i>
</button>
</div>
</div>
<div class="d_pin_fenge"></div>
<div class="d_dian_li fo w96 lsy_dian_item">
<div class="d_dian_lil">
<i class="iconfont icon-take-photo"></i>
<span class="">店鋪主圖</span>
<span class="lsy-font-size-12 lsy_dian_span">(建議上傳寬710×高240，大小不超過2M)</span>
</div>

<div id="feedback" class="mui-page-content gz_question feedback">
<div id='image-list' class="row image-list">

</div>

</div>
</div>
<div class="d_pin_fenge"></div>

<div class="d_dian_li fo w96 lsy_dian_item">
<div class="d_dian_lil">
<i class="iconfont icon-dianpuicon"></i>
<span class="">商家實景</span>
<span class="lsy-font-size-12 lsy_dian_span">(最多上傳9張哦)</span>
</div>

<div id="feedback" class="mui-page-content gz_question feedback">
<div id='image-list-two' class="row image-list">

</div>

</div>
</div>

</div>


<link rel="stylesheet" type="text/css" href="../css/feedback-page.css"/>
<script src="../js/feedback-page.js"></script>
<script src="../js/feedback-pagetwo.js"></script>

<script>
(function($, doc) {
var _getParam = function(obj, param) {
return obj[param] || '';
};
var end1 = "";
// 出生年月
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var demo2 = document.getElementById('demo2');
var demo3 = document.getElementById('demo3');
// 開始時間
demo2.addEventListener('tap', function() {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
var picker = new $.DtPicker({
type: "time",
//type: "hour", //設置日曆初始化
beginYear: 2019, //設置開始日期
endYear:2099
//endDate: new Date //設置結束日期
});
picker.show(function(rs) {
/*
* rs.value 拼合後的 value
* rs.text 拼合後的 text
* rs.y 年，能夠經過 rs.y.vaue 和 rs.y.text 獲取值和文本
* rs.m 月，用法同年
* rs.d 日，用法同年
* rs.h 時，用法同年
* rs.i 分（minutes 的第二個字母），用法同年
*/
demo2.innerText = rs.text;
var endDate1 = new Date(rs.text+":00");
end1 = endDate1.getTime();
start = rs.text;
/*
* 返回 false 能夠阻止選擇框的關閉
* return false;
*/
/*
* 釋放組件資源，釋放後將將不能再操做組件
* 一般狀況下，不須要示放組件，new DtPicker(options) 後，能夠一直使用。
* 當前示例，由於內容較多，如不進行資原釋放，在某些設備上會較慢。
* 因此每次用完便當即調用 dispose 進行釋放，下次用時再建立新實例。
*/
picker.dispose();
});
}, false);

// 結束時間
demo3.addEventListener('tap', function() {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
var picker = new $.DtPicker({
type: "datetime",
//type: "hour", //設置日曆初始化
beginYear: 2019, //設置開始日期
endYear:2099
// endDate: new Date //設置結束日期
});
picker.show(function(rs) {
/*
* rs.value 拼合後的 value
* rs.text 拼合後的 text
* rs.y 年，能夠經過 rs.y.vaue 和 rs.y.text 獲取值和文本
* rs.m 月，用法同年
* rs.d 日，用法同年
* rs.h 時，用法同年
* rs.i 分（minutes 的第二個字母），用法同年
*/
demo3.innerText = rs.text;
var endDate = new Date(rs.text+":00");
var end2 = endDate.getTime();
if(end2<=end1){
mui.toast("結束時間必須晚於開始時間");
}
end = rs.text;
/*
* 返回 false 能夠阻止選擇框的關閉
* return false;
*/
/*
* 釋放組件資源，釋放後將將不能再操做組件
* 一般狀況下，不須要示放組件，new DtPicker(options) 後，能夠一直使用。
* 當前示例，由於內容較多，如不進行資原釋放，在某些設備上會較慢。
* 因此每次用完便當即調用 dispose 進行釋放，下次用時再建立新實例。
*/
picker.dispose();
});
}, false);
})(mui, document);
</script>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。