Я здивований, що є лише одна відповідь із таким підходом, який я використовував.
Я отримав натхнення від коментаря @ Dtipson щодо відповіді @Mumthezir VP.
Для цього я використовую два входи, один - підроблений вхід, type="text"на якому я встановлюю заповнювач, інший - це реальне поле type="date".
Під час mouseenterподії на їх контейнері я приховую підроблені дані і показую справжній, і я роблю навпаки mouseleaveподії. Очевидно, я залишаю реальний вхід visibile, якщо на ньому встановлено значення.
Я написав код для використання чистого Javascript, але якщо ви використовуєте jQuery (я це роблю), це дуже просто "перетворити" його.
// "isMobile" function taken from this reply:
// https://stackoverflow.com/a/20293441/3514976
function isMobile() {
try { document.createEvent("TouchEvent"); return true; }
catch(e) { return false; }
}
var deviceIsMobile = isMobile();
function mouseEnterListener(event) {
var realDate = this.querySelector('.real-date');
// if it has a value it's already visible.
if(!realDate.value) {
this.querySelector('.fake-date').style.display = 'none';
realDate.style.display = 'block';
}
}
function mouseLeaveListener(event) {
var realDate = this.querySelector('.real-date');
// hide it if it doesn't have focus (except
// on mobile devices) and has no value.
if((deviceIsMobile || document.activeElement !== realDate) && !realDate.value) {
realDate.style.display = 'none';
this.querySelector('.fake-date').style.display = 'block';
}
}
function fakeFieldActionListener(event) {
event.preventDefault();
this.parentElement.dispatchEvent(new Event('mouseenter'));
var realDate = this.parentElement.querySelector('.real-date');
// to open the datepicker on mobile devices
// I need to focus and then click on the field.
realDate.focus();
realDate.click();
}
var containers = document.getElementsByClassName('date-container');
for(var i = 0; i < containers.length; ++i) {
var container = containers[i];
container.addEventListener('mouseenter', mouseEnterListener);
container.addEventListener('mouseleave', mouseLeaveListener);
var fakeDate = container.querySelector('.fake-date');
// for mobile devices, clicking (tapping)
// on the fake input must show the real one.
fakeDate.addEventListener('click', fakeFieldActionListener);
// let's also listen to the "focus" event
// in case it's selected using a keyboard.
fakeDate.addEventListener('focus', fakeFieldActionListener);
var realDate = container.querySelector('.real-date');
// trigger the "mouseleave" event on the
// container when the value changes.
realDate.addEventListener('change', function() {
container.dispatchEvent(new Event('mouseleave'));
});
// also trigger the "mouseleave" event on
// the container when the input loses focus.
realDate.addEventListener('blur', function() {
container.dispatchEvent(new Event('mouseleave'));
});
}
.real-date {
display: none;
}
/* a simple example of css to make
them look like it's the same element */
.real-date,
.fake-date {
width: 200px;
height: 20px;
padding: 0px;
}
<div class="date-container">
<input type="text" class="fake-date" placeholder="Insert date">
<input type="date" class="real-date">
</div>
Я перевірив це також на телефоні Android, і він працює, коли користувач натискає на поле відображається датчик. Єдине, що якщо реальний вхід не мав значення і користувач закриває панель вибору дати, не вибираючи дату, вхід залишатиметься видимим, поки він не натисне за межі нього. Немає жодної події, щоб слухати, щоб знати, коли вибірка дати закривається, тому я не знаю, як це вирішити.
У мене немає пристрою iOS, щоб перевірити його.