如何配置HTML日期输入的默认值

我知道html日期输入字段默认为"mm/dd/yyyy"，但我想知道是否有一种方法可以用文本覆盖该字段，以表示"选择日期"。

我已经尝试改变value和placeholder属性如下:

<input type="date" placeholder="Pick a Date">
<input type="date" value="Pick a Date">

但它最终似乎不起作用，因为我认为它正在等待某种ISO日期。什么好主意吗?

示例:http://jsfiddle.net/AY2mp/

另一种选择是使用jQuery日期选择器，使用输入字段而不是日期字段，以便可以使用value和placeholder属性:

http://jqueryui.com/datepicker/

html

<input type="text" id="datepicker" value="The Date">

$(function() {
   $( "#datepicker" ).datepicker();
});

我相信你可以这样做。我不是javascript专家，所以可能有更有效的方法，但它可以完成工作。

当然你需要改变选择器

小提琴:http://jsfiddle.net/ce2P7/

<div class="date1">
<input type="text" placeholder="Please choose a date" value="">
</div>
<div class="date2">
<input class="date" type="date" value="">
</div>

CSS

.date1 { width: 150px; /* For consistency */ } .date2 { width: 150px; /* For consistency */ display: none; }
JAVASCRIPT

<script> $(function(){ $("input").one("click", function () { $(".date1").hide(); $(".date2").show(); }); }); </script>
编辑:
我不得不做一些改变，发现它不能正常工作

日期类型不支持占位符属性。此外,WebKit实现说它是固定的。
相关答案:https://stackoverflow.com/a/12869288/3625883

你应该用标签代替。(简单的jsfiddle示例:http://jsfiddle.net/7L4tb/)

<label for="test">Test Date :</label> <input id="test" type="date" value="2014-07-14" />

不支持占位符。yyyy-mm-dd。

详细信息请参见http://www.w3.org/TR/html-markup/input.date.html

编辑现在我读正确的问题…

不，该字段必须包含格式良好的日期。它不能包含文本。要么使用文本字段并添加类似jQuery UI的DatePicker的东西，要么使用一些糟糕的jQuery hackery，用绝对定位的div覆盖日期字段——如果你绝对必须使用日期字段的话。

$(document).ready(function () { var i = 0; $('input[type="date"]').each(function () { var dfEl = $(this); var str = '<div class="datePlaceholder" id="divph' + i + '">Choose a date</div>'; dfEl.after(str); var phEl = $('#divph' + i); var dateFieldPos = dfEl.offset(); phEl.css({ top: dateFieldPos.top + 1, left: dateFieldPos.left + 1, width: $(this).width() + 1, height: $(this).height() + 1 }); phEl.click(function () { $(this).hide(); dfEl.focus(); }); dfEl.blur(function () { if (!dfEl.val()) { phEl.show(); } }); i++; }); });
http://jsfiddle.net/daveSalomon/AY2mp/1/

相关内容

最新更新

热门标签：