CODEWITHSUNDEEP
javascripthtmlcssinputcalendar
Hex Heager
Hex Heager

Reputation: 139

How do I create a calendar icon that picks dates, but doesn't show the input in pure javascript/html/css?

My goal

Calendar pops up when the calendar icon is pressed

What is available

enter image description here

This is done using a simple calendar input.

<input type="date">

I have tried reducing the width of the input, but then it doesn't seem elegant as it deforms in different browsers. The previous images were on chrome. Below is how it appears in Mozilla.

enter image description here

I think I could specify the width for each browser. That however seems inelegant and convoluted.

Upvotes: 1

Views: 1464

Answers (2)

Besworks
Besworks

Reputation: 4483

In most modern browsers you can use the showPicker() method of an input[type=date] element to make the widget appear.

So, with that in mind, you could move the <input> outside of a container with overflow:hidden and trigger the widget from a click event on another element.

Something like the snippet below might work, though I wouldn't really suggest using this in a public facing web app due to the limited support :

let cal = document.querySelector('label.calendar');
let ci = document.querySelector('label.calendar input[type=date]');
cal.addEventListener('click', event => ci.showPicker());
label.calendar {
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

label.calendar input {
  position: absolute;
  bottom: 100%;
  left: 0;
  border: 0;
  padding: 0;
  outline: none;
}
<label class="calendar">
  <input type="date">
  <span>🗓</span>
</label>

Instead, I would recommend you look into other (more mature) options like Smart HTML Calendar which is a Custom HTML Element.

Upvotes: 2

Albi Patozi
Albi Patozi

Reputation: 1468

What are you trying to achieve is not possible to do in one solution for every browser because the "date" input type is rendered by the browser and every one of them has their own specification on how to render things. You could try to use a custom component or plugin that renders a calendar using javascript/CSS/HTML that is the only way to have a consistent look and feel across different browsers.

Upvotes: 0

Related Questions