单击图标以触发jquery时间选择器

基础概念

jQuery 时间选择器（Timepicker）是一种用于在网页上选择时间的插件。它通常与 jQuery 库一起使用，提供了一个用户友好的界面来选择时间。时间选择器允许用户通过下拉菜单或弹出窗口选择特定的时间，而不是手动输入。

类型

基本时间选择器：简单的下拉菜单或弹出窗口。
自定义时间格式：允许开发者定义时间的显示格式。
时间范围限制：可以设置允许选择的时间范围。
多语言支持：支持多种语言显示。

应用场景

表单填写：在需要用户输入时间的表单中使用。
预约系统：如医疗预约、会议安排等。
日程管理：帮助用户快速选择和管理日程时间。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 和 jQuery UI 创建一个时间选择器，并通过单击图标触发它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timepicker Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
</head>
<body>

<input type="text" id="timepicker">
<span class="icon" onclick="showTimepicker()">🕒</span>

<script>
function showTimepicker() {
    $('#timepicker').timepicker('show');
}

$(document).ready(function(){
    $('#timepicker').timepicker({
        timeFormat: 'HH:mm',
        interval: 15,
        minTime: '08:00',
        maxTime: '17:00',
        defaultTime: '12:00',
        startTime: '08:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
});
</script>

</body>
</html>