Datepicker in a User Custom field

Desarrollador
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 Me gusta
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 me gusta
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 Me gusta
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 Me gusta
6

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

2 Me gusta
7

Works Perfect, good job! :smile:

1 me gusta
9

¿Hay algún plugin que necesite instalar para que esto funcione? Lo agregué al encabezado de mi tema, pero no parece funcionar para mí.

10

El código actualizado para la página de perfil es:

<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'; // Usando la entrada de fecha nativa de HTML5
                }
            }
        }
    });
</script>

Reemplace user-field-test-selector por el nombre de clase correspondiente:

image
image1389×651 40.4 KB

input.classList.add('testSelector'); es opcional y solo debe agregarse si lo necesita para modificaciones posteriores, creo.

Se debe crear otro script para el modal de creación de cuenta.

1 me gusta
11

¿Podría limitarse esto solo al año? Estamos interesados en conocer la edad aproximada de nuestros usuarios para el monitoreo y la gestión de la diversidad, pero no queremos conservar su fecha de nacimiento completa.

Además, ¿es posible utilizar este tipo de método para tener un campo desplegable con búsqueda (es decir, con cientos de opciones)?

1 me gusta
12

¿Alguna idea de cómo puedo adjuntar una clase al campo que estoy apuntando? Si no, ¿es posible reemplazar la clase QueryySelector con un div id?