如何顯示日歷，但不顯示輸入類型=日期的輸入框？

Question

我在<input type=date>設置了默認值，並且我只想顯示日歷而不是輸入框。

我正在嘗試使用Javascript執行此操作，但未成功，如下所示：

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

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

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

如您所見，沒有顯示任何內容（似乎click事件不能應用於該輸入，因為無論是否顯示都無所謂，單擊事件不起作用）。

我想只顯示日歷（而不是輸入），並使其在顯示網頁的所有時間中都保持只讀（已完成）。

可能嗎？

編輯：為了更好的說明，當我提到日歷時，我指的是單擊input type=date時顯示的日歷。

提前致謝！

Answer 1

我認為您可以使用JQuery UI這個插件來創建用戶友好的UI元素。

檢查此鏈接 。

在示例中，您可以看到使用的代碼。 這很容易，您只需要調用datepicker，就可以通過以下幾行完成：

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

Answer 2

因此，您想顯示本機日歷的onload，這是一個解決方案：

1-由於您無法隱藏輸入並顯示日歷，因此將其不透明度設置為0：

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

2-正如MichałŠrajer在這篇文章中所示，您可以通過觸發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中不起作用