Datepicker in a User Custom field

Entwickler
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
6

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

2 „Gefällt mir“
7

Works Perfect, good job! :smile:

1 „Gefällt mir“
9

Gibt es ein Plugin, das ich installieren muss, damit dies funktioniert? Ich habe es in den Kopfbereich meines Themes eingefügt, aber es scheint für mich nicht zu funktionieren.

10

Der aktuelle Code für die Profilseite lautet:

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

Ersetzen Sie user-field-test-selector durch den entsprechenden Klassennamen:

image
image1389×651 40.4 KB

input.classList.add('testSelector'); ist optional und sollte nur hinzugefügt werden, wenn Sie es für weitere Änderungen benötigen, denke ich.

Ein weiteres Skript sollte für das Modal zur Kontoerstellung erstellt werden.

1 „Gefällt mir“
11

Könnte dies auf das Jahr beschränkt werden? Wir möchten das ungefähre Alter unserer Nutzer für die Überwachung und Verwaltung der Vielfalt erfahren, möchten aber nicht ihr vollständiges Geburtsdatum speichern.

Ist es außerdem möglich, diese Art von Methode für ein durchsuchbares Dropdown-Feld (d. h. mit Hunderten von Optionen) zu verwenden?

1 „Gefällt mir“
12

Irgendwelche Ideen, wie ich eine Klasse an das Feld anhängen kann, das ich anspreche? Wenn das nicht geht, ist es möglich, die QueryySelector-Klasse durch eine div-ID zu ersetzen?