0

I'm working on a form for my website and I have two input fields which are dates. I wanted to have a particular placeholder, so this is how I achieved that:

<label for="check-in" id="check-in-label"></label>
<input type="text" placeholder="Check In" id="check-in" name="check-in" class="form-control" onfocus="(this.type='date')">

<label for="check-out" id="check-out-label"></label>
<input type="text" placeholder="Check Out" id="check-out" name="check-out" class="form-control" onfocus="(this.type='date')">

However, I also added svgs to those input fields, so I realized I needed to get rid of the default calendar icon that the "date" type comes with. I achieved this with CSS:

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

This works as it deletes the icon however, I would still like to have the calendar pop up without the icon.

So this is what it looks like now:

enter image description here

And when I click on the input field, this is what I get:

enter image description here

I would like it for to appear like this once you click on the input field but without the default icon:

enter image description here

How can I achieve this? Thank you in advance!

I tried to do this with CSS:

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

and it causes only ONE of the input fields to show the calendar without the icon however it requires a double click and also makes the calendar not go away regardless of clicks.

karinapichardo
  • 67
  • 2
  • 10
  • Does this answer your question? [How to show calendar popup when input\[type="date"\] is on focus](https://stackoverflow.com/questions/51334960/how-to-show-calendar-popup-when-inputtype-date-is-on-focus) – Heretic Monkey Apr 14 '21 at 17:50
  • it causes only ONE of the input fields to show the calendar without the icon however it requires a double click and also makes the calendar not go away regardless of clicks. @HereticMonkey – karinapichardo Apr 14 '21 at 18:04
  • If you read the comments under the answer to that question, [there is another answer linked there](https://stackoverflow.com/q/15530850/215552) that could help. – Heretic Monkey Apr 14 '21 at 18:05
  • I got it to work but now my svgs are gone lol @HereticMonkey – karinapichardo Apr 14 '21 at 18:09
  • 1
    Try adding a higher z-index to your SVGs' CSS style. – Heretic Monkey Apr 14 '21 at 18:10
  • yay!!! this worked! thanks so much, do you know how to avoid having to double click? haha @HereticMonkey , I have to double click the input field for the calendar to pop up – karinapichardo Apr 14 '21 at 18:13
  • No, I don't know. Ask a follow up question. Link back to this question as reference, but make sure you include the code that you've got so far. – Heretic Monkey Apr 14 '21 at 18:16
  • 1
    Okay thanks for your help! – karinapichardo Apr 14 '21 at 18:17

0 Answers0