展开输入日期日历（浏览器原生）答案

【问题标题】：expand input date calendar (browser native)展开输入日期日历（浏览器原生）
【发布时间】：2015-03-21 09:04:51
【问题描述】：

是否可以扩展原生浏览器日历..

<input id="calendar" type="date"></input>

..就像你真的在点击它一样？

我尝试模拟点击事件：

$('#calendar').trigger('click');

但没有运气。想法？ Fiddle here

PS：我不对 jquery datepicker 等插件感兴趣。谢谢

【问题讨论】：

由于它们并没有得到普遍支持，我认为你最好创建自己的内联日历。
其实我不需要被普遍支持，不过还是谢谢
几乎不支持更像它。在 IE 或 FF 中不支持
我知道，但它支持我需要的情况：Android > 4.3 和 iOS > 7.1。 caniuse.com/#feat=input-datetime
iOS（和 AFAIK 移动 Chrome）无论如何都不会为 type=datetime-local 选择器使用日历——它是一组代替键盘出现的微调器——所以你不会得到无论如何，您要的是什么。你到底想要什么？

【解决方案1】：

无需触发任何事件即可显示 Native DatePicker/TimePicker。如果浏览器支持 HTML5 输入类型日期/时间，那么它将打开原生 DatePicker/TimePicker。检查这个example

【讨论】：

【解决方案2】：

也许你可以使用这个 hack -

HTML

<input id="calendar" type="date"></input>
<input class="button" type="button" value="Click"/>

CSS

#calendar {
  position: absolute;
  opacity: 0;
  right: 15px;
}

.button{
  float: right;
}

使用 CSS 将日期选择器定位在 btn 上方。日期选择器使用 Opacity: 0 隐藏，因此用户可以看到您的按钮。

【讨论】：