如何在 vue 中隐藏日期选择器的默认日历图标

Question

我在 vue 中有一个输入组件，我将类型作为日期给出。

如您所见，黑色图标是 html 的默认设置。而我想要实现的，首先我想点击整个输入字段来选择日期，而不是只点击黑色图标。另外，我想删除黑色图标。

这是我在 vue 中的输入组件：

<template>
  <div>
    <div v-bind:class="{row: rowStyle, 'form-group': !smallSize}">
      <label v-if="label" for=inputName v-bind:class="labelClass" :style="labelStyle">{{ label }}</label>
      <div class="input-group" v-bind:class="inputColumnAmount">
        <div v-if="inputPrefix" class="input-group-prepend">
          <span v-html="inputPrefix"/>
        </div>
        <input
            v-if="inputType == 'text' || inputType == 'email' || inputType == 'password' || inputType == 'date'"
            :type="inputType"
            class="form-control"
            v-bind:class="inputClasses"
            v-on:focusout="$emit('value', $event.target.value)"
            :id="inputName"
            :placeholder="placeholder"
            :value="value"
            :pattern="pattern"
            :maxlength="maxlength"
            :disabled="disabled">
        <div v-if="inputSuffix" class="input-group-append">
          <span v-html="inputSuffix"/>
        </div>
          <div v-if="icon" class="input-group-append">
              <div class="input-group-text"><i :class="icon"></i></div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {v4 as uuidv4} from 'uuid';
  import GENERAL_COMPONENT_CONSTANTS from "../constants/GeneralComponentConstants";

  export default {
    props: {
      label: { type: String, default: '' },
      error: { type: String, default: '' },
      inputType: { type: String, default: 'text' },
      componentStyle: { type: String, default: GENERAL_COMPONENT_CONSTANTS.componentStyle.Row },
      inputPrefix: { type: String, default: '' },
      inputSuffix: { type: String, default: '' },
        icon: { type: String, default: '' },
      labelColumns: { type: Number | String, default: 3 },
      placeholder: { type: String, default: "" },
      value: { type: String | Number, default: "" },
      pattern: { type: String, default: "" },
      maxlength: { type: String, default: "150" },
      disabled: { type: Boolean, default: false },
      smallSize: { type: Boolean, default: false },
    },
    data() {
      return {
        inputName: "input-" + uuidv4(),
      }
    },
    computed: {
      rowStyle: function() {
        return this.componentStyle == GENERAL_COMPONENT_CONSTANTS.componentStyle.Row;
      },
      labelClass: function() {
        let labelClass = "";
        if (this.rowStyle) {
          labelClass += 'col-form-label ';
          labelClass += this.labelColumnAmount;
        }
        return labelClass;
      },
      labelColumnAmount: function () {
        return "col-sm-" + this.labelColumns;
      },
      inputColumnAmount: function () {
        if (!this.rowStyle) {
          return '';
        } else if (this.label) {
          return "col-sm-" + (12 - this.labelColumns);
        } else {
          return "col-sm-12";
        }
      },
      labelStyle() {
        if (this.disabled) {
          return "color: #6c757d;";
        } else {
          return "";
        }
      },
      inputClasses() {
        return {
          'is-invalid': this.error,
          'form-control-sm': this.smallSize,
        };
      }
    },
  }
</script>

在这里，我是如何使用它的：

<cc-input-component
            label="Create from"
            labelColumns=4
            inputType="date"
            :value="newAvailabilitySetting.from_date"
            v-on:value="newAvailabilitySetting.from_date = $event"
            icon="fa fa-calendar"/>

任何建议将不胜感激。谢谢。

Answer 1

首先你应该设置一个类输入组件，然后你可以隐藏默认图标

 input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}