How can we change the Clear date icon on the Date Picker Field

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to change clear date icon (red cross icon) for custom date field.
Solution:
Add the following code in your theme’s or child theme’s functions.php file:

function toolsetcustomization_changeDatepickerDeleteIcon(){
    $calendar_delete_image = 'http://thegilpinv2.staging.wpengine.com/wp-content/uploads/edit.png'; // replace with your icon URL.
    return $calendar_delete_image;
}
add_filter('wptoolset_filter_wptoolset_delete_date_image', 'toolsetcustomization_changeDatepickerDeleteIcon');

Relevant Documentation:

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	-
-	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Toolset Forms, Views plugin

This topic contains 5 replies, has 2 voices.

Last updated by nickT-2 6 years, 9 months ago.

Assisted by: Noman.

Author

Posts

February 13, 2018 at 1:16 pm #615635

nickT-2

Hi,

On a date field I would like to change the 'Clear Date' icon (the red cross) to my own custom icon. Screenshot attached.

I've done something similar with the calendar icon using the code below, placed in fucntions.php ... would I do something similar for the clear date icon?

/* change toolset's default calendar icon */

function toolsetcustomization_changeDatepickerIcon(){
    $calendar_image = '<em><u>hidden link</u></em>'; // replace with your icon URL.
    return $calendar_image;
}
add_filter('wptoolset_filter_wptoolset_calendar_image', 'toolsetcustomization_changeDatepickerIcon');

Thanks

February 13, 2018 at 4:02 pm #615725

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Nick,

Thank you for contacting Toolset support. You can update the icon by adding following CSS in your theme’s style.css file or custom CSS file.

.js-wpt-date-clear.wpt-date-clear.dashicons-before.dashicons-no::before {
    content: "\f464";
}

And it will look as in attached screenshot.

Thank you

February 13, 2018 at 4:08 pm #615727

nickT-2

Hi,
I've tried it but unfortunately it's not working. Please can I send you a secret message and I'll point you to the url

Thanks

February 13, 2018 at 4:23 pm #615732

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Sure, please provide temporary access WP-Admin Login info to your site. Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the [CRED Form] Edit link and the page where you have inserted this form.

Thank you

February 14, 2018 at 8:13 am #615897

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Nick,

I thought you were talking about CRED date field, sorry for the confusion. You can update date field icon using filter hook as you have updated calendar icon.

I have added the following code in your theme’s or child theme’s functions.php file:

function toolsetcustomization_changeDatepickerDeleteIcon(){
    $calendar_delete_image = '<em><u>hidden link</u></em>'; // replace with your icon URL.
    return $calendar_delete_image;
}
add_filter('wptoolset_filter_wptoolset_delete_date_image', 'toolsetcustomization_changeDatepickerDeleteIcon');

You can update/change the date icon.

Thank you

February 16, 2018 at 4:06 pm #616842

nickT-2

Great thank you ... worked really well!