[Closed] Date pickers appear empty in Toolset Forms Edit Mode

[Author]

Posts

[Christian Cox]

After deactivating other plugins I was still able to reproduce the issue, so I checked in the Form's JS panel to see any custom JavaScript that may be causing this issue. I was able to change the behavior by commenting out the minDate setting here:

jQuery(window).bind("load", function() {
	//jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "0");;
});

Now the datepicker seems to function in Safari, so I suspect that modifying this option upon the window's load event is problematic now. There is no public JavaScript API for Forms events, so you may need to experiment with the timing of when this option is set with JavaScript. I see there is another delayed function in this Form's JS panel, so you might try moving this commented line into that delayed function callback, but again, I can't guarantee this will work since there is no public event to "hook" into.

[simonM-5]

Hey Christian

Thanks for the update. The delay you mentioned was added by you so that the maps could be displayed correctly. 😉

It is essential that the maps are displayed when editing the Ads. The restriction on the date-picker is in place to prevent users from picking dates in the past.

So you see no workaround here that would allow the maps to be displayed AND prevent users from picking dates in the past?

Thanks and best regards
Simon

[Christian Cox]

That's not quite what I am suggesting. I'm not saying you need to remove the delay that was added for maps. I'm talking about something else entirely - changing the timing of when the minDate option is set. The code you are using to set the date format option might work if you delay it, like we have delayed the maps geocomplete options. You could move the minDate action inside the same delayed function used to trigger the map update. This is the line of code that I'm referring to:

jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "0");

In other words instead of this code:

jQuery(window).bind("load", function() {
	jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "0");
});

var delayed = function() {
	jQuery(".js-toolset-maps-address-autocomplete").each(function(index,item){
		var map = jQuery(item).closest('.js-toolset-google-map-container').find('.js-toolset-google-map-preview:eq(0)');
		jQuery(item).geocomplete({'country':'DE', 'type': [], 'map': map});
	});
};
jQuery(document).ready(function(){
	setTimeout( delayed, 2000 );  
});

...you could experiment with delaying the action that modifies the minDate option. This update would trigger the minDate action after the same delay used to trigger the geocomplete action:

var delayed = function() {
	jQuery(".js-toolset-maps-address-autocomplete").each(function(index,item){
		var map = jQuery(item).closest('.js-toolset-google-map-container').find('.js-toolset-google-map-preview:eq(0)');
		jQuery(item).geocomplete({'country':'DE', 'type': [], 'map': map});
	});
	jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "0");
};
jQuery(document).ready(function(){
	setTimeout( delayed, 2000 );  
});

Or, you could create a separate delayed function with a different time delay, specifically for modifying the datepicker minDate option separately from the maps delay:

var delayed1 = function() {
	jQuery(".js-toolset-maps-address-autocomplete").each(function(index,item){
		var map = jQuery(item).closest('.js-toolset-google-map-container').find('.js-toolset-google-map-preview:eq(0)');
		jQuery(item).geocomplete({'country':'DE', 'type': [], 'map': map});
	});
};
var delayed2 = function() {
	jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "0");
};
jQuery(document).ready(function(){
	setTimeout( delayed1, 2000 );  
	setTimeout( delayed2, 3000 );  
});

Again, these are just some suggestions you can try in lieu of a public JavaScript API for Forms.

[simonM-5]

Hi Christian

Thanks for the suggestions, I will give them a whirl today or tomorrow. The ticket was threatened to being closed.

Kind regards
Simon

[Christian Cox]

Understood, I will stand by for your update.