CODEWITHSUNDEEP
javascripthtmlcss
Francisco Romero
Francisco Romero

Reputation: 13189

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

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!

Upvotes: 0

Views: 3377

Answers (2)

user3241019
user3241019

Reputation: 811

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

Upvotes: 1

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4451

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

Upvotes: 0

Related Questions