Web前端开发技术项目教程课件 4.2.4知识点2：日期选择框.pptxVIP

信息安全技术应用ApplicationofInformationSecurityTechnology日期选择框《前端技术开发》

前端技术开发目录日期选择框分类1常用属性2注意事项3

1日期选择框分类

日期选择框分类1精确到日期date精确到分钟datetime-local只选时间，不选日期，精确到分钟time精确到星期week精确到月份month根据type属性分类：

2常用属性

常用属性2属性含义min允许输入的最小值。max允许输入的最大值。step键盘箭头输入时的增量。

常用属性2情况1：type=dateinputtype=datemin=2015-03-01max=2015-03-31step=7选取范围在2015年3月1日-2015年3月31日之间每两个可选日期之间相隔7天

常用属性2情况2：type=datetime-localinputtype=datetime-localmin=2018-03-01T18:00max=2018-03-01T20:00step=30两个可选时间之间相隔30秒注意min和max的时间格式time部分的范围不会在界面上给出提示，需要使用Javascript的DOM-API访问验证属性

常用属性2情况3：type=timeinputtype=timemin=18:00max=20:00step=30两个可选时间之间相隔30秒注意min和max的时间格式time部分的范围不会在界面上给出提示，需要使用Javascript的DOM-API访问验证属性

常用属性2情况4：type=weekinputtype=weekmin=2017-W01max=2017-W05step=1可选范围在2017年第1周-2017年第5周之间两个可选时间之间间隔1周注意min和max的时间格式

常用属性2情况5：type=monthinputtype=monthmin=2020-07max=2020-08step=1可选范围在2020年7月-2020年8月之间两个可选时间之间间隔1月注意min和max的时间格式

3注意事项

注意事项3兼容性外观定制数据验证不是所有的浏览器都支持日期选择框。在使用前，需要检查目标浏览器是否支持HTML5的date输入类型。仅仅在浏览器端无法确保用户输入了正确的日期格式和日期范围，一般在服务器需要对表单数据进一步验证。时间日期控件的外观不能用CSS定制。如果需要对外观深度定制，可以使用元素自定义，或第三方库。

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》