第二百一十四节,jQuery EasyUI,Calendar(日历)组件
2017-04-04 22:03
260 查看
jQuery EasyUI,Calendar(日历)组件
学习要点:
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法,这个组件不依赖于其 他组件。
一.加载方式
class 加载方式
calendar()将一个元素执行日历组件
JS 加载调用
二.属性列表
width number 日历控件宽度。默认值180。
height number 日历控件高度。默认值180。
fit boolean 当设置为 true 的时候,将设置日历控件大小自适应父容器。默认值 false。
border boolean 定义是否显示边框。默认值 true。
firstDay number 定义一周的第一天是星期几。0=星期日、1=星期一 等。定义星期几的排序0从星期日排序1从星期一排序
weeks array显 示 的 周 列 表 内 容 。 默 认 值 :['S','M','T','W','T','F','S'],定义星期几的显示文字
months array显示的月列表内容。默认值:['Jan','Feb', 'Mar', 'Apr', 'May','Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec'],定义月份显示文字
year number 年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。设置默认年份
month number 月日历。[b]设置默认月份[/b]
current date 当前日期,设置默认当前日期
formatter date 格式化日期,就是可以给每个日期添加自定义字符
styler date 设置指定日期的样式,设置日期的样式
validator date 设置指定日期是否可以选择
三.事件列表
onSelect date 在用户选择一天的时候触发。
onChange newDate, oldDate 在用户改变选择的时候触发。
四.方法列表
options none 返回参数对象。
resize none 调整日历大小。就是如果日历变形后重置
moveTo date 移动日历到指定日期。默认选择日期
我们可以使用$.fn.calendar.defaults 重写默认值对象。
学习要点:
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法,这个组件不依赖于其 他组件。
一.加载方式
class 加载方式
<div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div>
calendar()将一个元素执行日历组件
JS 加载调用
$(function () { $('#box').calendar({ }); });
二.属性列表
width number 日历控件宽度。默认值180。
$(function () { $('#box').calendar({ width:400, height:300 }); });
height number 日历控件高度。默认值180。
$(function () { $('#box').calendar({ width:400, height:300 }); });
fit boolean 当设置为 true 的时候,将设置日历控件大小自适应父容器。默认值 false。
$(function () { $('#box').calendar({ width:400, height:300, fit:true //当设置为 true 的时候,将设置日历控件大小自适应父容器。默认值 false。 }); });
border boolean 定义是否显示边框。默认值 true。
$(function () { $('#box').calendar({ width:400, height:300, border:false //定义是否显示边框。默认值 true。 }); });
firstDay number 定义一周的第一天是星期几。0=星期日、1=星期一 等。定义星期几的排序0从星期日排序1从星期一排序
$(function () { $('#box').calendar({ width:400, height:300, firstDay:1 //定义星期几的排序0从星期日排序1从星期一排序 }); });
weeks array显 示 的 周 列 表 内 容 。 默 认 值 :['S','M','T','W','T','F','S'],定义星期几的显示文字
$(function () { $('#box').calendar({ width:400, height:300, weeks:['S','M','T','W','T','F','S'] //定义星期几的显示文字 }); });
months array显示的月列表内容。默认值:['Jan','Feb', 'Mar', 'Apr', 'May','Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec'],定义月份显示文字
$(function () { $('#box').calendar({ width:400, height:300, months:['Jan','Feb', 'Mar', 'Apr', 'May','Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec'] }); });
year number 年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。设置默认年份
$(function () { $('#box').calendar({ width:400, height:300, year:1984, //设置默认年份 month:9, //设置默认月份 }); });
month number 月日历。[b]设置默认月份[/b]
$(function () { $('#box').calendar({ width:400, height:300, year:1984, //设置默认年份 month:9, //设置默认月份 }); });
current date 当前日期,设置默认当前日期
$(function () { $('#box').calendar({ width:400, height:300, year:1984, //设置默认年份 month:9, //设置默认月份 current:new Date(1984,8,25) //设置默认当前日期,月份从0开始所以9月就写8月 }); });
formatter date 格式化日期,就是可以给每个日期添加自定义字符
$(function () { $('#box').calendar({ width:400, height:300, formatter:function (date) { return '#' + date.getDate(); } }); });
styler date 设置指定日期的样式,设置日期的样式
$(function () { $('#box').calendar({ width: 400, height: 300, styler: function (date) { if (date.getDate() == 1) { //将每月1日改变样式 return 'background-color:#ccc'; } } }); });
validator date 设置指定日期是否可以选择
$(function () { $('#box').calendar({ width: 400, height: 300, validator: function (date) { if (date.getDay() == 1) { //将每个星期一设置为不可用 return false }else { return true } } }); });
三.事件列表
onSelect date 在用户选择一天的时候触发。
$(function () { $('#box').calendar({ width: 400, height: 300, onSelect: function (date) { alert(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()); // date.getFullYear()用户选择的年 // date.getMonth()用户选择的月 // date.getDate()用户选择的日 } }); });
onChange newDate, oldDate 在用户改变选择的时候触发。
$(function () { $('#box').calendar({ width: 400, height: 300, onChange: function (newDate, oldDate) { alert(newDate + '|' + oldDate); // newDate改变后的日期 // oldDate改变前的日期 } }); });
四.方法列表
options none 返回参数对象。
$(function () { $('#box').calendar({ width: 400, height: 300, }); alert($('#box').calendar('options')); //返回参数对象 });
resize none 调整日历大小。就是如果日历变形后重置
$(function () { $('#box').calendar({ width: 400, height: 300, }); $('#box').calendar('resize'); //调整日历大小。 });
moveTo date 移动日历到指定日期。默认选择日期
$(function () { $('#box').calendar({ width: 400, height: 300, }); $('#box').calendar('moveTo',new Date(2015,1,1)); //移动日历到指定日期 });
我们可以使用$.fn.calendar.defaults 重写默认值对象。
相关文章推荐
- 微信小程序日历组件calendar详解及实例
- easyui--calendar日历组件
- vue2.0项目 calendar.js(日历组件封装)
- 有关Silverlight Calendar组件(日历组件)的研究
- 使用XWAF框架(4)——LunarCalendar日历组件
- kingwell Calendar V1.0 日历时间组件
- 有关Silverlight Calendar组件(日历组件)的研究——Silverlight学习笔记(1)
- angular2集成FullCalendar日历插件,高德地图,highcharts
- OK! BLOG 基本完善,添加了最后一个组件:日历。
- java基础--21 Calendar日历类
- 分享一个WPF下日历控件(Calendar)的样式
- 第一百九十九节,jQuery EasyUI,Panel(面板)组件
- Calendar类学习,自己写了个日历查询小程序,供大家学习参考
- javascript日历:calendar.js
- Python模块知识2:时间日期日历模块Time、Datetime、Calendar
- 第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件
- calendar 日历函数
- jquery日历插件e-calendar升级版
- Vue 组件(component)之 精美的日历
- 《Web Calendar ver 3.0 网页日历》 源代码提供!