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: '';
}