进行日期时间本地css更改开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

健身的鸡蛋面 · Conda cheatsheet | ...· 2 周前 ·

强健的豌豆 · 父亲是我的入党领路人-中国法院网· 1 月前 ·

近视的金鱼 · 妖猫传 (豆瓣)· 2 月前 ·

买醉的铁链 · 今天才知道！手机的手电筒不止能照明，还有很多 ...· 2 月前 ·

瘦瘦的柚子 · 新职业——数字化管理师就业景气现状分析报告- ...· 5 月前 ·

腾讯云

开发者社区

文档建议反馈控制台

首页 TVP

最新优惠活动

文章/答案/技术大牛

发布

<h1>Show a Date and Time Control</h1>
<form action="/action_page.php">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit">
</form>

const handleClickIcon = (e) => {
  if (e.target.classList.contains('datetime-wrapper')) {
    console.log('Toggle calendar!');
document.querySelector('.datetime-wrapper')
  .addEventListener('click', handleClickIcon);

.as-console-wrapper { max-height: 4em !important; }
.datetime-wrapper {
  position: relative;
  padding: 0;
  margin: 0;
  width: max-content;
.datetime-wrapper input {
  padding: 0.5rem;
  border: thin solid grey;
  border-radius: 0.25rem;
/* adornment */
.datetime-wrapper::after {
  /* .fa-solid */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* .fa-calendar-days:before */
  content: "\f073";
  /* custom */
  position: absolute;
  top: 0;
  right: 0.5rem;
  height: 2rem;
  line-height: 2rem;
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/solid.min.css" rel="stylesheet"/>

问 进行日期时间本地css更改 EN

回答 2

Stack Overflow用户