Почему не отображается заполнитель и иконка инпута даты в bootstrap на мобильных устройствах?

Ситуация следующая, собрал группу формы

<div class="col-md-6 form-group"> 	<div class="form-group mt-3 mt-md-0"> 		<div data-tip="Введите номер телефона указанный в договоре"> 			<input placeholder="+7 (123) 456-78-90" type="text" class="form-control phonenumb" name="phonenumb" value="" required /> </div> 		<div data-tip="Выберите удобную дату"> 			<input id="checkDate" name="checkDate" class="form-control" type="date" onchange="getdate(event);" required /> </div> 	</div> </div>

Имею следующий вид в десктоп браузере (в режиме просмотра мобильного тоже):

Но если открываю в браузере сафари или гугл хром на телефоне (физическом устройстве), то вижу следующее:

Получается что у меня в мобильных инпут даты просто пустой хотя работает и при нажатии всплывает подсказка о выборе даты и диалоговое окошко даты появляется, после выбора в инпуте отображается выбранная дата. Но отсутствие каких либо предписаний к инпуту сбивает с толку посетителей сайта. Как решить данную проблему?

Дополнительно:

Заполнитель в каком формате передаёте в инпут?

$(document).ready(function() {     var date = new Date();     // var today = date.toISOString().slice(0, 10);     var minInput = new Date(date.setDate(date.getDate() + 3)).toISOString().slice(0, 10);     var maxInput = new Date(date.setDate(date.getDate() + 7)).toISOString().slice(0, 10);      $("#checkDate").attr('min', minInput);     $("#checkDate").attr('max', maxInput);      $('.phonenumb').inputmask("+7 (999) 999-99-99");  });

В общем я решил задачу тем, что просто устанавливаю значение по умолчанию, при таком раскладе инпут всегда заполнен датой, что позволяет человеку понять что это инпут даты (даже с учётом того, что иконка не во всех браузерах отображается).

Вот пример js, в котором я вычисляю минимальную и максимальную даты от текущей и по умолчанию выставляю минимальную доступную дату:

var minInput = getMinDateForInput();     $("#checkDate").val(minInput);

В моём случае минимальная дата может быть только завтра, но если "завтра" - суббота или воскресенье, то минимальная доступная дата - грядущий понедельник:

function getMinDateForInput() {     var currentDate = new Date();     currentDate.setDate(currentDate.getDate() + 1);      while (currentDate.getDay() === 0 || currentDate.getDay() === 6) {         currentDate.setDate(currentDate.getDate() + 1); // Если да, увеличиваем дату на один день     }     var year = date.getFullYear();     var month = ('0' + (date.getMonth() + 1)).slice(-2);     var day = ('0' + date.getDate()).slice(-2);      var formattedDate = year + '-' + month + '-' + day;     return formattedDate; }

Ответы:

у меня была похожая проблема
placeholder не отображается при type="date"
и я нашел более ли менее подходящее мне решение возможно оно и тебе поможет)

<input class="number_pasport" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date_of_issue" placeholder="Дата выдачи">

• В такой реализации не очень удобно то, что нужно кликнуть сначала на инпут, который является текстом, после клика он изменится на инпут дату и нужно будет ещё раз на него жать, чтобы открыть датапикер. В общем как по мне не очень, для себя можно сделать, а для продакшена - не прокатит.