Question

我想在单击输入框以及图标时打开datepicker对话框。
我的代码：<input type="date" name="bday" id="bday" >
是否可以使用仅JavaScript 来解决此问题。

Answer 1

请注意，Safari或Internet Explorer 11及更早版本不支持input type="date"，因此，我不建议您使用它-请参阅此链接https://caniuse.com/#search=date

这是一个使用跨浏览器兼容的Bootstrap Datepicker的简单示例

$(document).ready(function() {
    $('input[id="js-date"]').datepicker();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">

<h3>Bootstrap datepicker demo</h3>

<div class="input-group date">
  <label for="js-date">Date:</label>
  <input type="text" class="form-control" id="js-date">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

Answer 2

简短的回答是否。

此外，这是一个重复的问题，请参见：Open HTML5 date picker on icon click

单击输入框而不是图标或箭头时如何打开Datepicker对话框

2 个答案: