关键词：
【中文标题】如何更改出现在 Chrome 日期字段中的 HTML5 占位符文本【英文标题】：How do I change the HTML5 placeholder text that appears in date field in Chrome 【发布时间】：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 将其替换为自己的
【参考方案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.
【讨论】：
如何更改日期选择器中的 Django 日期时间字段格式？
】如何更改日期选择器中的Django日期时间字段格式？【英文标题】：HowtochangeDjangodatetimefieldformatindatepicker?【发布时间】：2018-07-1519:13:59【问题描述】：我有一个名为close_date的模型字段models.pyclassProject(models.Model):close_date=models.Date... 查看详情
如何更改同一列中的多个日期格式？
】如何更改同一列中的多个日期格式？【英文标题】：HowtochangemultipleDateformatsinsamecolumn?【发布时间】：2012-11-2517:10:29【问题描述】：到目前为止，我得到的是一个数据框列，其中包含不同字符格式的日期。一些出现在%d.%m.%Y模式... 查看详情
如何更改 Chrome 原生日期时间选择器的蓝色？
】如何更改Chrome原生日期时间选择器的蓝色？【英文标题】：HowtochangethebluecolorofChrome\'snativedatetimepicker?【发布时间】：2022-01-1515:09:21【问题描述】：对于Chrome中的原生日期时间选择器，如何使用css更改这些蓝色按钮、蓝色文本... 查看详情
如何更改 chrome 打包的应用程序 ID 或者为啥我们需要 manifest.json 中的 key 字段？
】如何更改chrome打包的应用程序ID或者为啥我们需要manifest.json中的key字段？【英文标题】：HowtochangechromepackagedappidOrWhydoweneedkeyfieldinthemanifest.json?如何更改chrome打包的应用程序ID或者为什么我们需要manifest.json中的key字段？【发布... 查看详情
如何在 extjs 日期字段或日期选择器中访问更改月份事件
】如何在extjs日期字段或日期选择器中访问更改月份事件【英文标题】：HowcanIaccesschangemontheventinextjsdatefieldorindatepicker【发布时间】：2012-07-0803:12:17【问题描述】：我想要这样的东西：xtype:\'datefield\',editable:false,fieldLabel:\'date\',list... 查看详情
如何更改 Netezza 中的日期格式？
】如何更改Netezza中的日期格式？【英文标题】：HowtochangedateformatinNetezza?【发布时间】：2014-08-1319:59:51【问题描述】：我在NetezzaDB中有一个日期时间字段(startdatetime)存储为varchar，因为SSIS正在截断milisec，我希望datetime直到milisec。... 查看详情
原生 chrome 日期选择器。年份字段中的六个字符
...tersinyearfield【发布时间】：2015-04-0320:18:48【问题描述】：如何限制chromedatepicker年份字段中允许的字符数？问题的小提琴：http://jsfiddle.net/L2r3wvt8/<inputtype="date"value="201223-01-01"& 查看详情
如何在数据库 H2 中更改没有时间的字段日期时间
】如何在数据库H2中更改没有时间的字段日期时间【英文标题】：HowtochangethefielddatetimewithouttimeindatabaseH2【发布时间】：2019-08-0714:02:28【问题描述】：我有一张桌子：CREATETABLE`operation`(`id`bigint(20)NOTNULL,`start_time`datetimeDEFAULTNULL,`finis... 查看详情
无法在 chrome 中的编辑视图上验证日期格式
】无法在chrome中的编辑视图上验证日期格式【英文标题】：Unabletovalidatedateformatoneditviewinchrome【发布时间】：2015-08-0505:37:06【问题描述】：之前有人问过这个问题，但答案并没有解决我的问题。问题是我总是在datetime字段中收到... 查看详情
如何在 Drupal 中以页面的形式更改“视图”的“日期字段”格式？
】如何在Drupal中以页面的形式更改“视图”的“日期字段”格式？【英文标题】：HowdoIchange"datefield"formatofa"view"intheformofapageinDrupal?【发布时间】：2009-11-1910:02:39【问题描述】：我正在尝试使用视图显示节点的日期... 查看详情
如何更改响应式表单中日期的格式？
】如何更改响应式表单中日期的格式？【英文标题】：HowtochangetheformatofDateinReactiveForms?【发布时间】：2021-09-0503:59:09【问题描述】：我想更改我在响应式表单中的一个字段中的默认日期格式。它以以下格式显示“16-03-1999”，但... 查看详情
对话框中的材料 UI 更改日期字段样式
】对话框中的材料UI更改日期字段样式【英文标题】：MaterialUIchangedatefieldstyleindialog【发布时间】：2021-11-1006:51:03【问题描述】：我在我的React项目中使用Material-UI，并使用它的日期选择器组件来呈现日期项。但默认样式不适合我... 查看详情
该字段必须是日期 - Chrome 中的 DatePicker 验证失败 - mvc
】该字段必须是日期-Chrome中的DatePicker验证失败-mvc【英文标题】：Thefieldmustbeadate-DatePickervalidationfailsinChrome-mvc【发布时间】：2013-04-2310:59:31【问题描述】：我有一个奇怪的问题。我的日期验证在Chrome中不起作用。我试过this的回... 查看详情
更改其他数据时如何保持日期不变？
】更改其他数据时如何保持日期不变？【英文标题】：howtokeepthedateunchangedwhenchangingotherdata?【发布时间】：2017-12-3003:15:26【问题描述】：我想更新表中的状态列，但消息的日期列也更新了。如何仅在没有日期字段的情况下仅更新... 查看详情
更改 Chrome 中的选择边框颜色
】更改Chrome中的选择边框颜色【英文标题】：ChangetheselectionbordercolorinChrome【发布时间】：2012-06-2506:37:24【问题描述】：每当您在网页上按Tab键时，浏览器都会在所选元素周围放置一个边框。IE和Firefox只使用灰色虚线，但Chrome使... 查看详情
根据数组中的重复模式更改 SwiftUI 列表中文本字段的第二次出现
...当给定4个文本字段的模式（例如ABAB）时，我试图弄清楚如何使用在该字母的第一个文本字段出现中键入的句子的最后一个单词填充每个字母的第二个 查看详情
如何更改 PostgreSQL 中的日期样式？
】如何更改PostgreSQL中的日期样式？【英文标题】：HowtochangedatestyleinPostgreSQL?【发布时间】：2012-11-0604:35:26【问题描述】：在postgres中，我有一个带有日期列的表。现在postgres允许我以Y-m-d格式写日期。但我需要d/m/Y格式的日期。如... 查看详情
在 Django admin 中更改日期字段的默认小部件
...dsinDjangoadmin【发布时间】：2012-01-2022:15:01【问题描述】：如何在DjangoADMIN中更改DateField实例的默认小部件？我知道如何为ModelForm-HowdoyouchangethedefaultwidgetforallDjangodatefieldsinaM 查看详情