个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
有没有办法在输入元素的焦点上激活 native HTML5 日期选择器下拉菜单？
大输入元素:
![Large Input[type=date] Element](/image/xPH42.png)
目前我只能通过点击输入元素最右侧的箭头来使用日历。
大输入元素点击箭头
![Large Input[type=date] Element onClick of Arrow](/image/KeiLx.png)
我想在输入元素的焦点上激活这个日历。
这是有问题的代码。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<style media="screen">
.form-question {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 3rem;
min-height: 3rem;
}
.form-question__title {
color: #342357;
font-size: 1.5rem;
padding: 1rem;
}
.input-container {
border-bottom: solid 2px #333333;
}
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
width: 100%;
}
</style>
<body>
<div class="form-question">
<div class="form-question__title">
<span>Effective Date</span>
</div>
<div class="input-container">
<input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input>
<span class="bar"></span>
</div>
</div>
</body>
</html>首选 CSS 解决方案，但欢迎使用 javascript，请勿使用 jQuery。
提前致谢!
最佳答案
对于任何偶然发现这个问题的人，我通过将 calendar-picker-indicator 设置为完整的高度和宽度来解决它(
仅限 webkit
firefox 似乎也尊重这一点)输入，如概述here .
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
position: relative;
width: 100%;
}
input[type="date"]::-webkit-calendar-picker-indicator {
background: transparent;
bottom: 0;
color: transparent;
cursor: pointer;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: auto;
}<input type="date">关于javascript - 输入 [type ="date"] 处于焦点时如何显示日历弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51334960/
24
4
0
数据框有一个字符串类型的日期列 '2017-01-01' 它被转换为 DateType() df = df.withColumn('date', col('date_string').cast(Dat
这个问题在这里已经有了答案: What is "x && foo()"? (5 个答案) 关闭 8 年前。 我在 bootstrap-datepicker.js 文件中遇到过这个。 作者在_setD
我有一个数据库 utc 字符串，我正在传递到 Date(attrs.endDate)，然后通过 new Date() 减去当前的 utc 日期，但我无法得到它来为我提供 2 个 utc 日期的正确差异
这个问题在这里已经有了答案: how to determine if 2 dates object equals each other? [duplicate] (3 个答案) 关闭 6 年前。 我
这个问题已经有答案了: How can I convert "/Date(1399739515000)/" into date format in JavaScript? (3 个回答) 已关闭 8
根据MDN ，我们只能将以下类型的参数传递给 Date 构造函数: new Date(); new Date(value); // Unix timestamp new Date(dateString
我从表中获取所有项目: endDate >= 现在 endDate 为 NULL published 等于 1。 这是我所拥有的，但它给了我 0 个项目: $items = Items::orderB
此查询需要很长时间才能完成。当我将 WHERE 子句设置为 new_dl >= '2014-01-01' 时，查询大约需要 6 分钟才能浏览大约 3 个月的数据。现在不知道为什么这个应该从 12 个月
我有一个正在为项目开发的小型 Java 程序，它使用 JavaMail 从指定的 URI 中提取用户的收件箱，然后开始处理消息。 在 Outlook 中，属性菜单中有一个功能可以设置邮件的到期日期，它
我想在获取 Date.getHours()、Date.getMinutes() 和 Date.getSeconds() 的值后格式化输出>. 这是一条漫长的路: var dt = new Date()
我发现java.text.DateFormat有两种格式化日期的方法。一种是采用 Date 参数，另一种是采用 Object 参数。我检查了DateFormat源代码，似乎他们调用了不同的内部方法。
我有两个对象，p4 和 p5，它们都具有 Date 属性。在某些时候，构造函数工作正常: p4.setClickDate(new Date(System.currentTimeMillis() - 8
我是使用 Sequelize 和 Node.js 的新手，但我的代码中存在日期比较问题。 User.findOne({ where: { resetToken: passwordToken,
我正在使用一个名为 fullcalendar 的 jquery 日历。当用户单击某一天时，他们将被发送到另一个页面以创建该天的事件。单击的日期作为 date 提供。然后通过下面的函数运行将其转换为 U
我有一个列表列表，每个列表中都有整数值，代表 8 年期间的日期。 dates = [[2014, 11, 14], [2014, 11, 13], ....., [2013, 12, 01]
我有两个表: 首先是TimeValues(示例) time | value 12/28/18 | 5.6 01/03/19 | 5.6 01/04/19 | 5.6 01/09/19 | 5.
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
像这样实例化的日期对象: new Date("2011-12-13") 返回一个认为自己是星期一的日期对象: Date {Mon Dec 12 2011 16:00:00 GMT-0800 (PST)
我需要选择入住日期和退房日期在指定日期范围之间的房价。这些费率根据其条件单独命名。房费取决于所选日期。这是我的代码: rate_eb rate_name rate_starts rat
我有 [Int64:[String:String]] 其中 Int64 是时间戳。如何检测和删除 [String:String] 中的参数之一是 ["name"] = "test" 并重复多次的同一天
我是一名优秀的程序员,十分优秀！