Datepicker in un campo personalizzato utente

Sviluppatore
1

È possibile aggiungere una classe a un campo utente personalizzato per utilizzare un selettore di date?

Grazie

Modifica - La soluzione definitiva:

<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('Data di cessazione del fumo')").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

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

C’è un plugin che devo installare per farlo funzionare? L’ho aggiunto all’intestazione nel mio tema ma non sembra funzionare per me.

10

Il codice aggiornato per la pagina del profilo è:

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

Sostituisci user-field-test-selector con il nome della classe corrispondente:

image
image1389×651 40.4 KB

input.classList.add('testSelector'); è opzionale e da aggiungere solo se ne hai bisogno per ulteriori modifiche, credo.

Un altro script dovrebbe essere creato per la modale di creazione dell’account.

11

Potrebbe essere limitato solo all’anno? Siamo ansiosi di conoscere l’età approssimativa dei nostri utenti per il monitoraggio e la gestione della diversità, ma non vogliamo conservare la loro data di nascita completa.

Inoltre, è possibile utilizzare questo tipo di metodo per avere un campo a discesa ricercabile (cioè con centinaia di opzioni)?

12

Qualche idea su come posso allegare una classe al campo che sto prendendo di mira? In alternativa, è possibile sostituire la classe QueryySelector con un div id?