演示效果分辨率为1980x1080分辨率效果
高度可定制修改
纯css代码控制
使用的input type=“date/week/month” html标签 非自定义js日期组件

css代码

		#date {
  width: 1100px;
  height: 50px;
  border: 0px solid #FFF;
  float: left;
  margin-left: 118px;
  margin-top: 46px;
#startTime {
  float: left;
  margin-left: 0px;
 background: #FFFFFF;
#endTime {
  float: left;
  margin-left: 30px;
  background: #FFFFFF;
#TimeRight{
	float: right;
	background: #FFFFFF;
width: 20px;
height: 50px;
input[type="month"] {
  width: 158px;
  height: 50px;
  border: none;
  line-height: 1;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 14px;
  font-size: 1rem;
  color: #525C66;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	padding-right:-00px; 
	background:url("../../assets/img/出生年月.png") no-repeat scroll right center transparent; 
input[type="month"]::-webkit-inner-spin-button {
  visibility: hidden;
input[type="month"] {
  outline: none;
  /* background: url(../assets/img/出生年月.png) no-repeat right; */
input[type="month"]:after {}
input[type="month"]::-webkit-calendar-picker-indicator {
  /*这是控制下拉小箭头的*/
  border: 0px solid #ccc;
  border-radius: 0px;
  /*  box-shadow: inset 0 1px #fff, 0 1px #eee; */
  color: #FFF;
  /* width: 0px;
  ; */
.Time {
  width: 80px;
  height: 50px;
  background: #FFFFFF;
  float: left;
#TimeFont {
  font-size: 14px;
  color: #8F9DB3;
  float: left;
  margin-left: 20px;
  margin-top: 15px;
<div id="date">
				<div id="startTime">
					<div class="Time" for=""><span id="TimeFont">开始时间</span></div>
					<input type="month" v-model="startTime" style="">
					<div id="TimeRight"></div>
				</div>
				<div id="endTime">
					<div class="Time" for=""><span id="TimeFont">结束时间</span></div>
					<input type="month" v-model="endTime">
					<div id="TimeRight"></div>
				</div>
			</div>

演示效果图

演示效果图上的图标、图片类,我已经上传到博客文件里。
不能设置免费下载,大家可以加我QQ来获取文件 1209793794
在这里插入图片描述
在这里插入图片描述

HTML日期选择器Date Picker)是一种方便的用户界面元素,用于简化日期输入和交互。通过使用元素的type="date"属性,可以轻松创建日期选择器。用户可以从交互式日历中选择日期值,并且日期格式通常遵循ISO 8601标准。日期选择器还支持设置最小值和最大值以限制日期范围。通过JavaScript,可以获取用户选择日期值,进而进行后续处理。HTML日期选择器在现代浏览器中得到广泛支持,尽管在旧版本浏览器上可能有不同的呈现方式或不支持。了解和应用HTML日期选择器可以提高表单交互性 本仙女过很多日期的插件,都觉得比较丑,谁叫人家是个颜控QAQ。。。 意外发现了前端框架sui里面日期选择器,比较符合本仙女的审美,\(^o^)/ 今儿在这留下,下次用也好找~ 啊哈哈(,,• ₃ •,,)~~ 因为我常用的是一段日期选择所以我就写了这一段。。 切记!一定要引入s... 1:标签选择器 标签选择器,是所有有某种标签的都生效。这里以p为例,也就是所有的有p标记的都会这样的样式 复制代码代码如下:<html><head><styletype>p{font:”宋体”; color:#FF0000}</style></head><body><pid>我现在表现的是标签选择器</p><pid>我也用的是标签选择器</p><h1>我没有被任何的选择器修饰</h1></body></html> 2:id选择器,注意id选择器是唯一的,因为只有id="yy"的才有这种样式,而一个页面里元素的Id必须是唯一的,所以。。。你懂得id选 实现代码: <input type="text" placeholder="请选择开始时间" id="startTime"> <i class="icon-riqi iconfont date-input-icon"></i> <div class="input-box" style="width: 160px;height:33px;"> <input type="text" onclick="J.calendar.get();" name="datetimepicker1" style="width: 80%" id="datetimepicker1" readonly value="${datetimepicker1}" class="childDom" placeholder=""> 解决方法是把图标当初背景图片,然后使用padding使得输入的内容向右移动 代码如下: .login .login_form .login_username{background:url(../images/login_yonghu.png) no-repeat 0 0;background-positio /*----------用来移除向下箭头----------*/ input[type="date"]::-webkit-calendar-picker-indicator { display: none; /*-------...