【Vue3】DatePickerを日本表記にする

環境

Nuxt	4.4.0
Vue 3 DatePicker	4.4.0

フォーマットの変更

デフォルトの状態では、入力した日時が「MM/DD/YYYY, HH:mm」で表示されるので、
これを「YYYY-MM-DD HH:mm:ss」に変更します。

locale="jp"を追加すると、曜日が日本語表記になります。

<template>
　　　<VueDatePicker
　　　　　　placeholder="ここをクリックして日時を入力"
   v-model="date"
   v-bind:format="format"
   locale="jp"
　　>
</template>

<script>
import VueDatePicker from "@vuepic/vue-datepicker"

export default {
 components: { Datepicker: VueDatePicker },
 data() {
   return {
      date: Vue.ref(),
      format: (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
    };
 },
}

</script>