Skip Navigation

[Resolved] Implement Spinner for Date Picker

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 20 replies, has 2 voices.

Last updated by wilfredC 1 year, 8 months ago.

Assisted by: Waqar.

Author
Posts
#2417327

The date picker field is performing slow, after a date is selected it takes an average of 5 seconds for the latest date to appear in the input field.

It would be awesome if there was a waiting spinner icon/animation after the user chooses the date.

I see that I am not the only one have this issue, other people also facing this kind of problem with the date picker speed.

A spinner can help improve the UX.

So when are we be able to get this implementation? if this requires custom work, can you let me know how can I implement this feature myself?

Thank

#2417383

Waqar
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting us and your observation is correct.

When you choose a date from the date-picker, an AJAX request is performed in the background that sends the selected date to the server to get back a localized timestamp, which is then added to a hidden field. This is why you'll also notice a slight delay between the selection of the date and its display in the field.

We have an internal ticket to improve this implementation so that this AJAX request part could be avoided. This will help in fixing the extra delay.

Although I don't have a time estimate to share at this time, I've added your voice to that ticket and will keep you updated.

While implementing a spinner will be more complicated, a simple workaround is to replace the default date type field in the form with a generic field and include some custom code to implement a standard date picker to that.

You'll find the detailed steps and the code snippets, in this forum thread:
https://toolset.com/forums/topic/how-to-eliminate-the-pause-between-date-selection-and-filling-in-the-field/

regards,
Waqar

#2419259

I follow the instruction, but it not working. Here is the code.

[creduserform]
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			[cred_field field='form_messages' class='alert alert-warning']
          
		</div>
	</div>
  
  	<div class="row">
		<div class="form-group col-md-12">
			<label for="%%FORM_ID%%_order_id" class="">[cred_i18n name='order_id-label']Order ID[/cred_i18n]</label>
			
          	[cred_field field="order-id" force_type="field" class="form-control" output="bootstrap"]
		</div>
	</div>
  	
  	<div class="row">
		<div class="col-6">
          <label for="%%FORM_ID%%_gender">[cred_i18n name='gender-label']Gender[/cred_i18n]</label>
			[cred_field field='gender' force_type='field' class='form-control' output='bootstrap']
     	</div>
      
		<div class="col-6">
          <label for="%%FORM_ID%%_date-of-birth">[cred_i18n name='date-of-birth-label']Date of Birth[/cred_i18n]</label>
          	<input type="text" class="shadow-event-date" name="shadow-event-date">
			 <div style="display: none;">[cred_field field='date-of-birth' force_type='field' class='form-control' output='bootstrap' select_text="Date of Birth"]</div>
      	</div>
	</div>
	
     <div class="row">
        <div class="col-6">
          <label for="%%FORM_ID%%_skin-type">[cred_i18n name='skin-type-label']Skin Type[/cred_i18n]</label>
			[cred_field field='skin-type' force_type='field' class='form-control' output='bootstrap']
       	</div>
       
        <div class="col-6">
       	<label for="%%FORM_ID%%_skin-concern">[cred_i18n name='skin-concern-label']Skin Concern[/cred_i18n]</label>
			[cred_field field='skin-concern' force_type='field' class='form-control' output='bootstrap']
       </div>
    </div>

  
  <div class="row">
    <div style="display:none; height:400px; overflow-y: scroll;" id="membership-term">
    	[elementor-template id="107608"]
    </div>
		<div class="col-md-12 tncfield">
          	[cred_generic_field type='checkbox' field='term condition agreement']
            {
            "required":1,
            "default":"1",
            "label":" "
            }
            [/cred_generic_field]
			I have read and agree to the website <a class="term-button">terms and conditions*</a>
		</div>
	</div>
  
	<div class="row">
		<div class="col-md-12">
			[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
		</div>
	</div>
</div>
[/creduserform]
jQuery( document ).ready(function() {
    jQuery( function() {
        jQuery( 'input[name="shadow-event-date"]' ).datepicker();
    });
});

jQuery(".term-button").click(function(){
    jQuery("#membership-term").slideToggle();
  });
// change author of post when the form submits
add_action( 'cred_save_data', 'custom_shadow_dates_func', 10, 2 );
function custom_shadow_dates_func( $post_id, $form_data ) {
    if ($form_data['id']==106337) {
        $date = new DateTime($_POST['shadow-event-date']);
        $date_timestamp = $date->getTimestamp();
 
        update_post_meta($post_id, 'wpcf-date-of-birth', $date_timestamp);
    }
}




#2419823

Waqar
Supporter

Languages: English (English )

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

Thanks for writing back.

To troubleshoot this, I'll need to see how this form is set up in the admin area.

Can you please share temporary admin login details, along with the page where this form can be seen?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

#2420479

Waqar
Supporter

Languages: English (English )

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

I tried to log in using the access details, but, it keeps showing the incorrect password message.

Can you please check the username and password?
(I've set your next reply as private again)

#2420497

Please try again, i reset the password

#2420603

Waqar
Supporter

Languages: English (English )

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

I'm afraid, I'm still getting the incorrect password message.

Can you please create a new administrator user with my email address: waqar.a@onthegosystems.com

This way, I'll be able to reset the password, as needed.

#2420777

ok, added, please check your inbox for password reset

#2420859

Waqar
Supporter

Languages: English (English )

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

Thank you for sharing the access details.

I didn't find any custom code in the user form "Upgrade for VIP membership", for the custom date picker field.

As your form includes a date type field to edit the current user's "Date of Birth" field, here are the slightly different steps, that you'll need to follow:

1. In the form's field editor, replace:


 [cred_field field="date-of-birth" force_type="field" class="form-control" output="bootstrap"]

With:


<input type="text" class="shadow-event-date" name="shadow-event-date" value="[types usermeta='date-of-birth' style='text' format='F j, Y' current_user='true'][/types]">
<div style="display:none;">
 [cred_field field="date-of-birth" force_type="field" class="form-control" output="bootstrap"]
 </div>

This will add a new shadow text field for the date of birth and hide the actual date type field.

2. In the form's "JS editor", include the following custom script, that will connect a date picker with the shadow date of birth field and fill its value in the hidden date type field when a date is selected:


jQuery( document ).ready(function() {
    jQuery( function() {
        jQuery( 'input[name="shadow-event-date"]' ).datepicker();
    });
    jQuery('input[name="shadow-event-date"]').on('change', function() {
        var newVal = this.value;
        jQuery('input[name="wpcf-date-of-birth[display-only]"]').val(newVal);
        jQuery('input[name="wpcf-date-of-birth[datepicker]"]').val(newVal); 
    });
});

3. The last step would be to add a custom function attached to the "cred_save_data" hook, that saves the value from the shadow date of the birth field into the actual date type date of birth field when the form is submitted:


add_action( 'cred_save_data', 'custom_shadow_dates_func', 10, 2 );
function custom_shadow_dates_func( $post_id, $form_data ) {
    if ($form_data['id']==106337) {
        $date = new DateTime($_POST['shadow-event-date']);
        $date_timestamp = $date->getTimestamp();
 
        update_user_meta($post_id, 'wpcf-date-of-birth', $date_timestamp);
    }
}

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

#2421423

After I implement your code, it showed several Fatal error after I click submit button.

You try to fill the form and try it out.

#2421465

Waqar
Supporter

Languages: English (English )

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

The same code is working on my test website, but showing an error on yours. This suggests that something specific to your website is involved.

Have you checked the server's error log for any information about the details of this error?
( ref: https://wordpress.org/support/article/debugging-in-wordpress/ )

In case you don't see any errors in the log, even after turning on WordPress debugging, I'll need your permission to download a clone/snapshot of your website, to investigate this on a different server.

#2421625

I turn on the debug, got these error log:

Deprecated: Function _register_controls is deprecated since version 3.1.0! Use Elementor\Controls_Stack::register_controls() instead. in /[xxxxxx]/wp-includes/functions.php on line 5379........

...... /[xxxxxx]/wp-content/plugins/types/vendor/toolset/toolset-common/lib/adodb-time.inc.php on line 1048

For full list of error log, you can try to submit the form.

#2422397

Waqar
Supporter

Languages: English (English )

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

I've done some more tests, but the error messages alone are not very conclusive.

Do I have your permission to download a clone/snapshot of the website, to test it on my server?

#2422867

Please hold on, let me ask my client for the permission

#2422913

Waqar
Supporter

Languages: English (English )

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

Sure, I'll wait for the permission.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.