Datumsauswahl in einem benutzerdefinierten Feld

Entwickler
1

Ist es möglich, einem benutzerdefinierten Feld eine Klasse hinzuzufügen, um einen Datumsauswahl zu verwenden?

Vielen Dank

Edit – Die endgültige Lösung:

<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

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

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.

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?

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?