Show correct weekday in preview

src/components/input/datepicker.vue

@@ -21,7 +21,7 @@
 							Today
 						</span>
 						<span class="weekday">
-							Wed
+							{{ getWeekdayFromStringInterval('today') }}
 						</span>
 					</span>
 				</a>
@@ -34,7 +34,7 @@
 							Tomorrow
 						</span>
 						<span class="weekday">
-							Wed
+							{{ getWeekdayFromStringInterval('tomorrow') }}
 						</span>
 					</span>
 				</a>
@@ -47,7 +47,7 @@
 							Next Monday
 						</span>
 						<span class="weekday">
-							Wed
+							{{ getWeekdayFromStringInterval('nextMonday') }}
 						</span>
 					</span>
 				</a>
@@ -60,7 +60,7 @@
 							This Weekend
 						</span>
 						<span class="weekday">
-							Wed
+							{{ getWeekdayFromStringInterval('thisWeekend') }}
 						</span>
 					</span>
 				</a>
@@ -73,7 +73,7 @@
 							Later This Week
 						</span>
 						<span class="weekday">
-							Wed
+							{{ getWeekdayFromStringInterval('laterThisWeek') }}
 						</span>
 					</span>
 				</a>
@@ -86,7 +86,7 @@
 							Next Week
 						</span>
 						<span class="weekday">
-							Wed
+							{{ getWeekdayFromStringInterval('nextWeek') }}
 						</span>
 					</span>
 				</a>
@@ -105,7 +105,8 @@
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
-import calculateDayInterval from '@/helpers/calculateDayInterval'
+import {calculateDayInterval, getAbsoluteWeekDay} from '@/helpers/calculateDayInterval'
+import {weekdaysShort} from '@/helpers/weekdays'
 
 export default {
 	name: 'datepicker',
@@ -163,6 +164,9 @@ export default {
 		getDayIntervalFromString(date) {
 			return calculateDayInterval(date)
 		},
+		getWeekdayFromStringInterval(date) {
+			return weekdaysShort[getAbsoluteWeekDay(date)]
+		},
 	},
 }
 </script>

src/helpers/calculateDayInterval.js

@@ -1,18 +1,17 @@
-
-export default function calculateDayInterval(date, currentDay = (new Date().getDay())) {
-	switch(date) {
+export function calculateDayInterval(date, currentDay = (new Date().getDay())) {
+	switch (date) {
 		case 'today':
 			return 0
 		case 'tomorrow':
 			return 1
 		case 'nextMonday':
 			// Monday is 1, so we calculate the distance to the next 1
-			return (currentDay + (8 - currentDay * 2)) %  7
+			return (currentDay + (8 - currentDay * 2)) % 7
 		case 'thisWeekend':
 			// Saturday is 6 so we calculate the distance to the next 6
 			return (6 - currentDay) % 6
 		case 'laterThisWeek':
-			if(currentDay === 5 || currentDay === 6 || currentDay === 0) {
+			if (currentDay === 5 || currentDay === 6 || currentDay === 0) {
 				return 0
 			}
 
@@ -21,7 +20,13 @@ export default function calculateDayInterval(date, currentDay = (new Date().getD
 			return calculateDayInterval('laterThisWeek', currentDay) + 7
 		case 'nextWeek':
 			return 7
-		default: 
-			return 0;
+		default:
+			return 0
 	}
 }
+
+export function getAbsoluteWeekDay(date, currentDay = (new Date()).getDay()) {
+	const interval = calculateDayInterval(date)
+
+	return (currentDay + interval) % 7
+}

src/helpers/weekdays.js

@@ -0,0 +1,19 @@
+export const weekdays = {
+	1: 'monday',
+	2: 'tuesday',
+	3: 'wednesday',
+	4: 'thursday',
+	5: 'friday',
+	6: 'saturday',
+	0: 'sunday',
+}
+
+export const weekdaysShort = {
+	1: 'mon',
+	2: 'tue',
+	3: 'wed',
+	4: 'thu',
+	5: 'fri',
+	6: 'sat',
+	0: 'sun',
+}

src/styles/components/datepicker.scss

@@ -34,9 +34,10 @@
                 display: flex;
                 justify-content: space-between;
                 padding-right: .25rem;
-            
+
                 .weekday {
                     color: $text-light;
+                    text-transform: capitalize;
                 }
             }