JQuery EasyUI(25)-优快云博客

本文详细介绍了EasyUI框架中的Datebox日期输入框组件，包括加载方式、属性、事件和方法列表，以及如何通过JS调用进行配置，适合前端开发者深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第二十五章：Datebox（日期输入框）组件

学习要点：

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

一、加载方式：

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>
     <input class="easyui-datebox"> 
  </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>
       <input id="box">
  </body>
</html>

$(function(){

   $.('#box').datebox({
      
  });
});

二、属性列表：

Datebox属性列表，扩展自（ Combo自定义下拉框）组件
属性名	值	说明
panelWidth	number	下拉日历面板宽度。默认值180。
panelHeight	number	下拉日历面板高度。默认值auto。
currentText	string	显示当天按钮。默认值Today。
closeText	string	显示关闭按钮。默认值Close。
OKText	string	显示OK按钮。默认值OK。
disabled	boolean	该属性值为true时禁用该字段。默认值false。
button	array	在日历下面的按钮。
sharedCalendar	string，selector	将一个日历控件共享个给多个datebox控件使用。默认值null
formatter	function	该函数用于格式化日期，它有一个‘date’参数并且会返回一个字符串类型的值。下面的一个例子展示了如何重写默认的formatter函数。

<!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>
       <input id="box">

       <!--
        <input class="easyui-datebox" date-options="sharedCalendar:'#cc'"> 
        <input class="easyui-datebox" date-options="sharedCalendar:'#cc'">
        <input id="cc"> 
       -->

  </body>
</html>

$(function(){
 
   var buttons = $.extend([],$.fn.datebox.defaults.buttons);
   buttons.splice(1,0,{
      text:'新增',
      handel:function(target){
        alert('新增');
   }
  });

   $.('#box').datebox({
       //panelWidth：300,
       //panelHeight:300,
       //currentText:'T',
       //closeText:'C',
       //okText:'O',
       //buttons:buttons,

       //formatter:function(date){
       //  return date.getFullYear() + '/' + date.getMonth() + 1 +'/'+ date.getDate();
       //},

       parser:function(){
           return new Date(2015,5,1);
      }
   });

   $.('#cc').calendar({
    firstDay:1,
  });
});

三、事件列表：

Datebox事件
事件名	事件属性	说明
onSelect	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>
       <input id="box">
  </body>
</html>

$(function(){

   $.('#box').datebox({
        onSelect：function(){
            alert('触发！');
     }
   });
});

四、方法列表：

Datebox方法，扩展自Combo（自定义下拉框）
方法名	传参	说明
options	none	返回参数对象。
calendar	none	返回日历对象。
setValue	value	设置日期输入的值。

<!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>
       <input id="box">
  </body>
</html>

$(function(){

   $.('#box').datebox({
 
   });

   $.('#box').datebox('calendar').calendar({
            firstDay:1,
   });

   $.('#box').datebox('setValue','2015-05-01');
});

作者：Roger_CoderLife

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

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