JQuery EasyUI(24)

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的日历组件，包括其加载方式、属性、事件及方法。通过示例代码展示了如何初始化日历，设置其样式、功能，并响应用户交互。

第二十四章：Calendar（日历）组件

学习要点：

加载方式
属性列表
方法列表
方法列表

一、加载方式：

1.class 加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <div id="box" class="easyui-calendar" style="width:200px;height:200px;"> 

     </div> 
 </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <div id="box" style="width:200px;height:200px;"> 

     </div>  
 </body>
</html>

$(function(){
  $.('#box').calendar({

  });
});

二、属性列表：

Calendar属性
属性名	值	说明
width	number	日历控件宽度。默认值180。
height	number	日历控件高度。默认值180。
fit	boolean	当设置为true的时候，将设置日历控件大小自适应父容器。默认值true。
border	boolean	定义是否显示边框。默认值true。
firstDay	number	定义一周的第一天是星期几。0=星期日、1=星期一等。
weeks	array	显示的周列表内容。默认值：['S','M','T','W','F','S']
months	array	显示的月列表内容。默认值：['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
year	number	年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历。
month	number	月日历
current	date	当前日期
formatter	date	格式化日期
styler	date	设置指定日期的样式
validator	date	设置指定日期是否能够选择

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <div id="box"> 

     </div> 
 </body>
</html>

$(function(){
  $.('#box').calendar({
     //width:200px,
     //height:200px,

     //fit:true,
     //border:false,
     //firstDay:1,

     //weeks:['S','M','T','W','F','S'],
     //months:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],

     //year:2015,
     //month:5,
     //current:new Date(2015,6,1),

     //formatter:function(date){
     //return '#' + date.getDate();
     //}

     /*
     styler:function(date){
      if(date.getDate == 1){
          return 'background-color:#ccc';
     }
      if(date.getDay == 1){
          return 'background-color:#ccc';
     }
    },
    */

     validator:function(date){
        if(date.getDay == 1){
         return true;
     }else{
         return false;
     }
    }

  });
});

三、事件列表：

Calendar事件
事件名	事件属性	说明
onSelect	date	在用户选择一天的时候触发。
onChange	newDate,oldDate	在用户改变选择的时候触发。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <div id="box"> 

     </div> 
 </body>
</html>

$(function(){
  $.('#box').calendar({

     //width:200px,
     //height:200px,

     onSelect:function(date){
          alert(date);
    }

     /*
     onChange:function(newDate,oldDate){
       alert(newDate +'|'+ oldDate);
    }
    */

  });
});

四、方法列表：

Calendar方法
方法名	传参	说明
options	none	返回参数对象
resize	none	调整日历大小
moveTo	date	移动日历到指定日期

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <div id="box"> 

     </div> 
 </body>
</html>

$(function(){
    console.log($.('#box').calendar('options'));
    $.('#box').calendar('resize');
    $.('#box').calendar('moveTo',new Date(2015,1,1));

});

PS：我们可以使用$.fn.calendar.defaults 重置默认值对象。

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102972142

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载