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

【问题标题】：How to open Datepicker dialog box on click of input box not icon or arrow如何在单击输入框而不是图标或箭头时打开 Datepicker 对话框
【发布时间】：2019-04-08 11:29:04
【问题描述】：

我想在点击输入框和图标时打开日期选择器对话框。
我的代码：<input type="date" name="bday" id="bday" >
有没有办法使用 JavaScript 解决这个问题。

【问题讨论】：

看看：jqueryui.com/datepicker
查看问题中的 jquery 标记，您是否尝试过 $(#bday).on('click', function() { $(this).datepicker() } 或只是 $('#bday').datepicker()

标签： javascript html datepicker

【解决方案1】：

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

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

JSFiddle Demo

$(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>

【讨论】：

感谢@Marc，但有没有办法在不将 type='date' 更改为 type='text' 的情况下做到这一点
我看不出有任何理由使用input type="date"，因为几个浏览器的支持很差。为什么要使用日期？
type='date' 是 sitecore（内容管理应用程序）中日期字段的默认类型，似乎他们不能在那个地方使用文本字段。

【解决方案2】：

简短的回答是否。

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

【讨论】：

正确，使用JS似乎很难。并且在重复 qus 中没有人回答正确