user image

Shilpa
Published in : 2022-03-01

Simple HTML date picker is showing not showing calendar icon!

Javascript

My html date picker input[type="date"] is showing a triangle ▽ instead of calendar icon 📅.

I want to show png file instead of triangle icon. I tried this thread to improve calendar icon, but it doesn't seem very simple.

I haven't figured out a way to do that yet.

Comments

Rakshit Date : 2022-03-02

Best answers

34

Best answers

34

Your html date input is given as below

<input type="date">

#Approach 1: Live Demo Link - Changing calendar icon using font-awesome icon library

input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-size: 18px;
  font-family: 'FontAwesome';
  content: '\f073';
  /* This is the calendar icon in FontAwesome */
  width: 15px;
  height: 20px;
  position: absolute;
  top: 12px;
  right: 6px;
  color: #999;
}

Output: 


#Approach 2: Live Demo Link - Changing calendar icon using image.

CSS Code:

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(http://www.clipartbest.com/cliparts/9cz/67G/9cz67Gxgi.png) no-repeat;
    width: 20px;
    height: 20px;
  	border: 1px blue solid;
    border-width: thin;
}

Output:

This way you can overwrite your date picker, Hope it will work for you.

Shilpa Date : 2022-03-02

Yes, Approach 1 about using Font-awesome looks good for me, thank you for sharing codepens, they are so helpful.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Check if div have touch another div
Publish date: 2022-03-02 | Comments: 1

Tag: Javascript

How do I check if an array includes a value in JavaScript?
Publish date: 2022-02-13 | Comments: 2

Tag: Javascript

Can we add a javascript or jQuery to the URL?
Publish date: 2022-03-05 | Comments: 2

Tag: Javascript

javascript: Uncaught TypeError: undefined is not a function
Publish date: 2022-03-02 | Comments: 2

Tag: Javascript

How select specific tag in jQuery using if else statement?
Publish date: 2022-02-27 | Comments: 1

Tag: Javascript

How to get audio input and audio output as one stream?
Publish date: 2022-02-13 | Comments: 1

Tag: Javascript

Vanilla JavaScript Next & prev Navigation
Publish date: 2022-02-22 | Comments: 1

Tag: Javascript