如何更改出现在 Chrome 日期字段中的 HTML5 占位符文本答案

【问题标题】：How do I change the HTML5 placeholder text that appears in date field in Chrome如何更改出现在 Chrome 日期字段中的 HTML5 占位符文本
【发布时间】：2012-10-03 08:59:08
【问题描述】：

我惊喜地发现以下代码在 Chrome 中查看时会呈现一个日期选择器：

<input type="date" name="wdate" id="wdate" value="" placeholder="date of purchase" />

但是，占位符文本被忽略，而是显示“日期/月份/年份”。

如何更改占位符文本并使用我自己的？

我已经试过了：

<script>
    $("#wdate").attr("placeholder", "Day/Month/Year of purchase");
</script>

但无济于事。

【问题讨论】：

占位符只有在文本框为空时才会显示，否则我们无法更改。
占位符属性应该是关于如何填写表格的提示（即格式的示例或描述），它明确不是替代label 元素。在字段旁边放一个label。
该字段为空。当页面加载“日/月/年”时，它会立即显示这个确切的文本，就像我刚刚写的一样（但没有引号）。
嗨昆汀。你是对的。但是，我被指示不要使用标签（我知道它在语义上不正确）
我的占位符显示在其他支持的浏览器中，但 Chrome 将其替换为自己的

标签： jquery html datepicker placeholder datefield

【解决方案1】：

较老的问题，但这是我最近必须使用的解决方案。

您将无法使用 HTML5 日期字段，但这可以通过 jQuery UI 日期选择器来完成。 http://jsfiddle.net/egeis/3ow88r6u/

var $datePicker = $(".datepicker");

// We don't want the val method to include placehoder value, so removing it here.
var $valFn = $.fn.val;
$.fn.extend({
    val: function() {
        var valCatch = $valFn.apply(this, arguments);
        var placeholder = $(this).attr("placeholder");
        
        // To check this val is called to set value and the val is for datePicker element 
        if (!arguments.length && this.hasClass('hasDatepicker')) {
            if (valCatch.indexOf(placeholder) != -1) {
                return valCatch.replace(placeholder, "");
            }
        }
        return valCatch;
    }
});

// Insert placeholder as prefix in the value, when user makes a change.
$datePicker.datepicker({
    onSelect: function(arg) {
        $(this).val($(this).attr("placeholder") + arg);
    }
});

// Display value of datepicker
$("#Button1").click(function() {
    alert('call val(): {' + $datePicker.val() + '}');
});

// Submit
$('form').on('submit', function() {
    $datePicker.val($datePicker.val());
    alert('value on submit: {' + $datePicker[0].value + '}');
    return false;
});

.ui-datepicker { width:210px !important; }

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<form method="post">
    <p>HTML5 Date: <input type="date" placeholder="html5 date:" /></p>
    <p>jQuery DatePicker: <input type="text" class="datepicker" placeholder="Start date:" /></p>
    <p><input id="Button1" type="button" value="Get DatePicker Value" title="Get DatePicker Value" /></p>
    <p><input type="submit" text="fire submit" /></p>
    <p>Original Source for this <a target="_blank" href="http://jqfaq.com/how-to-add-some-custom-text-to-the-datepickers-text-field/">JQFaq Question</a></p>
</form>

【讨论】：

【解决方案2】：

The date type doesn't support placeholder attribute. 此外，WebKit 实现说它是 fixed.

【讨论】：