<html lang="ja-jp" dir="ltr"><head></head><body>### [WPFormsの日時フィールドの日付オプションをカスタマイズする方法](https://wpforms.com/developers/customize-the-date-time-field-date-options/)

**公開日:** 2021年2月26日
**著者:** Umair Majeed

**抜粋:** このチュートリアルでは、日付ピッカーおよび日付ドロップダウンフォームフィールドをカスタマイズする方法について、いくつかの異なる例を紹介します。

**コンテンツ:**

WPFormsの日時フィールドの日付オプションをカスタマイズしたいですか？ **日付/時刻**フィールドには、日付セレクターのフォーマットオプションが2つあります。**日付ピッカー**（ユーザーにカレンダーを提供）または**日付ドロップダウン**です。

バージョン1.6.3のリリースにより、WPFormsではフォームビルダー内で**日数の制限**、**過去の日付の無効化**、および**時間の制限**を行うオプションが提供されています。これだけであれば、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/how-to-limit-options-for-the-date-time-field/ "日付/時刻フィールドのオプションを制限する方法")。

このチュートリアルでは、**日付ドロップダウン**フィールドのカスタマイズと、**日付ピッカー**の日付計算ブロックに焦点を当てます。

このドキュメントのコードスニペットを**使用する**場合は、制限のためのフォームビルダーオプションを**オフ**にする必要があることを覚えておくことが重要です。日付を制限するための組み込みオプションの詳細については、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/how-to-limit-options-for-the-date-time-field/#limit-date)。

## フォームの作成

スニペットを追加する前に、フォームを作成してフィールドを追加する必要があります。このチュートリアルは**日付ドロップダウン**フィールドに基づいているため、少なくとも1つの**日付**フィールドを追加する必要があります。

フォームの作成についてサポートが必要な場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/docs/creating-first-form/ "日付/時刻フィールド日付オプションのカスタマイズ方法")。

日付フィールドを追加したら、**タイプ**を**日付ドロップダウン**に選択したことを確認してください。フォームフィールドの**高度なオプション**をクリックすることで、**日付タイプ**を設定できます。

![日付フィールドのフォーマットを日付ドロップダウンに選択](https://wpforms.com/wp-content/uploads/2021/02/wpforms-set-date-dropdown.jpg)## 日付フィールドのカスタマイズ

**日付**フィールドをカスタマイズするには、以下のコードスニペットのいずれかをサイトに追加する必要があります。

サイトにコードスニペットを追加する方法を学ぶのにサポートが必要な場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsのカスタムPHPまたはJavaScriptの追加方法")。

以下のコードスニペットの一部では、特定の[フォームIDとフィールドID](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの検索方法")情報を使用する必要があります。

## 日付ドロップダウンでのスニペットの使用

#### ドロップダウンの日数をその月の利用可能な日数と一致するように制限する

その月の利用可能な日数と**日数**フィールドを一致させるには、このスニペットを使用します。

```

/**
 * 選択した月に利用可能な日数と一致するように日数ドロップダウンを制限します。
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 */
 
function wpf_dev_days_dropdown_match_month( ) {
?&gt;

**カテゴリ:** フィールド

**タグ:** 日時フィールド, Javascript, PHP

---</body></html>