Datepicker in a User Custom field

Development

AI-generated summary

Datepicker in a User Custom field

Vaping_Community asked if it’s possible to add a class to a custom user field to use a datepicker. Steven suggested using a class like div.public-user-field.nameofthefield. However, Vaping_Community needed a more specific solution.

Vaping_Community found a solution using jQuery date picker and shared the code. tshenry helped improve the code by adding a condition to detect the profile page URL.

The final solution uses the following code:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/discourse-plugin" version="0.8">
    $( 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();
                });
            }
        });
    });
</script>

Canapin provided an updated code for the profile page, and nathank asked if it’s possible to limit the datepicker to just the year and if a searchable dropdown field can be created. cokestroke asked for help attaching a class to the field or replacing the QuerySelector class with a div id.

1

Is it possible to add a class to a custom user field to use a datepicker.

Thanks

Edit - The Final Solution:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<script type="text/discourse-plugin" version="0.8">
$( 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();
        	});
	 }
    });
});
</script>
2

It should already work with this class : div.public-user-field.nameofthefield

For example a custom field Book : div.public-user-field.book

3

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

4

I got what I wanted to work using this:

A jQuery date picker in the user field input.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<script type="text/discourse-plugin" version="0.8">
$( document ).ajaxComplete(function() {
    api.onPageChange(() =>{
	$( function() {
		var control = $("label:contains('Quit Smoking Date')").next('div.controls');
		$(control).find('input').addClass('quitDate');
		$( ".quitDate" ).datepicker();
	});
    });
});
</script>

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
quit-date-calendar669×290 8.78 KB

5

Hey @Vaping_Community :slightly_smiling_face: Glad to see you figured out a solution!

For detecting the profile preferences page, this should work:

<script type="text/discourse-plugin" version="0.8">
    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();
        	});
        }
    });
</script>
6

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

7

Works Perfect, good job! :smile:

9

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.

10

The up-to-date code for the profile page is:

<script type="text/discourse-plugin" version="1.4.0">
    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
                }
            }
        }
    });
</script>

Replace user-field-test-selector by the corresponding class name:

image
image1389×651 40.4 KB

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.

11

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)?

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?