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

link管理

链接快照平台

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

相关文章推荐

彷徨的桔子 · 沈阳市2006年政府工作报告-市政府工作报告 ...· 2 月前 ·

爱跑步的感冒药 · 如何解决MySQL数据库经常崩溃导致网站无法 ...· 3 月前 ·

英姿勃勃的香烟 · AOA官方入口🔞体育竞猜平台· 4 月前 ·

千杯不醉的香烟 · 病理学第九版教材pdf - 百度· 1 年前 ·

聪明伶俐的跑步鞋 · Cache personalization ...· 1 年前 ·

腾讯云

开发者社区

文档建议反馈控制台

首页 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用户