I\'ve been trying to add placeholder in input type=\'datetime-local\' field but it doesn\'t work at all. Use css for solving the issue but still unable to do it :(
Sharath Daniel is on the right lines. A jQuery version: http://jsfiddle.net/2e97L3d0/1/
HTML
<form action="" method="post">
<div class="datetime">
<input type="text" id="datetime1" placeholder="Enter the starting date" >
</div>
Javascript
$(document).ready(function(){
$("#datetime1").focus( function() {
$(this).attr({type: 'datetime-local'});
});
});
I have tried this solution Here I tried to get YYYY-MM-DD HH:mm pattern placeholder y, u can make your own format Just change value format, data-date-format and add pattern in js too. HTML :
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input type="datetime-local" data-date="" data-date-format="YYYY-MM-DD HH:mm" value="2000-01-01T00:00:00">
JS :
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD'T'HH:mm:ss")
.format( this.getAttribute("data-date-format") )
)
}).trigger("change")
CSS:
input {
position: relative;
width: 150px; height: 20px;
color: white;
}
input:before {
position: absolute;
top: 3px; left: 3px;
content: attr(data-date);
display: inline-block;
color: black;
}
input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
display: none;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: 3px;
right: 0;
color: black;
opacity: 1;
}
A bit tricky, but it works:
Html:
<form action="" method="post">
<div class="datetime">
<input id="pholderInput" class="placeholder" type="datetime-local">
</div>
</form>
Css:
.placeholder
{
color: gray;
}
.focused
{
color: black;
}
Javascript:
var inp = document.getElementById("pholderInput");
var placeholderText = "default text";
inp.value = placeholderText;
inp.onfocus = function(e) {
if (inp.value == placeholderText)
{
inp.value = "";
inp.className = "focused";
}
};
inp.onblur = function(e) {
if (inp.value === "")
{
inp.value = placeholderText;
inp.className = "placeholder";
}
};
JSBin
This is kind of a wonky idea, change the input type to text
, then it will convert to datetime-local
on focus using the below javascript.
<input type="text" id="txtbox" placeholder="Heya">
<script>
var dtt = document.getElementById('txtbox')
dtt.onfocus = function (event) {
this.type = 'datetime-local';
this.focus();
}
</script>
Try this code:
$(document).ready(function(){
$("input[type='datetime-local']").attr('placeholder','date time');
});
FIDDLE DEMO