Datepicker in a User Custom field

Dev
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>
5 Likes
2

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

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

1 Like
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

2 Likes
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 Likes
6

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

2 Likes
7

Works Perfect, good job! :smile:

1 Like
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.

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

1 Like
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?