Question

我在<input type=date>设置了默认值，我只想显示日历，而不是输入框。

我正在尝试使用Javascript，但没有成功，如下所示：

＆＃13;

var date = document.getElementById('date');

date.click();

＆＃13;

input[type="date"]{
  display: none;
}

＆＃13;

<input id="date" type="date" value="2016-06-02" readonly>

＆＃13;

正如您所看到的，没有显示任何内容（click事件似乎不适用于该输入，因为如果我显示它并不重要，则单击事件不起作用）。

我想只显示日历（不是输入），并且一直显示网页上的只读（已经完成）。

有可能吗？

编辑：为了更好地说明，当我提及日历时，我指的是点击input type=date时显示的日历。

提前致谢！

Answer 1

我认为您可以使用JQuery UI作为插件来创建用户友好的UI元素。

检查link。

在示例中，您可以看到使用它的代码。这很容易，你只需要调用datepicker，它由以下几行完成：

$(function() {
    $( "#datepicker" ).datepicker();
});

Answer 2

因此，您希望显示onload本机日历，这是一个解决方案：

1 - 由于无法隐藏输入并显示日历，请将其不透明度设置为0：

input[type="date"]{
  opacity:0;
}

2 - 正如MichałŠrajer在this post中所示，你可以通过解雇F4键事件来触发事件：

function openPicker(inputDateElem) {
    var ev = document.createEvent('KeyboardEvent');
    ev.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);
    inputDateElem.dispatchEvent(ev);
}

var cal = document.querySelector('#cal');
cal.focus();
openPicker(cal);

这将隐藏输入并显示日历。

请记住，这不适用于Firefox

如何显示日历而不是输入类型=日期的输入框？

2 个答案: