实验八、jQueryUI 创建更便捷的表单
实验背景
填写表单时，需要输入日期的情况非常多，如订车票的日期选择，出生年月的选择，举办活动的日期选择…如果要用户手动输入日期，一个是不能保证用户输入的日期符合规定的格式，第二，输入太多日期也太麻烦，那么有没有更简洁的方式呢？jQuery UI 给我们提供了一个日期选择控件，可以快速实现按规定的形式输入日期，并且效果更加美观。
实验目的
- 掌握如何使用 jQuery 获取指定的元素
- 掌握使用调用默认日期选择器的方法
- 掌握改变日期显示形式的方法
- 掌握控制日期选择范围的方法
实验步骤
步骤一：准备素材
- 图片素材；
- CSS 素材；
- jQuery 文件；
- jQuery UI 核心文件；
- jQuery UI 微件文件；
- jQuery UI 日期控件；
步骤二：搭建 HTML 结构和设计 CSS 样式
步骤三：选使用默认的日期选择器
- 选择待显示日期的表单控件
- 调用 datepicker() 实现默认的日期选择器
步骤四：改变日期的格式
- 使用 dateFormat 属性，可对日期选择器进行本地化属性设置。
- 日期包含年、月、日三项，本地化日期，也是从这三个方面入手
步骤五：控制日期的选择范围
- 使用 JavaScript 中的 date 对象，获取当前的时间
- 使用日期控件中的属性 maxDate，设定日期选择控件的最大日期为当前日期
- 将刚刚配置的日期范围选择属性应用到 datepicker() 中