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

Posted 2023-03-05

【中文标题】如何添加占位符 <input type="datetime-local"> 字段？

【英文标题】：How to add placeholder <input type="datetime-local"> field?

【发布时间】：2015-07-14 21:54:15

【问题描述】：

我一直在尝试在 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>
    
    

【问题讨论】：

检查 SO 上提出的类似问题。 ***.com/questions/20321202/…

【参考方案1】：

我已经尝试过这个解决方案 在这里我尝试获取 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;

【参考方案2】：

Sharath Daniel 在正确的路线上。一个 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');
  );

);

【参考方案3】：

试试这个代码：

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

FIDDLE DEMO

【讨论】：

@muztheaxe ：谢谢，我明白了，它在 chrome 中不起作用。很快我会更新我的答案。谢谢

【参考方案4】：

有点棘手，但它有效：

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

【讨论】：

试过了 - 它没有为我显示任何占位符，使用 Chrome

【参考方案5】：

这是一个很奇怪的想法，将输入类型更改为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>

【讨论】：

placeholder 不适用于type='datetime-local'

然后使用绝对定位将文本（用作占位符）放置在文本框上，单击文本框时隐藏文本。我不知道这是否值得麻烦。为什么不使用 jquery 进行日期时间和验证？