跳至正文

MUI日期选择器赋值到 input 表单的 value 中

  • 前端

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" />