Блог

У меня есть компонент ввода в 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"/>
 

Любые рекомендации будут оценены. Спасибо.

Сначала вы должны установить класс input-component, а затем вы можете скрыть значок по умолчанию

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