Ich bin überrascht, dass es nur eine Antwort gibt, deren Ansatz dem von mir verwendeten ähnelt.
Ich habe mich von @ Dtipsons Kommentar zur Antwort von @Mumthezir VP inspirieren lassen.
Ich benutze dafür zwei Eingaben, eine ist eine gefälschte Eingabe, mit type="text"der ich den Platzhalter setze, die andere ist das reale Feld mit type="date".
Bei dem mouseenterEreignis in ihrem Container verstecke ich die gefälschte Eingabe und zeige die echte, und bei dem mouseleaveEreignis mache ich das Gegenteil . Offensichtlich lasse ich die reale Eingabe sichtbar, wenn ein Wert darauf eingestellt ist.
Ich habe den Code geschrieben, um reines Javascript zu verwenden, aber wenn Sie jQuery verwenden (das tue ich), ist es sehr einfach, ihn zu "konvertieren".
// "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>
Ich habe dies auch auf einem Android-Handy getestet und es funktioniert, wenn der Benutzer auf das Feld tippt, wird der Datepicker angezeigt. Die einzige Sache ist, wenn die reale Eingabe keinen Wert hatte und der Benutzer die Datumsauswahl schließt, ohne ein Datum auszuwählen, bleibt die Eingabe sichtbar, bis sie außerhalb tippen. Es gibt kein Ereignis zum Anhören, um zu erfahren, wann der Datepicker geschlossen wird, daher weiß ich nicht, wie ich das lösen soll.
Ich habe kein iOS-Gerät, auf dem ich es testen kann.