diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
index ec03836106..3075953355 100644
--- a/src/components/announcements_page/announcements_page.js
+++ b/src/components/announcements_page/announcements_page.js
@@ -1,14 +1,19 @@
 import { mapState } from 'vuex'
 import Announcement from '../announcement/announcement.vue'
+import Checkbox from '../checkbox/checkbox.vue'
 
 const AnnouncementsPage = {
   components: {
-    Announcement
+    Announcement,
+    Checkbox
   },
   data () {
     return {
       newAnnouncement: {
-        content: ''
+        content: '',
+        startsAt: undefined,
+        endsAt: undefined,
+        allDay: false
       },
       posting: false,
       error: undefined
@@ -29,6 +34,11 @@ const AnnouncementsPage = {
     postAnnouncement () {
       this.posting = true
       this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+        .then(() => {
+          this.newAnnouncement.content = ''
+          this.startsAt = undefined
+          this.endsAt = undefined
+        })
         .catch(error => {
           this.error = error.error
         })
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index 1b3bd578bd..e81edee12b 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -23,6 +23,29 @@
               :placeholder="$t('announcements.post_placeholder')"
               :disabled="posting"
             />
+            <span class="announcement-metadata">
+              <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
+              <input
+                id="announcement-start-time"
+                v-model="newAnnouncement.startsAt"
+                :type="newAnnouncement.allDay ? 'date' : 'datetime-local'"
+              >
+            </span>
+            <span class="announcement-metadata">
+              <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
+              <input
+                id="announcement-end-time"
+                v-model="newAnnouncement.endsAt"
+                :type="newAnnouncement.allDay ? 'date' : 'datetime-local'"
+              >
+            </span>
+            <span class="announcement-metadata">
+              <Checkbox
+                id="announcement-all-day"
+                v-model="newAnnouncement.allDay"
+              />
+              <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
+            </span>
           </div>
           <div class="footer">
             <button
@@ -80,6 +103,9 @@
       display: flex;
       align-items: stretch;
       flex-direction: column;
+      .announcement-metadata {
+        margin-top: 0.5em;
+      }
     }
 
     .post-textarea {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 96b8bd7007..752d581142 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1381,11 +1381,11 @@ const postAnnouncement = ({ credentials, content, startsAt, endsAt, allDay }) =>
   const payload = { content }
 
   if (typeof startsAt !== 'undefined') {
-    payload['starts_at'] = startsAt
+    payload['starts_at'] = new Date(startsAt).toISOString()
   }
 
   if (typeof endsAt !== 'undefined') {
-    payload['ends_at'] = endsAt
+    payload['ends_at'] = new Date(endsAt).toISOString()
   }
 
   if (typeof allDay !== 'undefined') {