How can I show calendar but not input box of input type=date?

Question

I have a default value set in my <input type=date> and I would like to display only the calendar and not the input box.

I am trying to do it with Javascript but without success as I show below:

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

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

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

As you can see, nothing is displayed (it does not seem that click event could be apply to that input because it does not matter if I have it displayed or not, click event does not work).

I would like to show only the calendar(not the input) and make it read-only (already done) on the screen all the time that the webpage will be displayed.

Is it possible?

EDIT: For a better clarification, when I refer to calendar I mean to the calendar that is shown when you click on the input type=date .

Thanks in advance!

Answer 1

I think that you can use JQuery UI which is a plugin to create user-friendly UI elements.

Check this link .

In the example you can see the code that it is used. It is very easy, you only need to invoke the datepicker, and it is done by these lines:

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

Answer 2

So you want to display onload the native calendar, here is a solution :

1 - As you can't hide the input AND show the calendar, set its opacity to 0 :

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

2 - As Michał Šrajer showed in this post you can trigger the event via firing F4 key event :

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);

This will hide the input and show the calendar.

Remember that this will not work in Firefox