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

**URL:** https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550
**Category:** Development
**Tags:** user-custom-fields
**Created:** [22 مارس 2018، 12:42م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550 "2018-03-22T12:42:55Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [22 مارس 2018، 12:42م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/1 "2018-03-22T12:42:55Z")

</div>

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

شكرًا لك

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

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

```

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [22 مارس 2018، 1:26م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/2 "2018-03-22T13:26:52Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [22 مارس 2018، 1:35م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/3 "2018-03-22T13:35:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [22 مارس 2018، 2:13م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/4 "2018-03-22T14:13:57Z")

</div>

I got what I wanted to work using this:

A jQuery date picker in the user field input.

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

```plaintext
api.onPageChange((url) => {
        if (url === '/' || url === '/latest' || url === '/top') {

```

 ![quit-date-calendar](https://global.discourse-cdn.com/meta/original/3X/b/e/bef8fb1095247612b3fb47582e0fd58ff5374214.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [22 مارس 2018، 8:05م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/5 "2018-03-22T20:05:13Z")

</div>

Hey @Vaping_Community 🙂 Glad to see you figured out a solution!

For detecting the profile preferences page, this should work:

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

```

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [23 مارس 2018، 6:48ص UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/6 "2018-03-23T06:48:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [23 مارس 2018، 9:05ص UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/7 "2018-03-23T09:05:49Z")

</div>

Works Perfect, good job! 😄

---

<div class="post-metadata">

### Author: ![cokestroke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cokestroke/32/242007_2.png) [@cokestroke](https://meta.discourse.org/u/cokestroke)
#### Post date: [18 أغسطس 2023، 5:25م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/9 "2023-08-18T17:25:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [21 أغسطس 2023، 12:43م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/10 "2023-08-21T12:43:47Z")

</div>

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

```html
<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](https://global.discourse-cdn.com/meta/original/4X/9/7/a/97a108fc13453c057856ce0f7f6e06069427dd32.png)  
`input.classList.add('testSelector');` اختياري ويجب إضافته فقط إذا كنت بحاجة إليه لإجراء تعديلات إضافية، على ما أعتقد.

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

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [29 أغسطس 2023، 11:04م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/11 "2023-08-29T23:04:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![cokestroke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cokestroke/32/242007_2.png) [@cokestroke](https://meta.discourse.org/u/cokestroke)
#### Post date: [18 أكتوبر 2023، 4:19م UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550/12 "2023-10-18T16:19:31Z")

</div>

> [@Vaping\_Community](#):
>
> ```plaintext
> 
> <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؟