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>
5 个赞
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 个赞
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 个赞
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 个赞
6

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

2 个赞
7

Works Perfect, good job! :smile:

1 个赞
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'); 是可选的，只有在您需要进一步修改时才添加，我想。

另一个脚本应该为帐户创建模态框制作。

1 个赞
11

这是否可以仅限于年份？我们希望了解我们用户的近似年龄，以进行多元化监控和管理，但又不想保留他们的完整出生日期。

另外，是否可以使用这种方法来创建一个可搜索的下拉字段（即有数百个选项）？

1 个赞
12

有什么办法可以给目标字段添加一个类吗？如果不行，是否可以用 div id 替换 QueryySelector 类？