mui dtpicker（日期时间选择器）公用的方法

最新推荐文章于 2024-07-25 18:31:27 发布

原创最新推荐文章于 2024-07-25 18:31:27 发布 · 2.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Mui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在HTML中使用一个只读文本输入框，并通过JavaScript函数触发mui日期选择器，实现用户友好的时间选择功能。具体实现包括设置输入框属性，如ID、数据选项和占位符，以及定义JavaScript函数处理点击事件，解析数据选项并显示日期选择器。

该文章已生成可运行项目，

HTML 代码

<input id="calendarText" type="text" data-options="{}" placeholder="请选择时间" readonly="" onclick="onData(this)">

js 代码

function onData(obj){
   var id = obj.getAttribute('id');
    var optionsJson = obj.getAttribute('data-options') || '{}';
        var options = JSON.parse(optionsJson);
        var picker = new mui.DtPicker(options);
        picker.show(function (rs) {
            document.getElementById(id).value = rs;
        }, false)
}