[Resolved] datepicker icon and delete on views and cred

[Author]

Posts

[bryan]

The default icon for datepicker (which seems to be used on both cred and views) is too small to be useful so I was trying to style it; but its so small at 16px x 15px it needs to be replaced....

I found two tips which gave code similar to this.

function ii_datepicker_delete_icon(){
    $calendar_delete_image = "/wp-content/uploads/2019/03/pencil.png";
    return $calendar_delete_image;
}
add_filter('wptoolset_filter_wptoolset_delete_date_image', 'ii_datepicker_delete_icon');

function ii_change_datepicker_icon(){
    $calendar_image = '/wp-content/uploads/2019/03/calendar-1.png'; 
    return $calendar_image;
}
add_filter('wptoolset_filter_wptoolset_calendar_image', 'ii_change_datepicker_icon');

The Delete function works for Views but not Cred
The Change function works for Cred but not Views

Cred Form

credform]
	<div class="form-group ">
		<label>DatePicker</label>
		[cred_field field='test-date' force_type='field' class='form-control' output='bootstrap']
	</div>
	[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]

Views

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<label>[wpml-string context="wpv-views"]Test Date[/wpml-string]</label>
	[wpv-control-postmeta field="wpcf-test-date" type="date" url_param="wpv-wpcf-test-date"  class='form-control' output='bootstrap']
</div>
[wpv-filter-submit output="bootstrap"][/wpv-filter-controls]
[wpv-filter-end]

I went though all these - but could only come up with the first code snippet.

https://toolset.com/forums/topic/date-calendar-icon-modification/
https://toolset.com/forums/topic/how-can-we-change-the-clear-date-icon-on-the-date-picker-field/
https://toolset.com/forums/topic/in-order-to-change-the-calendar-icon-use-filter-wptoolset_filter_wptoolset_cale/
https://toolset.com/forums/topic/datepicker-css-2/

thanks

[Waqar]

Hi Bryan,

Thank you for contacting us.

I apologize for the delay, as we had an unusually busy queue after the weekend.

In my tests, the first code snippet that you've shared ( screenshot: hidden link ), works for:

1. The calendar and the delete/reset icon in the View:
Screenshot: hidden link

2. The calendar icon in the Toolset Form:
Screenshot: hidden link

Note: It doesn't work for the delete/reset icon in Toolset Form, because it is not using any image tag and instead uses CSS code and "dashicons" font ( ref: https://developer.wordpress.org/resource/dashicons/#editor-expand )
Screenshot: hidden link

You can override that using custom CSS code and to check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

For example, to control the size of the calendar and the delete/reset images, you can use following code blocks, respectively:

img.ui-datepicker-trigger {
    width: 24px;
    height: 24px;
}

img.wpv-date-front-end-clear {
    width: 24px;
    height: 24px;
}

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[bryan]

thanks Waqar,

I realise I can override with CSS but the icon is only 16px so it quickly looks terrible.

Understood about the dashicon - thanks but actually I care less about the delete icon and more about the awful calendar icon of 16px which views is using.

Are you saying there is no hook to replace this wretched 16px calendar.gif in Views ? but there is in forms -- that seems more like an oversight than a design decision !

If so please get the gif changed to something better in the views source and I will make a feature request for a hook in views.

thanks

[Waqar]

Hi Bryan,

Thanks for writing back.

>> Are you saying there is no hook to replace this wretched
>> 16px calendar.gif in Views ? but there is in forms -- that
>> seems more like an oversight than a design decision !

- I'm afraid this isn't what I've shared in my last reply or observed on my test website. Sorry if it resulted in confusion and I'd be happy to clarify this further:

--- In my tests, the first code snippet that
--- you've shared ( screenshot: hidden link ), works for:

--- 1. The calendar and the delete/reset icon in the View:
--- Screenshot: hidden link

What I meant was that the code snippet that you shared allowed me to replace both the calendar and the delete/reset icons in Views.

If you're experiencing different results on your website and the "wptoolset_filter_wptoolset_calendar_image" filter is not changing the calendar icon in a view, you're welcome to share temporary admin login details for the website, along with information on where and how the code and the view can be seen.

I've set your next reply as private and please make a complete backup copy of the website, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Bryan,

Thank you for waiting and for sharing the access details.

During testing, I was able to confirm that the code snippet doesn't work, when added through the Toolset's custom code section.
( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ )

This limitation seems to be coming from the fact that code execution priority earlier than 20 is not possible from there.
( as mentioned in the guide )

Please remove it from the custom code section and include it through the active theme's "functions.php" file and it should work.

regards,
Waqar

[bryan]

My issue is resolved now. Thank you!

OK thanks so the key seems to be that toolset customisations won't allow priority greater than 20 ?!

anyway it works in functions.php and probably can be regarded as a theme customisation - so I am good with this;