Better handle datetime

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/DateTimePicker.vue

@@ -19,11 +19,18 @@
                 expanded
                 :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
                 :min-date="minDate"
-                v-model="date"
+                v-model="dateWithoutTime"
                 :placeholder="$t('Click to select')"
                 icon="calendar"
         />
-        <b-input expanded type="time" required v-model="time" />
+        <b-timepicker
+                placeholder="Type or select a time..."
+                icon="clock"
+                v-model="dateWithTime"
+                expanded
+                size="is-small"
+                inline>
+        </b-timepicker>
     </b-field>
 </template>
 <script lang="ts">
@@ -53,40 +60,26 @@ export default class DateTimePicker extends Vue {
      */
   @Prop({ required: false, type: Date, default: null }) minDate!: Date;
 
-  date: Date = this.value;
-  time: string = '00:00';
+  dateWithoutTime: Date = this.value;
+  dateWithTime: Date = this.dateWithoutTime;
 
   localeShortWeekDayNamesProxy = localeShortWeekDayNames();
   localeMonthNamesProxy = localeMonthNames();
 
-  mounted() {
-    this.convertTime();
+  @Watch('value')
+  updateValue() {
+    this.dateWithoutTime = this.value;
+    this.dateWithTime = this.dateWithoutTime;
   }
 
-  convertTime() {
-    let minutes = this.date.getHours() * 60 + this.date.getMinutes();
-    minutes = Math.ceil(minutes / this.step) * this.step;
-
-    this.time = [Math.floor(minutes / 60), minutes % 60].map((v) => { return v < 10 ? `0${v}` : v; }).join(':');
-  }
-
-  @Watch('time')
-  updateTime(time: string) {
-    const [hours, minutes] = time.split(':', 2);
-    this.date.setHours(parseInt(hours, 10));
-    this.date.setMinutes(parseInt(minutes, 10));
+  @Watch('dateWithoutTime')
+  updateDateWithoutTimeWatcher() {
     this.updateDateTime();
   }
 
-  @Watch('date')
-  updateDate() {
-    this.updateTime(this.time);
-  }
-
-  @Watch('value')
-  updateValue() {
-    this.date = this.value;
-    this.convertTime();
+  @Watch('dateWithTime')
+  updateDateWithTimeWatcher() {
+    this.updateDateTime();
   }
 
   updateDateTime() {
@@ -95,7 +88,17 @@ export default class DateTimePicker extends Vue {
      *
      * @type {Date}
      */
-    this.$emit('input', this.date);
+    this.dateWithoutTime.setHours(this.dateWithTime.getHours());
+    this.dateWithoutTime.setMinutes(this.dateWithTime.getMinutes());
+    this.$emit('input', this.dateWithoutTime);
   }
 }
 </script>
+
+<style lang="scss" scoped>
+    .timepicker {
+        /deep/ .dropdown-content {
+            padding: 0;
+        }
+    }
+</style>

js/src/components/Event/EventFullDate.vue

@@ -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;