Add a small calendar icon to date picker

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.

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

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?

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

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