Datepicker in a User Custom field

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

이 기능을 작동시키기 위해 설치해야 할 플러그인이 있나요? 테마의 head 부분에 추가했는데, 제 환경에서는 작동하지 않는 것 같습니다.

10

프로필 페이지에 대한 최신 코드는 다음과 같습니다:

<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'; // 네이티브 HTML5 날짜 입력 사용
                }
            }
        }
    });
</script>

user-field-test-selector를 해당하는 클래스 이름으로 대체하세요:

image
image1389×651 40.4 KB

input.classList.add('testSelector');는 선택 사항이며, 추가 수정에 필요할 때만 추가하면 된다고 생각합니다.

계정 생성 모달용으로도 별도의 스크립트를 작성해야 합니다.

11

연도만 제한할 수 있을까요? 다양성 모니터링과 관리를 위해 사용자의 대략적인 연령을 알고 싶지만, 생년월일을 전체적으로 저장하고 싶지는 않습니다.

또한, 이러한 방식으로 검색 가능한 드롭다운 필드(예: 수백 개의 옵션이 있는 경우)를 만들 수 있을까요?

12

타겟팅하려는 필드에 클래스를 붙이는 방법에 대한 아이디어가 있을까요? 그게 안 되면 QueryySelector 클래스를 div id로 대체할 수 있을까요?