@@ -18,14 +18,31 @@
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<span v-if="!endsOn">{{ beginsOn | formatDateTimeString }}</span>
|
||||
<span v-else-if="isSameDay()">
|
||||
<span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span>
|
||||
<span v-else-if="isSameDay() && showStartTime && showEndTime">
|
||||
{{ $t('On {date} from {startTime} to {endTime}', {date: formatDate(beginsOn), startTime: formatTime(beginsOn), endTime: formatTime(endsOn)}) }}
|
||||
</span>
|
||||
<span v-else-if="endsOn">
|
||||
<span v-else-if="isSameDay() && !showStartTime && showEndTime">
|
||||
{{ $t('On {date} ending at {endTime}', {date: formatDate(beginsOn), endTime: formatTime(endsOn)}) }}
|
||||
</span>
|
||||
<span v-else-if="isSameDay() && showStartTime && !showEndTime">
|
||||
{{ $t('On {date} starting at {startTime}', {date: formatDate(beginsOn), startTime: formatTime(beginsOn)}) }}
|
||||
</span>
|
||||
<span v-else-if="isSameDay()">
|
||||
{{ $t('On {date}', {date: formatDate(beginsOn)}) }}
|
||||
</span>
|
||||
<span v-else-if="endsOn && showStartTime && showEndTime">
|
||||
{{ $t('From the {startDate} at {startTime} to the {endDate} at {endTime}',
|
||||
{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn), endTime: formatTime(endsOn)}) }}
|
||||
</span>
|
||||
<span v-else-if="endsOn && showStartTime">
|
||||
{{ $t('From the {startDate} at {startTime} to the {endDate}',
|
||||
{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn)}) }}
|
||||
</span>
|
||||
<span v-else-if="endsOn">
|
||||
{{ $t('From the {startDate} to the {endDate}',
|
||||
{startDate: formatDate(beginsOn), endDate: formatDate(endsOn)}) }}
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
@@ -34,6 +51,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
export default class EventFullDate extends Vue {
|
||||
@Prop({ required: true }) beginsOn!: string;
|
||||
@Prop({ required: false }) endsOn!: string;
|
||||
@Prop({ required: false, default: true }) showStartTime!: boolean;
|
||||
@Prop({ required: false, default: true }) showEndTime!: boolean;
|
||||
|
||||
formatDate(value) {
|
||||
if (!this.$options.filters) return;
|
||||
|
||||
Reference in New Issue
Block a user