Não mostrando o espaço reservado para o tipo de entrada = campo “data”

Estou fazendo um aplicativo phonegap. Quando estou tentando o type="date"campo de entrada conforme mostrado abaixo, ele mostra o seletor de data no iPhone como eu esperava, mas não mostra o marcador de posição que dei. Encontrei o mesmo problema aqui no SO, mas nenhuma solução em lugar nenhum.

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

Pode não ser apropriado ... mas me ajudou.

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

Se você usar o método mvp, mas adicionar o evento onblur para alterá-lo de volta para um campo de texto, para que o texto do espaço reservado apareça novamente quando o campo de entrada perder o foco. Isso apenas torna o hack um pouco mais agradável.

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

Espero que isto ajude.

Acabei usando o seguinte.

Com relação ao (s) comentário (s) do Firefox: Geralmente, o Firefox não mostra nenhum marcador de posição de texto para a data do tipo de entrada. Mas como esta é uma questão Cordova / PhoneGap, isso não deve ser motivo de preocupação (a menos que você queira desenvolver para o 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':'')">

Eu usei isso no meu css:

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

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

e colocar algo assim no javascript:

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

funciona para mim para dispositivos móveis (Ios8 e Android). Mas eu usei jquery inputmask para desktop com tipo de texto de entrada. Esta solução é uma boa maneira se o seu código rodar no ie8.

Até hoje (2016), usei com sucesso esses 2 snippets (além disso, eles funcionam muito bem com o Bootstrap4).

Dados de entrada à esquerda, espaço reservado à esquerda

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

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

O marcador desaparece ao clicar

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

De acordo com o padrão HTML :

Os seguintes atributos de conteúdo não devem ser especificados e não se aplicam ao elemento: aceitar, alt, verificado, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src e largura.

Funciona para mim:

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

Eu usei este com 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');
    });
});

Com base nas respostas de deadproxor e Alessio, eu tentaria usar apenas CSS:

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

E se você precisar tornar o placeholder invisível após escrever algo na entrada, podemos tentar usar os seletores: valid e: invalid, se sua entrada for obrigatória.

EDITAR

Aqui está o código, se você estiver usando obrigatório em sua entrada:

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>

Encontrou uma maneira melhor de resolver seu problema. Eu acho que isso vai te ajudar. quando focalizado, a caixa mudará o tipo em texto para mostrar o espaço reservado. quando focado em, seu tipo muda para data para que a visualização do calendário seja mostrada.

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

Eu peguei a ideia do jbarlow, mas adicionei um if na função onblur para que os campos só mudem de tipo se o valor estiver vazio

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

Resolvendo o problema na resposta correta atual "clicar no campo mostra o teclado na tela em vez do selecionador de data":

O problema é causado pelo comportamento do navegador de acordo com o tipo de entrada ao clicar (= texto). Portanto, é necessário parar de focar no elemento de entrada (desfoque) e, em seguida, reiniciar o foco programaticamente no elemento de entrada que foi definido como type = date por JS na primeira etapa. O teclado é exibido no modo de número de telefone.

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

tente minha solução. Eu uso o atributo 'obrigatório' para saber se a entrada está preenchida e, caso não seja, mostro o texto do atributo 'espaço reservado'

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

Levei um tempo para descobrir isso, deixe como type="text"e adicioneonfocus="(this.type='date')" , como mostrado acima.

Eu até gosto da ideia onBlur mencionada acima

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

Espero que isso ajude alguém que não entendeu bem o que está acontecendo acima

Para resumir o problema das entradas de data:

• Você deve exibi-los (ou seja, evitar display: none), caso contrário, a IU de entrada não será acionada;
• um espaço reservado é contraditório com eles (de acordo com as especificações e porque eles precisam exibir uma IU específica);
• convertê-los para outro tipo de entrada para o tempo desfocado permite espaços reservados, mas o foco então aciona a IU de entrada incorreta (teclado), pelo menos por um curto período, porque os eventos de foco não podem ser cancelados.
• inserir (antes) ou adicionar (depois) conteúdo não impede que o valor de entrada de data seja exibido.

A solução que encontrei para atender a esses requisitos é usar o truque usual para estilizar os elementos nativos do formulário: garantir que o elemento seja exibido, mas não visível, e exibir seu estilo esperado por meio de seu rótulo associado . Normalmente, o rótulo é exibido como entrada (incluindo um espaço reservado), mas sobre ele.

Portanto, um HTML como:

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

Pode ser denominado como:

.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;
}

Qualquer evento (clique, foco) em um rótulo associado será refletido no próprio campo e, portanto, acionará a IU de entrada de data.

Se você quiser testar essa solução ao vivo, pode executar esta versão Angular em seu tablet ou celular.

ASSIM, o que decidi fazer finalmente está aqui e está funcionando bem em todos os navegadores móveis, incluindo iPhones e Androids.

$(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>

Encontro

Estou trabalhando com estrutura iônica e a solução fornecida por @Mumthezir é quase perfeita. No caso de alguém ter o mesmo problema que eu (após a mudança, a entrada ainda está focada e ao rolar, o valor simplesmente desaparece) Então eu adicionei onchange para fazer input.blur ()

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

Você pode

1. defina como tipo de texto
2. converter para data em foco
3. clique nele
4. ... deixe o usuário verificar a data
5. em troca, armazene o valor
6. defina a entrada para digitar o texto
7. definir o valor de entrada do tipo de texto para o valor armazenado

como isso...

$("#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" />

Encontrou uma maneira melhor de lidar com a compreensão básica do usuário com o mouseover e abrindo o selecionador de data com um clique:

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

Além disso, oculte a seta do webkit e torne-a 100% ampla para cobrir o clique:

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;
}

Do ponto de vista angular, consegui colocar um espaço reservado no elemento data do tipo de entrada.

Em primeiro lugar, defini o seguinte css:

.placeholder {
    color: $text-grey;
  }

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

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

A razão pela qual isso é necessário é que se o conteúdo css3 tem uma cor diferente do placeholder normal, então eu tive que usar um comum.

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

Em seguida, no modelo usado um atributo viewchild birthDate, para poder acessar essa entrada do componente. E definiu uma expressão angular no atributo placeholder, que decidirá se mostraremos o placeholder ou não. Esta é a principal desvantagem da solução, é que você tem que gerenciar a visibilidade do espaço reservado.

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

Código revisado de mumthezir

Estou surpreso que haja apenas uma resposta com uma abordagem semelhante à que usei.
Eu me inspirei no comentário de @Dtipson sobre a resposta de @Mumthezir VP.

Eu uso duas entradas para isso, uma é uma entrada falsa com type="text"a qual defino o espaço reservado, a outra é o campo real com type="date".
No mouseenterevento em seu contêiner, oculto a entrada falsa e mostro a real, e faço o contrário no mouseleaveevento. Obviamente, deixo a entrada real visível se ela tiver um valor definido.
Eu escrevi o código para usar Javascript puro, mas se você usar jQuery (eu uso) é muito fácil "convertê-lo".

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

Testei isso também em um telefone Android e funciona, quando o usuário toca no campo aparece o selecionador de data. A única coisa é que, se a entrada real não tinha valor e o usuário fecha o selecionador de data sem escolher uma data, a entrada permanecerá visível até que toque fora dela. Não há evento para ouvir para saber quando o selecionador de data fecha, então não sei como resolver isso.

Não tenho um dispositivo iOS para testar.

Expandindo a solução de @mvp com javascript discreto em mente, esta é a abordagem:

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') }
)

Acho que tudo que você precisa fazer é alterar o modelo para dizer que o campo de data pode ser anulado e, em seguida, colocar [Obrigatório] nele se for necessário. Se você fizer isso, o texto do espaço reservado aparecerá.

Ei, então encontrei o mesmo problema ontem à noite e descobri que uma combinação de todas as suas respostas e um pouco de magia brilhante está fazendo um bom trabalho:

O HTML:

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

O 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;
   }
}

O jQuery:

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

Explicação: Então, o que está acontecendo aqui, em primeiro lugar no HTML , é bastante simples fazer uma entrada de data HMTL5 básica e definir um espaço reservado. Próxima parada: CSS , estamos definindo um: before-pseudo-elemento para falsificar nosso placeholder, ele apenas pega o atributo do placeholder da própria entrada. Eu disponibilizei apenas a partir de uma largura de janela de visualização de 1024 px - por que contarei mais tarde. E agora o jQuery , depois de refatorar algumas vezes eu vim com este trecho de código que irá verificar em cada mudança se existe um valor definido ou não, se não for, ele (re) adicionará a classe, vice-versa .

CONHEÇA OS PROBLEMAS:

• há um problema no cromo com seu selecionador de data padrão, é para isso que serve a consulta de mídia. Ele adicionará o espaço reservado na frente do item padrão 'dd.mm.aaaa'. Você também pode definir o marcador de posição da entrada de data para 'data:' e ajustar a cor em caso de nenhum valor dentro da entrada ... para mim, isso resultou em alguns outros problemas menores, então optei apenas por não mostrá-lo em 'maior 'telas

espero que ajude! cheerio!

Se você está preocupado apenas com o celular:

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;');
});

Aqui está outro possível hack sem usar js e ainda usando css content. Observe que, como :afternão é suportado em alguns navegadores para entradas, precisamos selecionar a entrada de outra maneira, o mesmo paracontent 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>

Isso funciona para mim usando isso como elemento de entrada:

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

Este CSS mostra um espaço reservado permanente. O valor selecionado é mostrado após o espaço reservado.

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 */
    }
}

Eu uso essa solução para um formulário Wordpress com o plugin contact-form-7.

Nenhuma das soluções estava funcionando corretamente para mim no Chrome no iOS 12 e a maioria delas não é adaptada para lidar com possíveis entradas de várias datas em uma página. Eu fiz o seguinte, que basicamente cria um rótulo falso sobre a entrada de data e o remove imediatamente. Também estou removendo o rótulo falso se a largura da janela de visualização estiver além de 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;
    }
}