How to set format in range mode

[awnawnawn]

I want to input the format as '03-15-2022 07:30 03-17-2022 08:30'
How should it be set up?

components

<template>
  <div>
    <Datepicker v-model="date" range multiCalendars
                position="left"
                :format="format"
                :minDate="new Date()"
                showNowButton/>
  </div>
</template>

<script>
import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'
import {ref} from "vue";

export default {
  name: "DatepickerDemo",
  components: {
    Datepicker
  },
  setup() {
    const date = ref(new Date());

    const format = (date) => {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const min = date.getMinutes();

      return `${month}-${day}-${year} ${hours}:${min} - ${month}-${day}-${year} ${hours}:${min}`;
    }
    return {
      date,
      format
    }
  }
}
</script>

<style>
</style>

error

Uncaught TypeError: date.getFullYear is not a function

[Jasenkoo]

In the range mode, you will receive the parameter as an array [FirstDate, SecondDate | null] | null.

In your example, you are calling getFullYear on the Array and not on the Date instance.

Also, you can just pass a shorter format via string, simply add a prop format="M-d-Y", this should match your format