Question

我正在过滤两个日期之间的记录，这将显示从后端带来的数据。而不是像下面的CodePen那样使用Vuetify的documentation on date pickers中的常规方法：

Vuetify v-text-field Date Picker on CodePen

我仅使用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:&nbsp;
                <v-text-field type="date" class="text-xs-center ml-2 mr-4" v-model="startDate"></v-text-field>
                To:&nbsp;
                <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>

它使我可以过滤在两个选定日期之间发生的记录。

我偶然发现的唯一问题是，当切换为深色主题时，看起来像append-icon（在这种情况下充当按钮）的默认黑色日历图标不会切换到就像在Vuetify的文档示例中一样：

我在GitHub上发现有人requested为颜色道具添加了一些东西，用于在v-text-field中添加前置图标（听起来确实很方便），但是请求被标记了就像 wontfix 一样，给出的答案似乎对他和我想要的东西也很不利。

如果我添加append-icon="date_range"，它将仅在默认的黑色日历图标旁边添加另一个图标（颜色正确），并且它会停止日期选择器本身的工作。我也不能添加readonly道具（目的是避免用户键入日期，键入时仅用数字填充文本字段，但当年份仅接受数字时，最多接受6个字符是4），因为它也会停止日期选择器的工作。

如何更改日历图标的颜色？

Answer 1

您在这里！ codepen link

全局设置黑暗模式主题

我认为您想这样做。从您的屏幕截图来看，即使您已切换到“暗”模式，您的日期模式仍处于亮模式下。如果您不在全球范围内这样做，我想您会发现自己将很多单独的组件标记为“ dark”，而不是让<v-app>将主题委托给他们。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  created () {
    this.$vuetify.theme.dark = true
    // oooor, do it based on to the browser's settings
    // this.$vuetify.theme.dark = window.matchMedia('(prefers-color-scheme)').media !== 'not all'
  },
})

基本上，Vuetify是...固执己见。他们有很多的scss变量和复杂的样式。要更改可变颜色，通常必须穿过前门。尤其是在黑暗模式下。

使用插槽的v文本字段内部的自定义图标颜色

如果您要为文本字段内的一个图标自定义特定的图标颜色，则可以使用v-textfield的广告位（记录在here中）并通过任何您想要的东西（例如使用颜色道具的v-icon）

实现更自定义的UX时，可以在组件内部使用this.$vuetify.theme.dark来确定应该是“浅”还是“暗”

Answer 2

您要指出的图标不是VTextField创建的。相反，它实际上是part of the native <input>。

如果您希望继续使用VTextField的本机<input>作为日期选择器，则目前无法更改该图标AFAIK的颜色，但是您可以使用CSS调整该图标的背景::-webkit-calendar-picker-indicator作为选择器，它允许几个选项作为解决方案。

选项1：减轻图标的背景颜色

您可以将图标的背景变浅为灰色，从而在黑暗模式下提高图标的可见性：

.theme--dark input[type="date"]::-webkit-calendar-picker-indicator {
  background-color: #ccc;
}

demo 1

选项2：更改图标图像

您还可以在黑暗模式下将图标的图像更改为明亮图标的PNG：

.theme--dark input[type="date"]::-webkit-calendar-picker-indicator {
  background: url(https://img.icons8.com/cotton/64/000000/calendar.png) no-repeat;
  background-size: 24px 24px;
}

demo 2

Answer 3

只需在您的文本字段中添加一个属性dark即可：

  <v-text-field dark type="date" class="text-xs-center ml-2 mr-4" v-model="startDate">
  </v-text-field>

Vuetify-更改v文本字段的默认颜色type = date图标

3 个答案:

全局设置黑暗模式主题

使用插槽的v文本字段内部的自定义图标颜色

选项1：减轻图标的背景颜色

选项2：更改图标图像