HTML5 date 日期选择控件兼容多端

最新推荐文章于 2024-07-08 09:50:33 发布

砺寒

最新推荐文章于 2024-07-08 09:50:33 发布

阅读量650

点赞数 1

分类专栏： HTML5 文章标签： html5 datepicker react ios

本文链接：https://blog.csdn.net/xuesetaozi/article/details/108039134

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

THML5 date

html5 的 date 样式在ios 上丑暴了，但原生date的又挺好用的。
于是想着用原生的date，把input设置成透明。外面用div套一层。期间opacity 和z-index 要把控好。还有pc端的date input 下拉按钮要设置成透明，位置要在自定义icont 上。

pc效果
在这里插入图片描述
安卓手机效果

ios 手机效果

html代码

<div className="example-custom-border-style">
	<div className="birtValue-text" onClick{this.handleTimeInputFocus}>{this.state.birthDate ? this.state.birthDate:"Date of birth"}</div>
     <input type="date" className="example-custom-input" id="birthDate" onChange={date=>{ this.setBirtDate(date) }}></input>
</div>

js代码


setBirtDate = (e) =>{
  this.setState({
      birthDate: e.target.value
    })
}
// 不用这方法也行，原生的input位置在展示层div上面。所有点击不到展示时间的div 
handleTimeInputFocus = () =>{
    var birDom = document.getElementById("birthDate");
    birDom.focus();
}

css代码

::-webkit-calendar-picker-indicator {      /*这是控制原生下拉小箭头的，其实背景等修饰用也可以*/
  width: 25px;
  height:25px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #eee;
  color: red;
  position: absolute;
  right: -4%;
  display: block !important;
  opacity: 0.1;
  z-index: 80;
}

.example-custom-border-style{
  width: 100%;
  height: 37px;
  border: 2px solid #dfdfdf;
  border-radius: 38px;
  cursor: pointer;
  padding: 5px 15px;
  background-color: #ffffff03;
  font-family: "Open Sans";
  color: #9b9b9b;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  position: relative;
  padding-right: 0;
}

.birtValue-text{
  position: absolute;
  top: 4px;
  left: 12px;
}

.example-custom-input{
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border-radius: 38px;
  font-family: "Open Sans";
  color: #9b9b9b;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  position: relative;
  opacity: 0;
  padding: 0;
  background-color: #fff;
  z-index: 90;
}

.example-custom-border-style:after{
  width: 26px;
  height: 24px;
  background-image: url(/images/ath/onboarding/date-icon.png);
  background-size: cover;
  position: absolute;
  top: 16%;
  right: 3%;
  z-index: 5;
  content: '';
}

.example-custom-input:after{
  width: 26px;
  height: 24px;
  background-image: url(/images/ath/onboarding/date-icon.png);
  background-size: cover;
  position: absolute;
  z-index: 10;
  top: 2%;
  right: -3%;
  content: '';
}