js实现点击input框 日历显示
时间: 2024-01-20 14:04:14 浏览: 26
可以使用JavaScript实现点击输入框后弹出日历,以下是一个简单的示例代码:
HTML部分:
```html
<input type="text" id="datepicker">
```
JavaScript部分:
```javascript
var datepicker = document.getElementById("datepicker");
datepicker.addEventListener("click", function(){
var datePicker = new DatePicker(); // 创建日历对象
datePicker.show(); // 显示日历
});
```
其中,DatePicker()是一个自定义的日历对象,show()方法用于显示日历。你可以按照你的需求编写DatePicker()对象。
相关问题
js中怎么在input框旁加日历选择
在JavaScript中,可以使用第三方库或自己编写代码来实现在input框旁加日历选择功能。其中比较常用的库有jQuery UI和Bootstrap Datepicker。
如果使用jQuery UI,可以在HTML代码中添加一个input元素和一个空的div元素,然后在JavaScript代码中调用datepicker()方法将日历选择器绑定到input元素上,同时将日历选择器的HTML代码插入到空的div元素中。示例代码如下:
HTML代码:
```html
<input type="text" id="datepicker">
<div id="datepicker-container"></div>
```
JavaScript代码:
```javascript
$(function() {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText) {
// 处理选择日期后的逻辑
}
});
});
```
如果使用Bootstrap Datepicker,可以在HTML代码中添加一个input元素,然后在JavaScript代码中调用datepicker()方法将日历选择器绑定到input元素上。示例代码如下:
HTML代码:
```html
<input type="text" id="datepicker">
```
JavaScript代码:
```javascript
$(function() {
$("#datepicker").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true
});
});
```
以上是两个库的基本使用方法,具体实现还需要根据具体需求进行调整。
日期选择器如何只显示日历图标不显示input框
你可以使用CSS将input框设置为不可见,然后在其旁边添加一个带有日历图标的元素,使用JavaScript代码将日历图标与日期选择器关联起来。以下是一个简单的示例:
HTML代码:
```html
<div class="date-picker">
<input type="text" id="datepicker" name="datepicker" style="display:none;">
<label for="datepicker" class="calendar-icon"><i class="fa fa-calendar"></i></label>
</div>
```
CSS代码:
```css
.calendar-icon {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
}
.calendar-icon i {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.date-picker input[type="text"] {
display: none;
}
```
JavaScript代码:
```javascript
$(function() {
$("#datepicker").datepicker();
});
```
这里使用了jQuery库中的datepicker插件来实现日期选择器功能。当用户点击日历图标时,会触发与id为“datepicker”的input元素相关联的datepicker插件,并弹出日期选择器。