1 files changed, 17 insertions, 2 deletions
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
index 1408312d3e4..a523dd3b391 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
@@ -1,6 +1,8 @@
 <script>
-import { GlButton, GlTableLite, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlTableLite } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
+import { formatDate } from '~/lib/utils/datetime/date_format_utility';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const DEFAULT_TD_CLASSES = 'gl-vertical-align-middle!';
@@ -12,7 +14,7 @@ export default {
     GlTableLite,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
   i18n: {
@@ -77,6 +79,11 @@ export default {
   safeHtmlConfig: {
     ADD_TAGS: ['use'],
   },
+  methods: {
+    formatDate(dateString) {
+      return formatDate(new Date(dateString));
+    },
+  },
 };
 </script>
 <template>
@@ -90,6 +97,14 @@ export default {
       <div v-safe-html:[$options.safeHtmlConfig]="preview"></div>
     </template>
 
+    <template #cell(starts_at)="{ item: { starts_at } }">
+      {{ formatDate(starts_at) }}
+    </template>
+
+    <template #cell(ends_at)="{ item: { ends_at } }">
+      {{ formatDate(ends_at) }}
+    </template>
+
     <template #cell(buttons)="{ item: { id, edit_path, disable_delete } }">
       <gl-button
         icon="pencil"