jquery timepicker get value onchange - Javascript

在使用jQuery Timepicker插件时，有时候需要获取时间选择器的值。本文介绍如何在时间选择器值改变时获取该值。

步骤

1. 在HTML文件中引入jQuery和jQuery Timepicker插件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>

2. 在HTML页面中添加一个时间选择器：

<input type="text" id="myTimepicker">

3. 在Javascript代码中初始化时间选择器以及添加onchange事件：

$(document).ready(function() {
    $('#myTimepicker').timepicker({
        timeFormat: 'HH:mm:ss',
        interval: 15,
    });
    $('#myTimepicker').on('changeTime', function() {
        var time = $('#myTimepicker').val();
        console.log(time);
    });
});

4. 当时间选择器的值改变时，在控制台中打印该值。

说明

• timeFormat属性指定时间选择器的格式，默认为hh:mm p。
• interval属性指定时间间隔，默认为30分钟。
• changeTime事件在时间选择器值改变时被触发。
• 通过$('#myTimepicker').val()方法可以获取时间选择器的值。

示例代码

$(document).ready(function() {
    $('#myTimepicker').timepicker({
        timeFormat: 'HH:mm:ss',
        interval: 15,
    });
    $('#myTimepicker').on('changeTime', function() {
        var time = $('#myTimepicker').val();
        console.log(time);
    });
});

Markdown代码片段

# jquery timepicker get value onchange - Javascript

在使用jQuery Timepicker插件时，有时候需要获取时间选择器的值。本文介绍如何在时间选择器值改变时获取该值。

## 步骤

1. 在HTML文件中引入jQuery和jQuery Timepicker插件：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
```
2. 在HTML页面中添加一个时间选择器：
```html
<input type="text" id="myTimepicker">
```
3. 在Javascript代码中初始化时间选择器以及添加onchange事件：
```javascript
$(document).ready(function() {
    $('#myTimepicker').timepicker({
        timeFormat: 'HH:mm:ss',
        interval: 15,
    });
    $('#myTimepicker').on('changeTime', function() {
        var time = $('#myTimepicker').val();
        console.log(time);
    });
});
```
4. 当时间选择器的值改变时，在控制台中打印该值。

## 说明

* `timeFormat`属性指定时间选择器的格式，默认为`hh:mm p`。
* `interval`属性指定时间间隔，默认为`30`分钟。
* `changeTime`事件在时间选择器值改变时被触发。
* 通过`$('#myTimepicker').val()`方法可以获取时间选择器的值。

## 示例代码

```javascript
$(document).ready(function() {
    $('#myTimepicker').timepicker({
        timeFormat: 'HH:mm:ss',
        interval: 15,
    });
    $('#myTimepicker').on('changeTime', function() {
        var time = $('#myTimepicker').val();
        console.log(time);
    });
});
```