<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="//ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet" />
<link href="//ask.dcloud.net.cn/../css/mui.picker.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//ask.dcloud.net.cn/../css/mui.dtpicker.css" />
<link href="//ask.dcloud.net.cn/../css/mui.poppicker.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<span class="mui-icon mui-icon-back"></span>
<h1 class="mui-title">工单发起</h1>
</header>
<div class="mui-bar mui-bar-tab">
<div id="btn" style="">
<button class="mui-btn-blue" style="margin-right: 40px;width: 40%;margin-left: 12px;">确认</button>
<button class="mui-btn-danger" style="width: 40%;">取消</button>
</div>
</div>
<div id="" class="mui-content">
<div id="" class="mui-content-padded">
<form action="//ask.dcloud.net.cn/" method="post">
<table border="0" style="width:100%;text-align: center;">
<tr>
<td>
<label>工单名称</label>
</td>
<td>
<input type="text" id="name" style="width: 260px;" />
</td>
</tr>
<tr>
<td>
<label>当前时间</label>
</td>
<td>
<input type="text" id="nowtime" readonly="readonly" style="width: 260px;" />
</td>
</tr>
<tr>
<td>
<label>要求完成时间</label>
</td>
<td>
<!--
作者：861095330@qq.com
时间：2017-07-12
描述：
<input type="text" id="doneTime" data-options='{}' style="width: 260px;" />
-->
<button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script type="text/javascript">
(function($) {
window.onload = function() {
mui.plusReady(function() {
plus.screen.lockOrientation("portrait-primary");
preOnload();
});
}
var result = $('#result')[0];
var btns = $('.btn');
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
console.log("9999")
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
console.log(id)
var pp = new $.Picker();
var picker = new $.DtPicker(options);
picker.show(function(rs) {
result.innerText = '选择结果: ' rs.text;
/*
* 返回 false 可以阻止选择框的关闭
* return false;
*/
/*
* 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
*/
picker.dispose();
});
}, false);
});
//预加载
function preOnload() {
setName();
setTime();
//
/*document.getElementById("demo1").addEventListener('tap', function() {
var options={type:"date",beginYear:2016};
var picker = new mui.DtPicker(options);
picker.show(function(rs) {
//result.innerText = '选择结果: ' rs.text;
console.log(rs.text);
picker.dispose();
});
}, false);*/
}
//设置工单名称
function setName() {
document.getElementById("name").value = "【工单】" Date.parse(new Date());
}
function setTime() {
document.getElementById("nowtime").value = Date.parse(new Date());
}
})(mui);
</script>
</html>
8***@qq.com
- 发布：2017-07-12 17:17
- 更新：2019-04-25 15:23
- 阅读：3302
<script type="text/javascript" src="js/mui.poppicker.js"></script>
<script type="text/javascript" src="js/mui.picker.js"></script>
<link rel="stylesheet" href="css/mui.picker.min.css" />
<link rel="stylesheet" href="css/mui.poppicker.css" />需要引入上面四个东西，然后setoption的值必须是 [{value:"", key:""}] 这种数组包字典，你json转换要看是不是符合要求 否则都是错误
8***@qq.com (作者)
谢谢老哥，回头我试一下
2017-07-13 10:34