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

Question

[alexandrsemen4ukk]

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

<div class="col-md-6 form-group">
	<div class="form-group mt-3 mt-md-0">
		<div data-tip="Введите номер телефона указанный в договоре">
			<input placeholder="[phone]" 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>

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

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

Comments

[Sergey В.]

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

[alexandrsemen4ukk]

Sergey В., да я его и не передаю в явном виде, я устанавливаю минимальную дату и максимальную, в том формате, который javascript отдаёт из Date() и привожу его к ISOString удаляя ненужное из строки. Вот так:

$(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("[phone]"); 
});

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

Answer 1

[alexandrsemen4ukk]

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

Вот пример 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;
}

Answer 2

[nkochnevss]

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

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

Comments

[alexandrsemen4ukk]

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