如何添加占位符<input type="datetime-local">字段？

Question

我一直在尝试在input type='datetime-local‘字段中添加占位符，但根本不起作用。使用css解决问题，但仍然无法解决问题:(

​

			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>

​

Answer 1

这是一个不可靠的想法，将输入类型更改为text，然后它将使用下面的javascript在焦点上转换为datetime-local。

<input type="text" id="txtbox" placeholder="Heya">

<script>
  var dtt = document.getElementById('txtbox')
  dtt.onfocus = function (event) {
      this.type = 'datetime-local';
      this.focus();
  }
</script>

Answer 2

莎拉丝·丹尼尔说得对。A jQuery版本：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'});
  });

})；

Answer 3

我已经尝试了这个解决方案，我试图得到YYYY-MM-DD HH:mm模式占位符y，你可以自己的格式，只需改变值格式，数据-日期-格式和添加模式在js中。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;
}