Seletor de data em um campo personalizado do usuário

Dev
1

É possível adicionar uma classe a um campo de usuário personalizado para usar um seletor de data?

Obrigado

Edição - A Solução Final:

<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

Existe algum plugin que preciso instalar para que isso funcione? Adicionei-o ao cabeçalho do meu tema, mas não parece funcionar para mim.

10

O código atualizado para a página de perfil é:

<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 entrada de data nativa HTML5
                }
            }
        }
    });
</script>

Substitua user-field-test-selector pelo nome da classe correspondente:

image
image1389×651 40.4 KB

input.classList.add('testSelector'); é opcional e deve ser adicionado apenas se você precisar dele para modificações futuras, eu acho.

Outro script deve ser feito para o modal de criação de conta.

11

Isso poderia ser limitado apenas ao ano? Estamos ansiosos para saber a idade aproximada de nossos usuários para monitoramento e gerenciamento de diversidade, mas não queremos reter a data de nascimento completa deles.

Além disso, é possível usar esse tipo de método para ter um campo de lista suspensa pesquisável (ou seja, com centenas de opções)?

12

Alguma ideia de como posso anexar uma classe ao campo que estou a ter como alvo? Falhando nisso, é possível substituir a classe QueryySelector por um ID de div?