html input date,input type datetime

　　1.日历控件自定义样式

　　HTML5提供了日历控件功能，缩短了开发时间，但有时候风格确实差强人意。我们可以根据下面的代码自己修改。

　　建议：复制下面的代码片段，单独创建一个css文件，方便我们修改。

　　/*修改日历控件类型*/:-WebKit-datetime-edit { padding:1px；}/*控制*/:-WebKit-datetime-edit-fields-wrapper { background-color:# fff；}/*控制*/:-WebKit-datetime-edit-text { color:# 333；填充：0 .5em}/*这是*/:-WebKit-datetime-edit-year-field { color:# 333；}/*控制年份字，比如2013年四个字母所占的位置*/:-WebKit-datetime-edit-month-field { color:# 333；}/*控制月份*/:-WebKit-datetime-edit-day-field { color:# 333；}/*控制具体日期*/:-WebKit-inner-spin-button { visibility:hidden；}/*这是*/:-WebKit-Calendar-Picker-Indicator {/*这是控制下拉箭头的*/border:1px solid # CCC；边框-半径：2pxbox-shadow: inset 0 1px #fff，0 1px # eee背景色：# eee背景-图片：-WebKit-线性-渐变(top，#f0f0f0，# e6e6e 6)；颜色：# 666；}:-webkit-clear-button {/*控制清除按钮*/}2.日期校验功能

　　结束日期不能早于开始日期。日期选择范围为7天，其余时间段不可选。

　　注意：下面的代码段使用了Jquery原理。

　　//转换时间类型为yyyy-mm-DD函数格式date(strtime){ var date=new date(strtime)；var formated month=( 0 (date . getmonth()1))。切片(-2)；var formated date=( 0 (date . getdate()))。切片(-2)；return date . get full year()- formated month - formated date；}//开始时间$ (# keyword _ time _ min )。change(function(){ var D1=new date($(this)。val())；//获取当前时间变量d2=新日期(D1)；//D2 . set full year(D2 . get full year()1)；//当前时间为1年D2 . set date(D2 . getdate()7)；//当前时间是7天D2=format date(D2)；//将d2转换为YYYY-MM-DD格式$ (# keyword _ time _ max )。attr (max ，D2)；//最大时间为d2 $ (# keyword _ time _ max )。attr (min ，$(此)。val())；//最小时间为当前时间})；//结束时间$ (# keyword _ time _ max )。change(function(){ var D3=new date($(this)。val())；var d4=新日期(D3)；//D4 . set full year(D4 . get full year()-1)；D4 . setdate(D4 . getdate()-7)；//当前时间-7天D4=format date(D4)；$(#keyword_time_min )。attr(min ，D4)；$(#keyword_time_min )。attr(max ，$(这个)。val())；});以上是边肖推出的HTML5中input[type=date]自定义样式和日历检查功能的实现代码。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。