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

Development

cokestroke (Clement Oke) October 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?

Topic		Replies	Views
Date Type On Custom User Fields Feature completed	15	3168	February 19, 2026
Conditional user fields Feature user-custom-fields	13	832	February 9, 2026
Adding Custom Fields via Plugin Outlet Development	4	1272	December 19, 2019
Extra fields in profile - dropdown selector Feature completed , user-custom-fields	2	1670	August 3, 2015
Css class calendar picking advanced search - foundation theme Product Support	6	177	September 16, 2025

Datepicker in a User Custom field

Related topics