Add a small calendar icon to date picker

[Petermac]

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.

[andrii]

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

[Petermac]

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

.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?

[ihor]

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).