input type datetime-local的 placeholder 不显示

最新推荐文章于 2024-04-08 17:49:09 发布
最新推荐文章于 2024-04-08 17:49:09 发布
阅读量2.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38948287/article/details/81118221
版权

开发过程中遇到一小问题。

input type datetime-local的 placeholder 支持性有一定问题，会失效。

我是这样解决的。先让type=text，聚焦改变type=datetime-local

示例

<input name="APPOINTTIME" id="APPOINTTIME"  type="text" οnfοcus="(this.type='datetime-local')" maxlength="11" 
                        class="mui-input-clear" placeholder="(必填,你需要预约哪个时间点？)"/>
 

蓝影灵
关注
input type="datetime-local"时间赋值问题
qq_39080788的博客
09-27 6899
<input class="form-control" type="datetime-local" value="2019-09-27T09:10"/> value格式必须为 “YYYY-MM-DDTHH:MM”,才可以显示，单个月份要在之前加0.
＜input type=“datetime-local“＞如何默认当前时间
csdn_zym1101的博客
01-08 2382
HTML <input type="datetime-local" name="release_date" id="currentDate"> JQ $(function(){ var today = new Date();//返回当前日期时间 var yyyy = today.getFullYear();//获取当前年份 var MM = today.getMonth() + 1;//因为getMonth()方法获取的是索引值,所以要＋1 var dd
input type datetime-local 解决移动端显示placeholder
liaoweiping
04-19 1669
input type datetime-local 解决移动端显示placeholder. 今天在做移动端后台的时候，又一个付款时间的栏目需要用到input type datetime-local css input[type="date"]:before{ color:#A9A9A9; content:attr(placeholder); } input[type="dat...
实现input中date类型的placeholder功能
qq_36438460的博客
02-27 3045
在HTML5中，input新增了date的类型 如果我们想实现placeholder的显示，不可以直接设置placeholder属性 要想实现以下样式 点击前 点击后 可以采用事件绑定addEventListener和事件解绑removeEventListener来实现，代码如下： <input type="text" id="inputDate" placehol...
input的type=“date“时placeholder不显示，解决方案
weixin_42178670的博客
05-18 2172
input的type="date"时placeholder不显示，解决方案 步骤如下： 1、使用伪类模拟 input[type="date"]::before { content: attr(placeholder); } 做完上面之后，会发现在使用的时候即使选了时间，这个placeholder会依旧存在，所以要使用第2步js控制 2、使用js控制placeholder展示与否，假定该时间选择器id=“time” let timeItem = document.getElementById("time"
input type="datetime-local" 时placeholder不显示
weixin_33774883的博客
08-18 612
一个坑，input的type="datetime-local" 时，电脑上会显示提示，如图 <input type="datetime-local" name="user_date" placeholder="请选择时间"/> 但是，手机上不会显示，就是一片白，加上placeholder也是白费。 添上这段代码，亲测ios可以正常提示提示信息，安卓还是一片白。 inp...
vue 中使 date/time/datetime 类型的 input 支持 placeholder 方法
最新发布
羽筠的博客
04-08 460
一般在开发时，设置了 date/time/datetime 类型的 input 属性 placeholder 时，发现实际展示中却并不生效，处理逻辑，判断表单项未设置值时，则设置伪类样式，文本内容为 placeholder 属性值，展示样式重叠在表单项组件上，以达到提示文本效果；
H5新特性 input type=date 在手机上默认提示显示无效解决办法
weixin_30539835的博客
09-28 717
目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。 那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。 移动端自带的日期控件确实是个好东...
html5 input type time,HTML5 Input type datetime-local 在手机上选择时间，时区出错
weixin_42361070的博客
06-17 530
最近出现了一个奇怪的问题：在安卓或者iOS手机上使用选择日期之后，用toISOString()转换成ISO格式然后再传给服务端，之后前端再获取日期，转成当前时区，时间竟然比设置的日期多了8个小时，同样的操作在PC端时间就是正确的。这就说明问题不是出在显示转换上而是出在上传的地方。代码如下：var time = $("#datePick").val()console.log(time)var tim...
使input date支持placeholder方法
羽筠的博客
06-02 1万+
input type date 的 placeholder 支持性有一定问题，因为浏览器会针对此类型 input 增加 datepicker 模块，看上去没那么必要支持 placeholder。 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字，但是为了统一表单外...
<td> <input id="field_inDate" data-cy="inDate" type="datetime-local" class="form-control" name="inDate" formControlName="inDate" placeholder="YYYY-MM-DD HH:mm" /> </td> 以上是一段angular代码我想让这段代码不显示时分于是我将 type="datetime-local"改成 type="date"，但是这样改后页面显示的数据就没了为什么怎么解决
06-09
如果你想让页面同时显示日期和时间，但是不想让用户选择时间，可以将 `type="datetime-local"` 改成 `type="text"`，然后在输入框内添加一个默认的时间值，例如： ```html <input id="field_inDate" data-cy="in...
<td> <input id="field_inDate" data-cy="inDate" type="datetime-local" class="form-control" name="inDate" formControlName="inDate" placeholder="YYYY-MM-DD HH:mm" /> </td> 我想让这段代码不显示时分于是我将 type="datetime-local"改成 type="date"，但是这样改后页面显示的数据就没了为什么怎么解决
06-09
<input id="field_inDate" data-cy="inDate" type="datetime-local" class="form-control" name="inDate" formControlName="inDate" placeholder="YYYY-MM-DD HH:mm" /> ``` JavaScript 代码： ``` var input =...
怎么让html的标签失去效果,使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决...
weixin_29430691的博客
06-03 757
本篇教程探讨了使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<最近使用到了html5的一个新标签属性,type="date"时，发现placeholder属性失效无法使用。如果是这样的效果，那么客户体验是可想而知的差了。最后想了一下，想到用css+js双保险来搞定它。...
【el-date-picker】踩坑记，回显不显示及赋默认值不回显问题
花椒和蕊的博客
10-13 9345
日期组件踩坑记
学习笔记-HTML5新增表单属性
weixin_45085122的博客
11-07 465
html学习笔记：html5新增属性
input type date 解决移动端显示placeholder.
热门推荐
lz305263的博客
04-19 1万+
网上找的方法苹果可以了 安卓显示总有问题. css input[type="date"]:before{     color:#A9A9A9;     content:attr(placeholder); } input[type="date"].full:before {     color:black;     content:""!important; }
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值