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!

Do you have a separate "calendar widget" or when you say you want to show only the calendar are you talking about the text "2016-06-02"? — JonSG, Jun 02 '16 at 15:27
@JonSG When I talk about calendar I mean the calendar that appears when you click on the dropdown of the `input type=date`. — Francisco Romero, Jun 02 '16 at 15:29
@Error404 input[type="date"]{ display: none; } isn't doing much. You want the "calendar" to disappear when you click it ? — Jules, Jun 02 '16 at 15:33
@Pleasure No. I want to always hide the input box but show the calendar instead (as when you click on the input box and it is shown, but without the input box). — Francisco Romero, Jun 02 '16 at 15:34
@Error404 Oh you mean on chrome ? Because on firefox nothing happens. I know that the type "date" is only in certain browsers. — Jules, Jun 02 '16 at 15:36
@Pleasure Yes, I mean in Chrome. In Chrome when you click on it, a calendar is displayed and you can go through it. — Francisco Romero, Jun 02 '16 at 15:37

score 1 · Answer 1 · edited May 23 '17 at 12:07

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

Thank you! Very very close of the behaviour intended. Do you know if I can fix the calendar to be always displayed? Without block the webpage, of course. — Francisco Romero, Jun 02 '16 at 15:47

score 0 · Answer 2 · answered Jun 02 '16 at 15:37

0

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

answered Jun 02 '16 at 15:37

Iván Rodríguez Torres

4,293
3
31
47

It is what I am trying to avoid. Use plugins or whatever external stuff. It is going to be my last option to choose if I did not get one that works for the `input type=date`. – Francisco Romero Jun 02 '16 at 15:40
1

okei, just take in count that using this plugin works in almost every common browser. If you chose the pure HTML5 way, you will be very limited. Check the compatibility http://caniuse.com/#search=date – Iván Rodríguez Torres Jun 02 '16 at 15:42

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

2 Answers2

Linked