手写一个简单的 input date

最新推荐文章于 2024-06-15 09:24:38 发布

wangsq-js

最新推荐文章于 2024-06-15 09:24:38 发布

阅读量566

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 插件

本文链接：https://blog.youkuaiyun.com/qq_41617704/article/details/90449931

本文展示了如何从头开始创建一个简单的HTML5日期输入框，包括html、css和js的相关实现部分，提供了先上效果图的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

在这里插入图片描述

html格式

<div>
	<input type="month">
</div>

css 部分

input[type="month"]::-webkit-datetime-edit{
  line-height: 32px;
}
input[type="month"]::-webkit-clear-button{
  display: none;
}
input[type="month"]::-webkit-calendar-picker-indicator{
  display: none;
}
input[type="month"]::-webkit-inner-spin-button{
  display: none;
}
input[type="month"]::-webkit-clear-button{
  display: none;
}
input{
  outline: none;
}

.date-mode{
  position: absolute;
  top: 32px;
  left: 0;
  font-size: 12px;
  width: 210px;
  border: 1px solid #999;
  background: #fff;
  z-index: 10;
  display: none;
}
.date-tit{
  display: flex;
  justify-content: space-around;
  height: 30px;
  line-height: 30px;
}
.date-tit span{
  cursor: pointer;
}
.date-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: s