Segnaposto non visualizzato per il tipo di input = campo "data"

Sto realizzando un'app per il rilevamento del telefono. Quando provo il type="date"campo di input come mostrato di seguito, mostra il selettore di date in iPhone come mi aspettavo ma non mostra il segnaposto che ho fornito. Ho trovato lo stesso problema qui in SO, ma nessuna soluzione da nessuna parte.

 <input placeholder="Date" class="textbox-n" type="date" id="date">

Potrebbe non essere appropriato ... ma mi ha aiutato.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">

Se usi il metodo di mvp ma aggiungi l'evento onblur per cambiarlo di nuovo in un campo di testo in modo che il testo segnaposto venga visualizzato di nuovo quando il campo di input perde il focus. Rende solo l'hackeraggio un po 'più carino.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" />

Spero che questo ti aiuti.

Ho finito per usare quanto segue.

Per quanto riguarda i commenti di Firefox : in genere, Firefox non mostra alcun segnaposto di testo per la data del tipo di input. Ma poiché questa è una domanda di Cordova / PhoneGap, non dovrebbe preoccuparti (a meno che tu non voglia sviluppare contro FirefoxOS).

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}

<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">

L'ho usato nel mio css:

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

e inserisci qualcosa di simile in javascript:

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

funziona per me per i dispositivi mobili (Ios8 e Android). Ma ho usato inputmask jquery per desktop con tipo di testo di input. Questa soluzione è un bel modo se il tuo codice viene eseguito su ie8.

Ad oggi (2016), ho utilizzato con successo quei 2 frammenti (in più funzionano benissimo con Bootstrap4).

Dati di input a sinistra, segnaposto a sinistra

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

Il segnaposto scompare quando si fa clic

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
input[type="date"]:focus:before {
  content: '' !important;
}

Secondo lo standard HTML :

I seguenti attributi di contenuto non devono essere specificati e non si applicano all'elemento: accept, alt, checks, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src e larghezza.

Per me funziona:

input[type='date']:after {
  content: attr(placeholder)
}

Ho usato questo con jQuery: http://jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

Sulla base delle risposte di deadproxor e Alessio, proverei a usare solo CSS:

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

E se hai bisogno di rendere invisibile il segnaposto dopo aver scritto qualcosa nell'input, potremmo provare a usare i selettori: valid e: invalid, se il tuo input è obbligatorio.

MODIFICARE

Qui il codice se stai usando richiesto nel tuo input:

input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

<input type="date" placeholder="Date" required>

Trovato un modo migliore per risolvere il tuo problema. Penso che questo ti aiuterà. quando è focalizzata, la casella cambierà il tipo in testo in modo da mostrare il tuo segnaposto. quando è attivo, il suo tipo cambia in data, quindi verrà mostrata la vista del calendario.

<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date"> 

Ho preso l'idea di jbarlow, ma ho aggiunto un if nella funzione onblur in modo che i campi cambino il suo tipo solo se il valore è vuoto

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.value == '' ? this.type='text' : this.type='date')" id="date">

Affrontare il problema nella risposta corretta corrente "facendo clic sul campo viene visualizzata la tastiera su schermo invece del selettore di date":

Il problema è causato dal comportamento del browser in base al tipo di input quando si fa clic su (= testo). Pertanto è necessario smettere di concentrarsi sull'elemento di input (sfocatura) e quindi riavviare il focus a livello di codice sull'elemento di input che è stato definito come tipo = data da JS nel primo passaggio. La tastiera viene visualizzata in modalità numero di telefono.

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

prova la mia soluzione. Uso l'attributo "obbligatorio" per sapere se l'input è riempito e in caso contrario mostro il testo dell'attributo "segnaposto"

//HTML
<input required placeholder="Date" class="textbox-n" type="date" id="date">

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   // style it like it real placeholder
}

Mi ci è voluto un po 'per capire questo, lasciarlo così type="text"e aggiungereonfocus="(this.type='date')" , proprio come mostrato sopra.

Mi piace anche l'idea di onBlur di cui sopra

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

Spero che questo aiuti chiunque non abbia capito cosa sta succedendo sopra

Per riassumere il problema degli input di data:

• È necessario visualizzarli (ovvero evitare di visualizzare: nessuno) altrimenti l'interfaccia utente di input non verrà attivata;
• un segnaposto è contraddittorio con loro (secondo le specifiche e perché devono visualizzare una specifica interfaccia utente);
• convertirli in un altro tipo di input per il tempo non focalizzato consente i segnaposto, ma il focus quindi attiva l'interfaccia utente (tastiera) di input errata, almeno per un breve periodo, perché gli eventi di focus non possono essere cancellati.
• l'inserimento (prima) o l'aggiunta (dopo) di contenuto non impedisce la visualizzazione del valore di input della data.

La soluzione che ho trovato per soddisfare tali requisiti è utilizzare il solito trucco per definire gli elementi del modulo nativo: assicurati che l'elemento sia visualizzato ma non visibile e mostra il suo stile previsto attraverso l'etichetta associata . In genere, l'etichetta verrà visualizzata come input (incluso un segnaposto), ma sopra di essa.

Quindi, un HTML come:

<div class="date-input>
  <input id="myInput" type="date"> 
  <label for="myInput"> 
    <span class="place-holder">Enter a date</span> 
  </label>
</div>

Potrebbe essere designato come:

.date-input {
  display: inline-block;
  position: relative;
}
/* Fields overriding */
input[type=date] + label {
  position: absolute;  /* Same origin as the input, to display over it */
  background: white;   /* Opaque background to hide the input behind */
  left: 0;             /* Start at same x coordinate */
}

/* Common input styling */
input[type=date], label {  
  /* Must share same size to display properly (focus, etc.) */
  width: 15em;
  height: 1em;
  font-size: 1em;
}

Qualsiasi evento (clic, focus) su tale etichetta associata si rifletterà sul campo stesso e quindi attiverà l'interfaccia utente di input della data.

Se vuoi testare una tale soluzione dal vivo, puoi eseguire questa versione angolare dal tuo tablet o cellulare.

Quindi quello che ho deciso di fare finalmente è qui e funziona bene su tutti i browser mobili, inclusi iPhone e Android.

$(document).ready(function(){

  $('input[type="date"]').each(function(e) {
    var $el = $(this), 
        $this_placeholder = $(this).closest('label').find('.custom-placeholder');
    $el.on('change',function(){
      if($el.val()){
        $this_placeholder.text('');
      }else {
        $this_placeholder.text($el.attr('placeholder'));
      }
    });
  });
  
});

label {
  position: relative;  
}
.custom-placeholder {
    #font > .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}

<label>
  <input type="date" placeholder="Date">
  <span class="custom-placeholder">Date</span>
</label>

Data

Sto lavorando con ionicframework e la soluzione fornita da @Mumthezir è quasi perfetta. Nel caso in cui qualcuno avesse lo stesso problema come me (dopo la modifica, l'input è ancora focalizzato e durante lo scorrimento, il valore semplicemente scompare) Quindi ho aggiunto onchange per fare input.blur ()

<input placeholder="Date" class="textbox-n" type="text" onfocus=" (this.type='date')" onchange="this.blur();"  id="date"> 

Puoi

1. impostalo come testo di tipo
2. convertire alla data in primo piano
3. fare clic su di esso
4. ... lascia che l'utente controlli la data
5. in caso di modifica memorizza il valore
6. imposta l'input per digitare il testo
7. imposta il valore di input del tipo di testo sul valore memorizzato

come questo...

$("#dateplaceholder").change(function(evt) {
  var date = new Date($("#dateplaceholder").val());
  $("#dateplaceholder").attr("type", "text");
  $("#dateplaceholder").val(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
});
$("#dateplaceholder").focus(function(evt) {
  $("#dateplaceholder").attr("type", "date");
  setTimeout('$("#dateplaceholder").click();', 500);
});
$("#dateplaceholder").attr("type", "text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="dateplaceholder" placeholder="Set the date" />

Trovato un modo migliore per gestire la comprensione di base dell'utente con il passaggio del mouse e il selettore di date di apertura al clic:

<input type="text" onfocus="(this.type='date')" onmouseover="(this.type = 'date')" onblur="(this.value ? this.type = 'date' : this.type = 'text')" id="date_start" placeholder="Date">

Nascondi anche la freccia del webkit e rendila larga al 100% per coprire il clic:

input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
}

Dal punto di vista angolare sono riuscito a mettere un segnaposto nell'elemento data di tipo input.

Prima di tutto ho definito il seguente css:

.placeholder {
    color: $text-grey;
  }

  input[type='date']::before {
    content: attr(placeholder);
  }

  input::-webkit-input-placeholder {
    color: $text-grey;
  }

Il motivo per cui questo è necessario è che se il contenuto css3 ha un colore diverso dal normale segnaposto, ho dovuto usarne uno comune.

<input #birthDate
         class="birthDate placeholder"
         type="date"
         formControlName="birthDate"
         placeholder="{{getBirthDatePlaceholder() | translate}}"
         [class.error]="!onboardingForm.controls.birthDate.valid && onboardingForm.controls.birthDate.dirty"
         autocomplete="off"
         >

Quindi nel modello è stato utilizzato un attributo birthDate viewchild, per poter accedere a questo input dal componente. E ha definito un'espressione angolare sull'attributo segnaposto, che deciderà se mostrare o meno il segnaposto. Questo è il principale svantaggio della soluzione, è che devi gestire la visibilità del segnaposto.

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

Codice di mumthezir rivisto

Sono sorpreso che ci sia solo una risposta con un approccio simile a quello che ho usato.
Ho tratto ispirazione dal commento di @ Dtipson sulla risposta di @Mumthezir VP.

Per questo utilizzo due input, uno è un falso input con type="text"cui imposto il segnaposto, l'altro è il campo reale con type="date".
Sul mouseenterevento sul loro contenitore, mi nascondo l'ingresso falso e mostrare quella vera, e lo faccio il contrario sulla mouseleavemanifestazione. Ovviamente lascio visibile l'ingresso reale se ha un valore impostato su di esso.
Ho scritto il codice per usare puro Javascript ma se usi jQuery (io lo faccio) è molto facile "convertirlo".

// "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>

L'ho provato anche su un telefono Android e funziona, quando l'utente tocca il campo viene mostrato il datepicker. L'unica cosa è che, se l'input reale non aveva valore e l'utente chiude il datepicker senza scegliere una data, l'input rimarrà visibile fino a quando non toccherà al di fuori di esso. Non ci sono eventi da ascoltare per sapere quando si chiude il datepicker, quindi non so come risolverlo.

Non ho un dispositivo iOS su cui testarlo.

Espandendo la soluzione di @ mvp con javascript discreto in mente, ecco l'approccio:

HTML:

<input type="text" placeholder="Date" class="js-text-date-toggle">

Javascript:

$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

Penso che tutto ciò che devi fare è cambiare il modello per dire che il campo della data è annullabile e quindi inserire [Obbligatorio] su di esso se è richiesto. Se lo fai, il testo segnaposto viene visualizzato.

Ehi, così ieri sera mi sono imbattuto nello stesso problema e ho scoperto che una combinazione di tutte le tue risposte e un po 'di magia scintillante stanno facendo un buon lavoro:

L'HTML:

<input type="date"  name="flb5" placeholder="Datum"     class="datePickerPlaceHolder"/>

Il CSS:

@media(max-width: 1024px) {
   input.datePickerPlaceHolder:before {
      color: #A5A5A5; //here you have to match the placeholder color of other inputs
      content: attr(placeholder) !important;
   }
}

Il jQuery:

$(document).ready(function() {
    $('input[type="date"]').change(function(){
            if($(this).val().length < 1) {
                $(this).addClass('datePickerPlaceHolder');
            } else {
                $(this).removeClass('datePickerPlaceHolder');
            }
    });
});

Spiegazione: Quindi, ciò che sta accadendo qui, prima di tutto nell'HTML , è piuttosto semplice facendo semplicemente un input di data HMTL5 di base e impostando un segnaposto. Prossima fermata: CSS , stiamo impostando uno pseudo-elemento: before per simulare il nostro segnaposto, prende solo l'attributo del segnaposto dall'input stesso. L'ho reso disponibile solo a partire da una larghezza di visualizzazione di 1024px - perché lo dirò più tardi. E ora il jQuery , dopo aver rifattorizzato un paio di volte mi è venuto in mente questo bit di codice che controllerà ad ogni modifica se c'è un valore impostato o meno, in caso contrario (ri) aggiungerà la classe, viceversa .

CONOSCERE I PROBLEMI:

• c'è un problema in Chrome con il suo selettore di date predefinito, ecco a cosa serve la media query. Aggiungerà il segnaposto davanti alla cosa predefinita 'dd.mm.yyyy'. Potresti anche impostare il segnaposto dell'input della data su "data:" e regolare il colore in caso di nessun valore all'interno dell'input ... per me questo ha comportato altri problemi minori, quindi sono andato con non mostrarlo su "più grande 'schermi

spero che aiuti! cheerio!

Se sei interessato solo ai dispositivi mobili:

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}

HTML:

<div>
    <input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/>
    <h3 id="placeholder-inputDate">Date Text</h3>
</div>

JavaScript:

$('#inputDate').ready(function () {
$('#placeholder-inputDate').attr('style'
    , 'top: ' + ($('#placeholder-inputDate').parent().position().top + 10)
    + 'px; left: ' + ($('#placeholder-inputDate').parent().position().left + 0) + 'px; position: absolute;');
$('#inputDate').attr('style'
    , 'width: ' + ($('#placeholder-inputDate').width() + 32) + 'px;');
});

Ecco un altro possibile hack che non usa js e usa ancora css content. Si noti che poiché :afternon è supportato su alcuni browser per gli input, è necessario selezionare l'ingresso in un altro modo, lo stesso percontent attr('')

input[type=date]:invalid+span:after {
  content:"Birthday";
  position:absolute;
  left:0;
  top:0;
}

input[type=date]:focus:invalid+span:after {
  display:none;
}

input:not(:focus):invalid {
  color:transparent;
}

label.wrapper {
	position:relative;
}

<label class="wrapper">
	<input
 	  type="date"
  	  required="required" 
	/>
	<span></span>
</label>

Questo funziona per me che uso questo come elemento di input:

<input name="birthdate" class="" class="wpcf7-form-control wpcf7-date 
 wpcf7-validates-as-required wpcf7-validates-as-date birthdate" value="" 
 aria-required="true" aria-invalid="false" placeholder="birthdate *" 
 type="date">

Questo CSS mostra un segnaposto permanente. Il valore selezionato viene visualizzato dopo il segnaposto.

input[type="date"]:before {
    content: attr(placeholder) !important;
    margin-right: 0.5em;
    display: block;
}
/* only for FF */
@-moz-document url-prefix() {
    input[type="date"]:before {
        content: attr(placeholder) !important;
        margin-right: 0.5em;
        display: block;
        position: absolute;
        left: 200px; /* please adopt */
    }
}

Uso questa soluzione per un modulo Wordpress con il plugin contact-form-7.

Nessuna delle soluzioni funzionava correttamente per me su Chrome in iOS 12 e la maggior parte di esse non è adattata per far fronte a possibili input di più date su una pagina. Ho fatto quanto segue, che fondamentalmente crea un'etichetta falsa sull'inserimento della data e la rimuove alla spina. Sto anche rimuovendo l'etichetta falsa se la larghezza del viewport è superiore a 992 px.

JS:

function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('<span class="date-label" />');

    $('span.date-label').each(function() {
        var $placeholderText = $(this).prev('input[type="date"]').attr('placeholder');
        $(this).text($placeholderText);
    });

    $('input[type="date"]').on("click", function() {
        $(this).next("span.date-label").remove();
    });
}

CSS:

@media (max-width: 991px) {
    input[type="date"] {
        padding-left: calc(50% - 45px);
    }

    span.date-label {
        pointer-events: none;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        height: 27px;
        width: 70%;
        padding-top: 5px;
    }
}