Vuetify 캘린더 날짜 형식을 변경하는 방법

Vuetify 캘린더 날짜 형식을 변경하는 방법

다음 Vuetify 캘린더에서 입력된 이벤트를 활성화하려고 합니다.

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue 를 참조해 주세요.

이름, 상세, 시작, 종료, 색상 등의 형태로 제출되는 입력 데이터를 받아들이도록 캘린더를 설정했습니다.양식을 제출하면 다음과 같은 오류가 발생합니다.

start 및 end 속성은 모든 이벤트에서 YYY-MM-DD 형식의 유효한 타임스탬프여야 합니다.

MM-DD-YYY로 날짜를 렌더링하는 시작 및 종료 입력 필드에 type="date"를 사용하고 있습니다.대신 YYY-MM-DD 형식으로 렌더링할 필드를 얻기 위해 Vuetify 달력 선택기를 사용했지만 소용이 없었습니다.날짜의 MM-DD-YYY 형식을 받아들이도록 이 캘린더를 재설정하려면 어떻게 해야 합니까?

캘린더 수정 완료:

함수에 추가된 모멘트

      async addEvent () {
        this.start = await new Date(this.start).toISOString().substring(0,10)
        this.end =  await new Date(this.end).toISOString().substring(0,10)
        this.events.push({name: this.name})
        this.events.push({details: this.details})
        this.events.push({start: this.start})
        this.events.push({end: this.end})
        this.events.push({color: this.color})
      },

풀코드

<template>
  <v-row class="fill-height">
    <v-col>
      <v-sheet height="64">
        <v-toolbar flat color="white">
          <v-btn outlined class="mr-4" @click="setToday">
            Today
          </v-btn>
          <v-btn fab text small @click="prev">
            <v-icon small>mdi-chevron-left</v-icon>
          </v-btn>
          <v-btn fab text small @click="next">
            <v-icon small>mdi-chevron-right</v-icon>
          </v-btn>
          <v-btn
            color="primary"
            dark
            @click.stop="dialog = true"
          >
            New Event
          </v-btn>
          <v-toolbar-title>{{ title }}</v-toolbar-title>
          <div class="flex-grow-1"></div>
        </v-toolbar>
      </v-sheet>

      <v-dialog v-model="dialog" max-width="500">
        <v-card>
          <v-container>
            <v-form @submit.prevent="addEvent">
              <v-text-field v-model="name" type="text" label="name"></v-text-field>
              <v-text-field v-model="details" type="text" label="detail"></v-text-field>
              <v-text-field v-model="start" type="date" label="start"></v-text-field>
              <v-text-field v-model="end" type="date" label="end"></v-text-field>
              <v-text-field v-model="color" label="color"></v-text-field>
              <v-btn type="submit" color="success" class="mr-4" @click.stop="dialog = false">
                submit
              </v-btn>
            </v-form>
          </v-container>
        </v-card>
      </v-dialog>

      <v-sheet height="600">
        <v-calendar
          ref="calendar"
          v-model="focus"
          color="primary"
          :events="events"
          :event-color="getEventColor"
          :event-margin-bottom="3"
          :now="today"
          :type="type"
          @click:event="showEvent"
          @click:more="viewDay"
          @click:date="viewDay"
          @change="updateRange"
        ></v-calendar>
        <v-menu
          v-model="selectedOpen"
          :close-on-content-click="false"
          :activator="selectedElement"
          full-width
          offset-x
        >
          <v-card
            color="grey lighten-4"
            min-width="350px"
            flat
          >
            <v-toolbar
              :color="selectedEvent.color"
              dark
            >
              <v-btn icon>
                <v-icon>mdi-pencil</v-icon>
              </v-btn>
              <v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
              <div class="flex-grow-1"></div>
              <v-btn icon>
                <v-icon>mdi-heart</v-icon>
              </v-btn>
              <v-btn icon>
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </v-toolbar>
            <v-card-text>
              <span v-html="selectedEvent.details"></span>
            </v-card-text>
            <v-card-actions>
              <v-btn
                text
                color="secondary"
                @click="selectedOpen = false"
              >
                Cancel
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-menu>
      </v-sheet>
    </v-col>
  </v-row>
</template>

<script>
  //import moment from 'moment'
  export default {
    data: () => ({
      today: '2019-01-08',
      focus: '2019-01-08',
      type: 'month',
      typeToLabel: {
        month: 'Month',
        week: 'Week',
        day: 'Day',
        '4day': '4 Days',
      },
      name: null,
      details: null,
      start: null,
      end: null,
      color: null,
      selectedEvent: {},
      selectedElement: null,
      selectedOpen: false,
      events: [
        {
          name: 'Vacation',
          details: 'Going to the beach!',
          start: '2018-12-29',
          end: '2019-01-01',
          color: 'blue',
        }
      ],
      dialog: false,
    }),
    computed: {
      title () {
        const { start, end } = this
        if (!start || !end) {
          return ''
        }
        const startMonth = this.monthFormatter(start)
        const endMonth = this.monthFormatter(end)
        const suffixMonth = startMonth === endMonth ? '' : endMonth
        const startYear = start.year
        const endYear = end.year
        const suffixYear = startYear === endYear ? '' : endYear
        const startDay = start.day + this.nth(start.day)
        const endDay = end.day + this.nth(end.day)
        switch (this.type) {
          case 'month':
            return `${startMonth} ${startYear}`
          case 'week':
          case '4day':
            return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`
          case 'day':
            return `${startMonth} ${startDay} ${startYear}`
        }
        return ''
      },
      monthFormatter () {
        return this.$refs.calendar.getFormatter({
          timeZone: 'UTC', month: 'long',
        })
      },
    },
    methods: {
      viewDay ({ date }) {
        this.focus = date
        this.type = 'day'
      },
      getEventColor (event) {
        return event.color
      },
      setToday () {
        this.focus = this.today
      },
      prev () {
        this.$refs.calendar.prev()
      },
      next () {
        this.$refs.calendar.next()
      },
      async addEvent () {
        this.start = await new Date(this.start).toISOString().substring(0,10)
        this.end =  await new Date(this.end).toISOString().substring(0,10)
        console.log(this.start)
        this.events.push({name: this.name})
        this.events.push({details: this.details})
        this.events.push({start: this.start})
        this.events.push({end: this.end})
        this.events.push({color: this.color})
      },
      showEvent ({ nativeEvent, event }) {
        const open = () => {
          this.selectedEvent = event
          this.selectedElement = nativeEvent.target
          setTimeout(() => this.selectedOpen = true, 10)
        }
        if (this.selectedOpen) {
          this.selectedOpen = false
          setTimeout(open, 10)
        } else {
          open()
        }
        nativeEvent.stopPropagation()
      },
      updateRange ({ start, end }) {
        // You could load events from an outside source (like database) now that we have the start and end dates on the calendar
        this.start = start
        this.end = end
      },
      nth (d) {
        return d > 3 && d < 21
          ? 'th'
          : ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
      },
    },
  }
</script>

그럴 필요 없어요.moment.js이 명령어는 2줄의 코드에만 사용되므로 다음과 같이 간단하게 실행할 수 있습니다.

   addEvent () {
        this.start = new Date(this.start).toISOString().substring(0,10);
        this.end =  new Date(this.end).toISOString().substring(0,10);
        ...
            this.events.push({name: this.name,
                              details: this.details,
                              start: this.start,
                              end: this.end,
                             color: this.color})

See the Pen Vuetify 예제 펜 by boussadjra ( @boussadjra) on 코드펜.

Vuetify 캘린더의 개발자로서 제 의견은 이렇습니다.이벤트가 문자열을 사용하는 이유는 종일 이벤트와 시간 초과 이벤트를 구별하기 위해서입니다.종일 이벤트는 YYY-MM-DD 형식이고, 시간 지정 이벤트는 YYY-MM-DD HH:mm:ss 형식입니다(여기서 초는 옵션이며 숫자를 0으로 패딩할 필요는 없습니다).

단, 이 PR이 Marge되어 출시되면 날짜 또는 UTC 타임스탬프를 전달할 수 있습니다.

https://github.com/vuetifyjs/vuetify/pull/11198

그런 다음 해당 이벤트를 시간 지정 이벤트로 표시하는 함수 또는 속성을 정의할 수 있습니다.

날짜를 다음과 같이 포맷하는 것이 좋습니다.MM-DD-YYYYvuetify를 수정하는 대신 양식을 제출할 때 필요한 형식으로 변환하십시오.

Moment.js는 이러한 유형의 변환에 적합한 라이브러리이며 쉬운 API를 갖추고 있습니다.

당신의 경우, 간단히 할 수 있습니다.this.end = moment(this.end).format('MM-DD-YYYY');

언급URL : https://stackoverflow.com/questions/57717902/how-to-change-vuetify-calendar-date-format