Is it possible to add a class to a custom user field to use a datepicker. Thanks Edit - The Final Solution: $( document ).ajaxComplete(function() { api.onPageChange((url) =>{ if (url.match(/\/preferences\/profile/)) { $( function() { var control = $("label:contains('Quit Smoking Date')").next('div.controls'); $(control).find('input').addClass('quitDate'); $( ".quitDate" ).datepicker(); }); } }); });

It should already work with this class : div.public-user-field.nameofthefield For example a custom field Book : div.public-user-field.book

And if it is “Quit Smoking Date”? What then?

I got what I wanted to work using this: A jQuery date picker in the user field input. $( document ).ajaxComplete(function() { api.onPageChange(() =>{ $( function() { var control = $("label:contains('Quit Smoking Date')").next('div.controls'); $(control).find('input').addClass('quitDate'); $( ".quitDate" ).datepicker(); }); }); }); It would be nice to be able to detect the profile page URL using this but I couldn’t get it to work api.onPageChange((url) => { if (url === '/' || url === '/latest' || url === '/top') { [quit-date-calendar]

Hey @Vaping_Community :slightly_smiling_face: Glad to see you figured out a solution! For detecting the profile preferences page, this should work: api.onPageChange((url) =>{ if (url.match(/\/preferences\/profile/)) { $(function() { var control = $("label:contains('Quit Smoking Date')").next('div.controls'); $(control).find('input').addClass('quitDate'); $(".quitDate").datepicker(); }); } });

I will give this a try today, thank you very much :+1:

Works Perfect, good job! :smile:

Is there a plugin that I need to install to make this work? I added it to the head in my theme but it doesn’t seem to work for me.

The up-to-date code for the profile page is: api.onPageChange((url) =>{ if (url.match(/\/preferences\/profile/)) { var userField = document.querySelector('.user-field-test-selector'); if (userField) { var input = userField.querySelector('input'); if (input) { input.classList.add('testSelector'); input.type = 'date'; // Using native HTML5 date input } } } }); Replace user-field-test-selector by the corresponding class name: [image] input.classList.add('testSelector'); is optional and to be added only if you need it for further modifications, I think. Another script should be made for the account creation modal.

Could this be limited just to year? We are keen to know the approx age of our users for diversity monitoring and management, but don’t want to hold their full date of birth. Also, is it possible to use this sort of method to have a searchable dropdown field (i.e. with 100s of options)?

Datepicker in a User Custom field

מפתח

cokestroke (Clement Oke) 18 באוקטובר,‏ 2023,‏ 4:19pm 12

Any ideas how I can attach a class to the field I’m targeting? Failing that is it possible to replace the QueryySelector class with a div id?

נושא		תגובות	צפיות
Date Type On Custom User Fields Feature completed	15	3180	19 בפברואר,‏ 2026
Conditional user fields Feature user-custom-fields	13	839	9 בפברואר,‏ 2026
Adding Custom Fields via Plugin Outlet Development	4	1273	19 בדצמבר,‏ 2019
Extra fields in profile - dropdown selector Feature completed , user-custom-fields	2	1673	3 באוגוסט,‏ 2015
Css class calendar picking advanced search - foundation theme Product Support	6	180	16 בספטמבר,‏ 2025

Datepicker in a User Custom field

נושאים קשורים