Bootstrap 4 ввода даты, чтобы показать значок календаря

Question

Мне не нравится, как выглядит ввод даты в Bootstrap 4. Сейчас у него два состояния, и когда вы наводите курсор на него, он показывает 3 стрелки. И одна из стрелок открывает календарь.

Я хочу заменить их все одним значком календаря ( update1 : но календарь должен быть активным) , как показано на рисунке ниже.

update2 : https://jsfiddle.net/wxeg4vk7/

<input type="date" class="form-control" id="pickupdate">

Как мне этого добиться?

Спасибо!

Answer 1

Для начала скройте счетчики даты по умолчанию html5. Затем настройте цвет и положение индикатора выбора даты ...

.form-control[type=date]::-webkit-inner-spin-button, 
.form-control[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}   

input[type=date]::-webkit-calendar-picker-indicator {
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    z-index: -1;
    position: relative;
    transform: translateX(16px);
}

Наконец, используйте input-group ...

<div class="input-group">
   <input class="form-control py-2 border-right-0 border" type="date">
   <span class="input-group-append ml-n1">
     <div class="input-group-text bg-transparent"><i class="fa fa-calendar-alt"></i></div>
   </span>
</div>

https://codeply.com/p/22Kp9X4CAD

Answer 2

Добавьте это в ваш пользовательский CSS:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Это уберет стрелки вверх / вниз.

Вот перо Bootstrap 4: https://codepen.io/fraktar/pen/jObWwdz