jQuery ui中日期控件datepicker的使用整理
2017-03-22 00:48
267 查看
一、控件的引入
该控件依赖于jQuery,故需要先引入jQuery。<link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script> <script> $('#start-date').datepicker(); </script>
二、控件的选项
defaultDate 设置日期控件的默认日期(高亮显示的日期),如果没有设置该选项,那么就使用当前日期,这一选项只适用于input元素没有设置value属性的情况 altField 额外自定一个input元素,但用户作出选择时,把这个input元素的值更新为用户选取的日期 showOn 设置弹出式日期拾取器的弹出条件,默认值为focus,支持三种值focus(input元素得到焦点时)、button(单击按钮时)、both(以上两种方式),如果把showOn选项设置为button或者both,日期拾取器组件会创建一个button元素并把它立即插入到input元素之后。可以使用buttonImage和buttonText选项来调整这个按钮元素的外观。 buttonImage 指定触发弹出式日期拾取器按钮图片的url,默认不适用图片 buttonImageOnly 使用img元素而不是button元素来显示buttonImage选项指定的图片,默认值为false buttonText 指定触发弹出式日期拾取器按钮上的文本,默认值为省略号(...) disabled 设置日期拾取器初始状态是否可用,默认值为false(表示可用)
三、控件的方法
datepicker("destroy") 从底层元素上移除日期拾取器组件 datepicker("disable") 禁用日期拾取器 datepicker("enable") 启用日期拾取器 datepicker("option") 设置日期拾取器选项 datepicker("isDisabled") 判断日期拾取器是否被禁用,如果已被禁用,返回true datepicker("hide") 隐藏弹出式日期拾取器 datepicker("show") 显示弹出式日期拾取器 datepicker("refresh") 刷新日期拾取器以反映底层元素的变化 datepicker("getDate") 从日期拾取器组件中得到当前选中日期 datepicker("setDate", date) 为日期拾取器设置选中日期
四、控件的事件
create 在日期拾取器组件创建之后触发 onChangeMonthYear 当用户跳到一个新的月或者新的年时触发,3个参数:修改的年year、修改的月month、当前datepicker对象 onClose 当弹出式日期拾取器被关闭后触发 onSelect 当用户选中一个日期时触发,2个参数:选中的日期date、当前datepicker对象
相关文章推荐
- Jquery UI的日历控件datepicker限制日期(转)
- daterangepicker bootstarp 日期范围选择控件使用注意事项
- 如何使用Dojo的DatePicker控件制作联动日期选择器
- 【基础篇】DatePickerDialog日期控件的基本使用(二) ——分别获取年、月、日、时、分
- UWP 使用日期选择控件DatePicker时的注意事项
- Jquery UI的日历控件datepicker限制日期
- 【Asp.Net】日期控件DatePicker使用
- Yii:在ajax刷新中使用CJuiDatePicker日期控件
- My97 DatePicker日期时间控件的配置使用方式
- 日期控件的使用(Datepicker Widget)
- jQuery UI 日期选择器(Datepicker)使用总结
- 安卓控件使用系列18:DatePicker日期控件和TimePicker时间控件的使用
- 【Android 开发】:UI控件之 DatePicker 输入日期控件的使用
- DatePickerDialog 日期控件的使用
- DatePicker TimePicker---时间日期控件的使用
- DatePickerDialog.日期控件的简单使用
- Android 日期控件(DatePickerDialog)与时间控件(TimePickerDialog)的使用
- ASP.NET项目开发中日期控件DatePicker如何使用
- Jquery UI的日历控件datepicker限制日期
- 使用jquery.daterange.js双日历控件时,daterangepicker初始化默认日期