I need to filter records between two dates, displaying data retrieved from the backend. Instead of following the traditional method outlined in Vuetify's date pickers documentation or using the CodePen example:
Vuetify v-text-field Date Picker on CodePen
I have simplified it by only utilizing a
v-text-field type="date"HTML:
<template>
<v-layout align-start>
<v-flex>
<v-toolbar flat color="grey darken-4">
<v-toolbar-title>History</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
From:
<v-text-field type="date" class="text-xs-center ml-2 mr-4" v-model="startDate"></v-text-field>
To:
<v-text-field type="date" class="text-xs-center ml-2 mr-4" v-model="endDate"></v-text-field>
<v-btn @click="list()" color="primary" class="ml-2 mb-2">Search</v-btn>
</v-toolbar>
</v-flex>
</v-layout>
</template>
JS:
<script>
import axios from 'axios'
export default {
data(){
return{
startDate:'',
endDate:''
}
},
created () {
this.list();
},
methods:{
list(){
let me=this;
let header={"Authorization" : "Bearer " + this.$store.state.token};
let configuration= {headers : header};
let url='';
if(!me.startDate || !me.endDate){
url='api/Sales/List';
}
else{
url='api/Sales/SalesHistory/'+me.startDate+'/'+me.endDate;
}
axios.get(url,configuration).then(function(response){
me.sales=response.data;
}).catch(function(error){
console.log(error);
});
}
}
}
</script>
This setup allows me to filter records based on the selected date range.
https://i.sstatic.net/thQMf.png
The only problem I have encountered is that when switching to the Dark theme, the default black calendar icon, serving as an append-icon button, does not change to white like in Vuetify's documentation example:
https://i.sstatic.net/3mBye.png
Upon checking GitHub, I noticed that a user suggested adding color props for append prepend icons in v-text-field, but it was marked as wontfix with an unsatisfactory response. Adding an
append-icon="date_range"readonly property to prevent users from manually entering dates caused issues with the date picker functionality as well.
How can I change the color of the calendar icon?