محدد التاريخ في حقل مخصص للمستخدم

[Vaping_Community]

هل من الممكن إضافة فئة إلى حقل مستخدم مخصص لاستخدام منتقي تاريخ؟

شكرًا لك

تحرير - الحل النهائي:

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

[Steven]

It should already work with this class : div.public-user-field.nameofthefield

For example a custom field Book : div.public-user-field.book

[Vaping_Community]

And if it is “Quit Smoking Date”? What then?

[Vaping_Community]

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') {

[tshenry (Taylor)]

Hey @Vaping_Community 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>

[Vaping_Community]

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

[Vaping_Community]

Works Perfect, good job!

[cokestroke (Clement Oke)]

هل هناك مكون إضافي أحتاج إلى تثبيته لجعله يعمل؟ لقد أضفته إلى قسم الرأس في القالب الخاص بي ولكنه لا يبدو أنه يعمل بالنسبة لي.

[Canapin (Coin-coin le Canapin)]

الكود المحدث لصفحة الملف الشخصي هو:

<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 باسم الفئة المقابل:

input.classList.add('testSelector'); اختياري ويجب إضافته فقط إذا كنت بحاجة إليه لإجراء تعديلات إضافية، على ما أعتقد.

يجب إنشاء نص برمجي آخر لنافذة إنشاء الحساب.

[nathank (Nathan Kershaw)]

هل يمكن قصر هذا على السنة فقط؟ نحن حريصون على معرفة العمر التقريبي لمستخدمينا لمراقبة التنوع وإدارته، ولكننا لا نرغب في الاحتفاظ بتاريخ ميلادهم الكامل.\n\nأيضًا، هل من الممكن استخدام هذا النوع من الطرق للحصول على حقل قائمة منسدلة قابلة للبحث (أي مع مئات الخيارات)؟

[cokestroke (Clement Oke)]

@Vaping_Community

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

هل لديك أي أفكار حول كيفية إرفاق فئة بالحقل الذي أستهدفه؟ إذا لم يكن ذلك ممكنًا، فهل يمكن استبدال فئة QueryySelector بمعرف div؟