How to make a calendar icon instead of arrows in the date entry field, like here ?

date picker example

  • There is no input type = date. - Qwertiy ♦
  • I mean, I have input type = date and how can I replace such an icon instead of an arrow? - Aslero

2 answers 2

For Chrome:

::-webkit-calendar-picker-indicator { color: transparent; opacity: 1; background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=16&d=identicon&r=PG) no-repeat center; background-size: contain; } 
 <input type=date>

    Good day!

     <input type="date" />

    Does not always work correctly - let's say in IE. Try using the jQuery UI DatePicker . Including there is an extended variation DateRangePicker - Allows you to select date ranges, and quite flexibly configured.