Placeholder for datetime

Vários exemplos de como usar o datetime com ou sem placeholder

by NunoMira

HTML

<label>PRIMEIRO EXEMPLO - Apagar o placeholder apenas com o mouseover e definitivamente com um focus</label>
<br>
<input type="date" placeholder="Please specify a date" onClick="$(this).removeClass('placeholderclass')" class="dateclass placeholderclass">
<br>
<br>
<label>SEGUNDO EXEMPLO - Apagar o placeholder desde que se faça pelo menos um focus</label>
<br>
<input placeholder="Date" type="text" onfocus="(this.type='date')">
<br>
<br>
<label>TERCEIRO EXEMPLO - Manter o placeholder (com css)</label>
<br>
<input placeholder="Data/Hora" type="datetime-local">
<br>
<br>
<label>QUARTO EXEMPLO - Apagar o placeholder se escrevermos alguma coisa (com javascript)</label>
<br>
<input placeholder="Date" type="text" onfocus="(this.type='date')" onblur="(this.type='text')">

CSS

input
{
  height: 26px; 
}

/*START CSS PARA O PRIMEIRO EXEMPLO*/
.dateclass
{
    width:100%;
}
.dateclass.placeholderclass::before
{
    width:100%;
    content:attr(placeholder);
    background-color:#FFFFFF;
}
.dateclass.placeholderclass:hover::before
{
    width:0%;
    content:"";
}
/*END CSS PARA O PRIMEIRO EXEMPLO*/

/*START CSS PARA O TERCEIRO EXEMPLO*/
input[type="datetime-local"]:before
{
  content: attr(placeholder)!important;
  color: #aaa;
  margin-right: 0.5em;
}
input[type="datetime-local"]:focus:before, input[type="datetime-local"]:valid:before
{
  content: "";
}
/*END CSS PARA O TERCEIRO EXEMPLO*/

JavaScript

/* START MARTELADA PARA O TERCEIRO EXEMPLO */
	$(document).ready(function() 
	{
		$('input[placeholder*=Data]').attr('onfocus','(this.type="datetime-local")');
		$('input[placeholder*=Data]').attr('onblur','(this.type="text")');
		
// 		$('input[type=datetime-local]').live('blur', function() {
// 			  //do stuff
// 		});
	});
	/* END MARTELADA PARA O TERCEIRO EXEMPLO */