# ユーザーカスタムフィールド内の Datepicker

**URL:** <https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550>\
**Category:** Development\
**Tags:** user-custom-fields\
**Created:** [2018 年 3 月 22 日午後 12:42 UTC](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550 "2018-03-22T12:42:55Z")\
**Posts on this page:** 1\
**Showing post:** 10

<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:** [2023 年 8 月 21 日午後 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のdate入力を使用
                }
            }
        }
    });
</script>

```

`user-field-test-selector` を対応するクラス名に置き換えてください。

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/7/a/97a108fc13453c057856ce0f7f6e06069427dd32.png)  
`input.classList.add('testSelector');` はオプションであり、さらに変更が必要な場合にのみ追加してください。

アカウント作成モーダル用に別のスクリプトを作成する必要があります。

---

_[View the full topic](https://meta.discourse.org/t/datepicker-in-a-user-custom-field/83550)._