How to hide default calendar icon from datepicker in vue

Question

I have an input component in vue and I gave the type as a date.

So as you see, the black icon is the default for html. And what I am trying to achieve, first I want to click whole input field to select the date, instead of only clicking the black icon. And also, I want to remove the black icon.

So here is my input component in 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>

And here, how I am using it:

<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"/>

Any recommendations will be appreciated. Thanks.

Answer 1

First you should set a class input-component and then you can hide default icon

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

Answer 2

Add icon-calendar slot with an empty <svg></svg> tag inside.

<date-picker>
  <template v-slot:icon-calendar>
    <svg></svg>
  </template>
</date-picker>

https://github.com/mengxiong10/vue2-datepicker/issues/722#issuecomment-1301691106