MUI官方的日期选择器演示代码,选择后的日期值是显示在
<div id='result' class="ui-alert"></div>
里面,但实际使用中,应该是点击按钮弹出日期选择器,直接赋值到 input 表单的 value 中再提交表单。
表单代码
<input type="text" value="发布时间" />
选择后
<input type="text" value="2018-07-07 08:08" />
官方论坛中提到可以通过DOM获取input, 然后在picker show的时候赋过去:
dtpicker.show(function(rs) {
document.getElementById('addtime').value = rs.text;
});
经过测试,成功赋值到value中,以下为MUI完整代码,添加的部分为第12行、23行:
<script>
(function($) {
$.init();
var result = $('#result')[0];
var btns = $('.btn');
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
var _self = this;
if(_self.picker) {
_self.picker.show(function (rs) {
result.innerText = '选择结果: ' + rs.text;
document.getElementById('addtime').value = 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) {
result.innerText = '选择结果: ' + rs.text;
document.getElementById('addtime').value = rs.text;
_self.picker.dispose();
_self.picker = null;
});
}
}, false);
});
})(mui);
</script>
提示:input 表单中必须要加入id标注:
<input type="text" name="addtime" id="addtime" />