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

我知道html日期输入字段默认为

“mm/dd/yyyy”

，但我想知道是否有一种方法可以用类似“选择日期”的文本来覆盖该字段

我已尝试更改

值

和

占位符

属性，如下所示：

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

但它最终似乎不起作用，因为我认为它期待某种ISO日期。有什么想法吗

举个例子：

此外, WebKit实施表示它是

相关答复:

你应该用标签代替。（简单的JSFIDLE示例：）

测试日期：

不支持占位符。 值的格式应为yyyy-mm-dd

有关详细信息，请参阅

现在我已正确阅读问题，请编辑…

否，该字段必须包含格式正确的日期。它不能包含文本。要么使用一个文本字段并添加类似jQuery UI的DatePicker的内容，要么使用一些可怕的jQuery黑客，使用绝对定位的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++;
});
});    

$（文档）.ready（函数（）{
var i=0；
$（'input[type=“date”]”）。每个（函数（）{
var dfEl=$（本）；
var str='选择日期'；
dfEl.after（str）；
var phEl=$（'divph'+i）；
var dateFieldPos=dfEl.offset（）；
phEl.css({
顶部：dateFieldPos.top+1，
左：日期字段位置左+1，
宽度：$（this）.width（）+1，
高度：$（此）.height（）+1
});
点击（函数（）{
$（this.hide（）；
dfEl.focus（）；
});
dfEl.blur（函数（）{
如果（！dfEl.val（））{
phEl.show（）；
}
});
i++；
});
});    

---

另一种方法是使用jQuery日期选择器，该选择器使用输入字段而不是日期字段，以便可以使用

值

和

占位符

属性：

html

---

我相信你可以这样做。我不是javascript大师，所以可能有一种更有效的方法来完成它，但它完成了任务

当然，您需要更改选择器

小提琴：

HTML

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

JAVASCRIPT

<script>
$(function(){
  $("input").one("click", function () {
  $(".date1").hide();
  $(".date2").show();
  });
});
</script>

$（函数（）{
$（“输入”）.one（“单击”），函数（）{
$（“.date1”）.hide（）；
$（“.date2”）.show（）；
});
});

编辑：

---

我不得不稍微改变一下，意识到它工作不正常

我需要更改字段本身，而不是它周围的标签。不能使用占位符属性更改它，请查看我发布的列表。我知道，我要问的问题是，是否有办法不将值设置为“yyy-mm-dd”格式。不幸的是，这是不可能的，请看这个相关的问题：我知道，我正在试图找出是否有一个变通办法来改变输入值。@hannah Apolgies，我误解了这个问题。更新了我的答案。Short=否，long=hackery的是。不要这样做。使用textfield和datepicker控件。我的2便士。。。

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

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

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

<script>
$(function(){
  $("input").one("click", function () {
  $(".date1").hide();
  $(".date2").show();
  });
});
</script>