js中怎么在input框旁加日历选择以及时间
时间: 2024-03-01 16:53:36 浏览: 137
在JavaScript中,可以使用第三方库或自己编写代码来实现在input框旁加日历选择和时间选择功能。其中比较常用的库有jQuery UI和Bootstrap Datepicker。
如果使用jQuery UI,可以在HTML代码中添加一个input元素和一个空的div元素,然后在JavaScript代码中调用datetimepicker()方法将日期时间选择器绑定到input元素上,同时将日期时间选择器的HTML代码插入到空的div元素中。示例代码如下:
HTML代码:
```html
<input type="text" id="datetimepicker">
<div id="datetimepicker-container"></div>
```
JavaScript代码:
```javascript
$(function() {
$("#datetimepicker").datetimepicker({
dateFormat: "yy-mm-dd",
timeFormat: "HH:mm",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
buttonText: "Select date and time",
onSelect: function(dateText) {
// 处理选择日期时间后的逻辑
}
}).datetimepicker("widget").appendTo("#datetimepicker-container");
});
```
如果使用Bootstrap Datepicker,可以在HTML代码中添加一个input元素,然后在JavaScript代码中调用datetimepicker()方法将日期时间选择器绑定到input元素上。示例代码如下:
HTML代码:
```html
<input type="text" id="datetimepicker">
```
JavaScript代码:
```javascript
$(function() {
$("#datetimepicker").datetimepicker({
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
todayHighlight: true
});
});
```
以上是两个库的基本使用方法,具体实现还需要根据具体需求进行调整。
阅读全文