src/components/date/datepickerWithRange.vue

@@ -1,17 +1,24 @@
 <template>
 	<div class="datepicker-with-range">
 		<div class="selections">
-			<a @click="setDatesToToday">Today</a>
-			<a @click="setDatesToNextWeek">Next Week</a>
-			<a @click="setDatesToNextMonth">Next Month</a>
-			<a>Custom</a>
+			<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
+				{{ $t('task.show.today') }}
+			</button>
+			<button @click="setDateRange(datesNextWeek)" :class="{'is-active': dateRange === datesNextWeek}">
+				{{ $t('task.show.nextWeek') }}
+			</button>
+			<button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}">
+				{{ $t('task.show.nextMonth') }}
+			</button>
+			<button :class="{'is-active': customRangeActive}">
+				{{ $t('misc.custom') }}
+			</button>
 		</div>
 		<div class="flatpickr-container">
 			<flat-pickr
 				:config="flatPickerConfig"
 				v-model="dateRange"
 			/>
-			{{ dateRange }}
 		</div>
 	</div>
 </template>
@@ -48,12 +55,16 @@ const dateRange = ref('')
 watch(
 	() => dateRange.value,
 	newVal => {
+		if (newVal === null) {
+			return
+		}
+
 		const [fromDate, toDate] = newVal.split(' to ')
-		
+
 		if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
 			return
 		}
-		
+
 		emit('dateChanged', {
 			dateFrom: new Date(fromDate),
 			dateTo: new Date(toDate),
@@ -65,23 +76,33 @@ function formatDate(date) {
 	return format(date, 'yyyy-MM-dd HH:mm')
 }
 
-function setDatesToToday() {
+const datesToday = computed(() => {
 	const startDate = new Date()
 	const endDate = new Date((new Date()).setDate((new Date()).getDate() + 1))
-	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
-}
+	return `${formatDate(startDate)} to ${formatDate(endDate)}`
+})
 
-function setDatesToNextWeek() {
+const datesNextWeek = computed(() => {
 	const startDate = new Date()
 	const endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
-	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
-}
+	return `${formatDate(startDate)} to ${formatDate(endDate)}`
+})
 
-function setDatesToNextMonth() {
+const datesNextMonth = computed(() => {
 	const startDate = new Date()
 	const endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
-	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+	return `${formatDate(startDate)} to ${formatDate(endDate)}`
+})
+
+function setDateRange(range) {
+	dateRange.value = range
 }
+
+const customRangeActive = computed(() => {
+	return dateRange.value !== datesToday.value &&
+		dateRange.value !== datesNextWeek.value &&
+		dateRange.value !== datesNextMonth.value
+})
 </script>
 
 <style lang="scss" scoped>
@@ -113,7 +134,7 @@ function setDatesToNextMonth() {
 	display: flex;
 	flex-direction: column;
 
-	a {
+	button {
 		display: block;
 		width: 100%;
 		text-align: left;
@@ -121,12 +142,15 @@ function setDatesToNextMonth() {
 		transition: $transition;
 		font-size: .9rem;
 		color: var(--text);
+		background: transparent;
+		border: 0;
+		cursor: pointer;
 
-		&.active {
+		&.is-active {
 			color: var(--primary);
 		}
 
-		&:hover, &.active {
+		&:hover, &.is-active {
 			background-color: var(--grey-100);
 		}
 	}

src/i18n/lang/en.json

@@ -476,7 +476,8 @@
     "showMenu": "Show the menu",
     "hideMenu": "Hide the menu",
     "forExample": "For example:",
-    "welcomeBack": "Welcome Back!"
+    "welcomeBack": "Welcome Back!",
+    "custom": "Custom"
   },
   "input": {
     "resetColor": "Reset Color",