如何在通过代码输入的日期类型中打开窗口答案

【问题标题】：How do i open the window in a date type input through code如何在通过代码输入的日期类型中打开窗口
【发布时间】：2015-09-17 13:29:09
【问题描述】：

<span>{{t.date}}</span>
<input type='date' ng-model='t.date' id='tdate'/>

现在，当用户单击输入图标时，它会打开日期窗口，一切正常，但我希望用户能够单击跨度并让它也打开日期窗口。在控制面板上几个小时后，我仍然没有找到打开输入的事件。

提前感谢您的帮助

【问题讨论】：

【解决方案1】：

正如 Slim 所说，作为程序员，您没有控制权。他是真的Read This

但是，在某些情况下，由于某种原因我们无法进行新的实现，因此对于这种情况，您可以使用 CSS 使其工作。您需要做的只是将 css 规则应用于您的输入，使其覆盖您的 span 元素。将颜色和背景颜色设为透明，这样用户就不会看到它，但是当用户点击 span 时，它实际上会执行输入日期点击。

希望它有效。

【讨论】：

【解决方案2】：

作为程序员，您无法控制 html5 日期选择器，因为它是特定于浏览器的功能，并且此日期选择器仅出现在少数实际浏览器中。

您为什么不想使用输入字段？您可以使用 css 设置输入字段的样式，它看起来像一个 span 元素：

#tdate {
   border: none;
   display: inline;
}

jQuery UI

或使用 jquery ui datepicker：https://jqueryui.com/datepicker/，您可以使用它来触发：

$('span').click(function () {
    $('#tdate').datepicker("show");
});

如果您在这种情况下想要隐藏输入字段，那么您最终可以使用

input {
   height: 0;
   border: none;
}

UI 引导

或者对于 angularJS 使用 https://angular-ui.github.io/bootstrap/#/datepicker 您可以使用属性打开此选择器并更改此点击范围：is-open=true

【讨论】：