# Add a small calendar icon to date picker

**URL:** <https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508>\
**Category:** Bookings\
**Tags:** bookings\
**Created:** [December 22, 2022, 3:03pm UTC](https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508 "2022-12-22T15:03:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Petermac](https://community.hivepress.io/user_avatar/community.hivepress.io/petermac/32/3185_2.png) [@Petermac](https://community.hivepress.io/u/Petermac)\
**Post date:** [December 22, 2022, 3:03pm UTC](https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508/1 "2022-12-22T15:03:39Z")

</div>

Hi, I have created a child theme in hopes of making this request easier to implement. Is there a way to add a small calendar icon to the sidebar beside the word “DATES”… it would make the process more intuitive as there is really no indicator there that a calendar selector will appear.

 ![image](https://community.hivepress.io/uploads/default/original/2X/6/612aa4a6de9685d069aafc68c33ed9e8000e6151.jpeg)

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [December 23, 2022, 9:46am UTC](https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508/4 "2022-12-23T09:46:42Z")

</div>

Hi,  
Yes, it is possible to add an icon, but it requires CSS tweaks.  
Please check this topic if you need more information - [Add Words next to "message host" icon](https://community.hivepress.io/t/add-words-next-to-message-host-icon/3475)

---

<div class="post-metadata">

**Author:** ![Petermac](https://community.hivepress.io/user_avatar/community.hivepress.io/petermac/32/3185_2.png) [@Petermac](https://community.hivepress.io/u/Petermac)\
**Post date:** [December 23, 2022, 3:29pm UTC](https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508/5 "2022-12-23T15:29:43Z")

</div>

Thanks, I used this CSS code to add a small calendar icon to the right of the text:

```auto
.hp-field__label::after {
    content: url(green_calendar.jpg);	
	padding-left: 10px; 
}

```

One follow up question … how do I make the text and icon also trigger the showing of the calendar selection popup?

---

<div class="post-metadata">

**Author:** ![ihor](https://community.hivepress.io/user_avatar/community.hivepress.io/ihor/32/5_2.png) [@ihor](https://community.hivepress.io/u/ihor)\
**Post date:** [December 24, 2022, 7:57am UTC](https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508/6 "2022-12-24T07:57:22Z")

</div>

Unfortunately this requires further customizations, e.g. to add the “for” attribute to the label so it will trigger the date picker (although this may not happen because date picker is a third-party Flatpickr script). Another workaround may be adding a calendar icon to the field itself (e.g. adding a padding on the left so the field purpose will be clear enough).

---

<div class="post-metadata">

**Author:** ![system](https://community.hivepress.io/user_avatar/community.hivepress.io/system/32/13990_2.png) [@system](https://community.hivepress.io/u/system)\
**Post date:** [January 23, 2023, 7:58am UTC](https://community.hivepress.io/t/add-a-small-calendar-icon-to-date-picker/3508/7 "2023-01-23T07:58:18Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.