Skip Navigation

[Resolved] Datepicker views css and jquery

This support ticket is created 4 years, 2 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

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

This topic contains 1 reply, has 2 voices.

Last updated by Waqar 4 years, 2 months ago.

Assisted by: Waqar.

Author
Posts
#1815903

Hi,
I'm trying to make some jquery changes to my datepicker.

I you go to my site: hidden link you'll find a filter with a datepicker.
I would like my datepicker calendar always appears. I've been trying different options as datepicker show method, but it doesn't work. I think I can't not find the right id. Can you help me?

I have another question: There is a way de calendar datepicker have a position relative and not to have the position absolute that has now? There is a way to put the datepicker calendar after the calendar icon? If we use the jquery ui documentantion it's easy to do it, but toolset put the calendar code before the body and I can't find a method to do it.

Thanks in advance,
Jordi

#1817513

Hi Jordi,

Thank you for contacting us and I'd be happy to assist.

I'm afraid, there is no built-in filter or hook available to achieve this, so this will require a fair deal of customization.

Although, 1-1 customization of this scale is beyond the scope of support of that can be provided over the forum, we do our best to guide in the right direction, whenever possible.

1. To show an inline datepicker, you can place a special div with some ID, for example in your search form:
( ref: hidden link )


<div id="datepicker"></div>

2. After, that you can use "onSelect" option to get the selected date from this inline datepicker, for example:
( ref: hidden link )


jQuery( function() {
	jQuery('#datepicker').datepicker({
		onSelect: function (dateText, inst) {
			console.log(dateText);
			console.log(inst);
		}
	});
});

3. By default, the Toolset's original datepicker in the search form, uses a hidden input field with name format "wpv-wpcf-{field-slug}" to store the selected date in the UNIX timestamp format. Your last challenge would be to convert the date selected through the inline datepicker into UNIX timestamp format and then add it as a value in that hidden input field.

This way, when the search form will be submitted, the correct value selected through the inline datepicker will be used.

I hope these pointers will help.

regards,
Waqar