diff --git a/nuxt.config.ts b/nuxt.config.ts
index 884bcb9..06a50ba 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -43,4 +43,7 @@ export default defineNuxtConfig({
       routes: ['/', '/404.html', '/200.html'],
     },
   },
+  build: {
+    transpile: ['@vuepic/vue-datepicker']
+},
 });
diff --git a/package-lock.json b/package-lock.json
index 46202e0..b063e7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,9 @@
     "": {
       "name": "nuxt-app",
       "hasInstallScript": true,
+      "dependencies": {
+        "@vuepic/vue-datepicker": "^8.5.0"
+      },
       "devDependencies": {
         "@nuxt/devtools": "latest",
         "@nuxtjs/google-fonts": "^3.1.3",
@@ -514,7 +517,6 @@
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
       "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1206,8 +1208,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
@@ -2865,7 +2866,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
       "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.0",
         "@vue/shared": "3.3.7",
@@ -2877,7 +2877,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
       "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-core": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -2887,7 +2886,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz",
       "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.0",
         "@vue/compiler-core": "3.3.7",
@@ -2905,7 +2903,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
       "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -2921,7 +2918,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
       "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
-      "dev": true,
       "dependencies": {
         "@vue/shared": "3.3.7"
       }
@@ -2930,7 +2926,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz",
       "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.0",
         "@vue/compiler-core": "3.3.7",
@@ -2943,7 +2938,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz",
       "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==",
-      "dev": true,
       "dependencies": {
         "@vue/reactivity": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -2953,7 +2947,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz",
       "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==",
-      "dev": true,
       "dependencies": {
         "@vue/runtime-core": "3.3.7",
         "@vue/shared": "3.3.7",
@@ -2964,7 +2957,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
       "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -2976,8 +2968,21 @@
     "node_modules/@vue/shared": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
-      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
-      "dev": true
+      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg=="
+    },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.5.0.tgz",
+      "integrity": "sha512-p8CHPJYJ1nQgrKzVBaDi1ZO9G9syuvOacPDNMF4uViHsXGdUyGLZbgrvvcmDTd0xYtyCUswiH6S27gb1E7qQ2Q==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
     },
     "node_modules/abbrev": {
       "version": "1.1.1",
@@ -4145,8 +4150,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/cuint": {
       "version": "0.2.2",
@@ -4154,6 +4158,15 @@
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4564,8 +4577,7 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/etag": {
       "version": "1.8.1",
@@ -5853,7 +5865,6 @@
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -7398,8 +7409,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -7437,7 +7447,6 @@
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
       "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7992,7 +8001,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
       "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8900,7 +8908,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10526,7 +10533,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz",
       "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.7",
         "@vue/compiler-sfc": "3.3.7",
diff --git a/package.json b/package.json
index 8065b36..829cbda 100644
--- a/package.json
+++ b/package.json
@@ -13,5 +13,8 @@
     "@nuxtjs/google-fonts": "^3.1.3",
     "nuxt": "^3.8.0",
     "sass": "^1.66.1"
+  },
+  "dependencies": {
+    "@vuepic/vue-datepicker": "^8.5.0"
   }
 }
diff --git a/pages/contact/index.vue b/pages/contact/index.vue
index b7454bc..4716080 100644
--- a/pages/contact/index.vue
+++ b/pages/contact/index.vue
@@ -104,82 +104,13 @@
               </template>
               <!--日付-->
               <template v-if="n.type === 6">
-                <div class="u-display-flex u-display-flex-align-items-center">
-                  <select
-                    v-model="y"
-                    @change="setYMD(n.key)"
-                    :name="n.key + '_y'"
-                    :id="n.key + '_y'"
-                  >
-                    <option label="選択なし" value="">選択なし</option>
-                    <option
-                      v-for="option in n.attribute.arrYear"
-                      :key="option.key"
-                      :label="option"
-                      :value="option"
-                    >
-                      {{ option }}
-                    </option></select
-                  ><label :for="n.key + '_y'" class="u-pa-10">年</label>
-
-                  <select
-                    v-model="m"
-                    @change="setYMD(n.key)"
-                    :name="n.key + '_m'"
-                  >
-                    <option label="選択なし" value="">選択なし</option>
-                    <option label="01" value="01">01</option>
-                    <option label="02" value="02">02</option>
-                    <option label="03" value="03">03</option>
-                    <option label="04" value="04">04</option>
-                    <option label="05" value="05">05</option>
-                    <option label="06" value="06">06</option>
-                    <option label="07" value="07">07</option>
-                    <option label="08" value="08">08</option>
-                    <option label="09" value="09">09</option>
-                    <option label="10" value="10">10</option>
-                    <option label="11" value="11">11</option>
-                    <option label="12" value="12">12</option></select
-                  ><label :for="n.key + '_m'" class="u-pa-10">月</label>
-                  <select
-                    v-model="d"
-                    @change="setYMD(n.key)"
-                    :name="n.key + '_d'"
-                  >
-                    <option label="選択なし" value="">選択なし</option>
-                    <option label="01" value="01">01</option>
-                    <option label="02" value="02">02</option>
-                    <option label="03" value="03">03</option>
-                    <option label="04" value="04">04</option>
-                    <option label="05" value="05">05</option>
-                    <option label="06" value="06">06</option>
-                    <option label="07" value="07">07</option>
-                    <option label="08" value="08">08</option>
-                    <option label="09" value="09">09</option>
-                    <option label="10" value="10">10</option>
-                    <option label="11" value="11">11</option>
-                    <option label="12" value="12">12</option>
-                    <option label="13" value="13">13</option>
-                    <option label="14" value="14">14</option>
-                    <option label="15" value="15">15</option>
-                    <option label="16" value="16">16</option>
-                    <option label="17" value="17">17</option>
-                    <option label="18" value="18">18</option>
-                    <option label="19" value="19">19</option>
-                    <option label="20" value="20">20</option>
-                    <option label="21" value="21">21</option>
-                    <option label="22" value="22">22</option>
-                    <option label="23" value="23">23</option>
-                    <option label="24" value="24">24</option>
-                    <option label="25" value="25">25</option>
-                    <option label="26" value="26">26</option>
-                    <option label="27" value="27">27</option>
-                    <option label="28" value="28">28</option>
-                    <option label="29" value="29">29</option>
-                    <option label="30" value="30">30</option>
-                    <option label="31" value="31">31</option></select
-                  ><label :for="n.key + '_d'" class="u-pa-10">日</label>
-                </div>
+                <Datepicker
+                  v-model="submitData[n.key]"
+                  :enable-time-picker="false"
+                  :format-locale="ja"
+                  :format="formatDate"
+                  week-start="0"
+                />
               </template>
               <!-- ファイル -->
               <template v-if="n.type === 7">
@@ -319,8 +250,12 @@
 </template>
 
 <script setup>
-const config = useRuntimeConfig();
+import Datepicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { format } from "date-fns";
+import { ja } from "date-fns/locale";
 
+const config = useRuntimeConfig();
 const submitted = ref(false);
 const errors = ref([]);
 const errorRef = ref(null);
@@ -331,6 +266,16 @@ const y = ref("");
 const m = ref("");
 const d = ref("");
 const loading = ref(false);
+const date = ref();
+const dateVar = ref(null);
+
+const formatDate = (date) => {
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+
+  return `${year}/${month}/${day}`;
+};
 
 const { data: response } = await useFetch(
   `${config.public.kurocoApiDomain}/rcms-api/1/inquiry/1`,
@@ -347,6 +292,10 @@ Object.keys(response.value.details.cols).forEach((key) => {
     submitData[object.key] = ref([]);
   }
 
+  if (object.type === 6) {
+    dateVar.value = object.key;
+  }
+
   if (object.type === 10 && object.attribute.selection_type === "multiple") {
     Object.keys(object.options[1].value).forEach((key) => {
       if (!submitData[object.key]) {
@@ -363,10 +312,6 @@ Object.keys(response.value.details.cols).forEach((key) => {
   }
 });
 
-const setYMD = (key) => {
-  submitData[key] = `${y.value}-${m.value}-${d.value}`;
-};
-
 const handleFileChange = async (e) => {
   const fm = new FormData();
   fm.append("file", e.target.files[0]);
@@ -396,6 +341,13 @@ const handleFileChange = async (e) => {
 };
 
 const handleOnSubmit = async () => {
+  if (dateVar.value && submitData[dateVar.value]) {
+    const formattedDate = format(
+      new Date(submitData[dateVar.value]),
+      "yyyy-MM-dd"
+    );
+    submitData[dateVar.value] = formattedDate;
+  }
   try {
     loading.value = true;
     const response = await $fetch(