📌  相关文章
📜  jQWidgets jqxTimePicker 只读属性(1)

📅  最后修改于: 2023-12-03 15:32:20.370000             🧑  作者: Mango

jQWidgets jqxTimePicker 只读属性

简介

jqxTimePicker 是 jQWidgets 的时间选择器组件，用户可以通过控件选择时间，并支持设置 readonly 属性使其变为只读状态。

只读属性

只读属性可以设置为 true 或 false，默认为 false，当设置为 true 时，用户将无法更改时间，只能查看当前时间。

$('#timePicker').jqxTimePicker({
    readonly: true
});
实例

以下为一个使用 jqxTimePicker 的示例，该示例设置了只读属性。

<html>
<head>
    <title>jqxTimePicker example - readonly</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxtimepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#timePicker').jqxTimePicker({
                width: 250,
                height: 30,
                showCloseButton: true,
                readOnly: true,
                value: new Date()
            });
        });
    </script>
</head>
<body>
    <div id="timePicker"></div>
</body>
</html>
总结

jqxTimePicker 地只读属性可通过设置 readonly 参数为 true 使时间选择器变为只读状态，适用于需要仅作为展示而非交互的场景。