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

			input[type="datetime-local"]:before{
    content: 'Selecteer Datum';
    color: #000;
    text-align: center;
    width:100%;
}
input[type="datetime-local"]:active:before, input[type="datetime-local"]:hover:before, input[type="datetime-local"]:visited:before,  input[type="datetime-local"]:focus:before{
    content: '';
    width: 100%;
}

<form action="" method="post">
    <div class="datetime">
        <input type="datetime-local"  >
    </div>
</form>
    
    

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

			input[type="datetime-local"]:before{
    content: 'Selecteer Datum';
    color: #000;
    text-align: center;
    width:100%;
}
input[type="datetime-local"]:active:before, input[type="datetime-local"]:hover:before, input[type="datetime-local"]:visited:before,  input[type="datetime-local"]:focus:before{
    content: '';
    width: 100%;
}

<form action="" method="post">
    <div class="datetime">
        <input type="datetime-local"  >
    </div>
</form>
    
    

• javascript
• css
• html
• forms

• check similar question asked on SO. stackoverflow./questions/20321202/… – Kheema Pandey Commented May 5, 2015 at 9:08

6 Answers 6

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>

Sharath Daniel is on the right lines. A jQuery version: http://jsfiddle/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./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;
}

In case the previous answers do not work or you don't want to use jquery or other libraries you can set the date input to a default value. This helps on browsers that displays the date input by default as dashes '--' so the user can understand what it's for. This works quite the same as a placeholder for me.

<form action="" method="post">
    <div>
        <input type="datetime-local" id= "dateInput"  >
    </div>
</form>

JS

const dateInput = document.getElementById("dateInput");
//date string must be in format 'yyyy-mm-ddT00:00'
let todayString = '2022-03-15T12:20';
    dateInput.value= todayString;

If you want to go the extra mile, set the datetime-local to the current day of year using js

In the example below I set the datetime-local to the users current date, but you can set it to any value you choose.

function addZeros(time) {
    if (time < 10) {
        time = "0" + time;
    }
    return time;
}
const today = new Date();
let dd = today.getDate() ;
    let mm = today.getMonth() + 1; //January is 0 so need to add 1 to make it 1!
    let yyyy = today.getFullYear();
    let hr = addZeros(today.getHours());
    let min = addZeros(today.getMinutes());
    dd = addZeros(dd);
    mm = addZeros(mm)
let todayString = yyyy + '-' + mm + '-' + dd+'T'+ hr+':'+min;
dateInput.value= todayString;

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

Try this code:

$(document).ready(function(){
    $("input[type='datetime-local']").attr('placeholder','date time');
});

FIDDLE DEMO