非常教程

jQuery EasyUI 教程教程

jQuery EasyUI 表单插件 – Datebox 日期框

jQuery EasyUI 表单插件 – Datebox 日期框

jQuery EasyUI 表单插件 - Datebox 日期框


jQuery EasyUI 表单插件 – Datebox 日期框

jQuery EasyUI 插件

扩展自 $.fn.combo.defaults。通过 $.fn.datebox.defaults 重写默认的 defaults。

日期框(datebox)把可编辑的文本框和下拉日历面板结合起来,用户可以从下拉日历面板中选择日期。在文本框中输入的字符串可悲转换为有效日期。被选择的日期也可以被转换为期望的格式。

jQuery EasyUI 表单插件 – Datebox 日期框

依赖

  • combo
  • calendar

用法

从标记创建日期框(datebox)。

<input id="dd" type="text" class="easyui-datebox" required="required">

使用 javascript 创建日期框(datebox)。

<input id="dd" type="text">
$('#dd').datebox({
    required:true
});

属性

该属性扩展自组合(combo),下面是为日期框(datebox)添加的属性。

名称 类型 描述 默认值
panelWidth number 下拉日历面板的宽度。 180
panelHeight number 下拉日历面板的高度。 auto
currentText string 当前日期按钮上显示的文本。 Today
closeText string 关闭按钮上显示的文本。 Close
okText string 确定按钮上显示的文本。 Ok
disabled boolean 设置为 true 时禁用该域。 false
buttons array 日历下面的按钮。该属性自版本 1.3.5 起可用。
代码实例:
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
        alert('click MyBtn');
    }
});
$('#dd').datebox({
    buttons: buttons
});
sharedCalendar string,selector 多个日期框(datebox)组件使用的共享日历。该属性自版本 1.3.5 起可用。
代码实例:
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatter function 格式化日期的函数,该函数有一个 'date' 参数,并返回一个字符串值。下面的实例演示如何重写默认的格式化(formatter)函数。
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser function 解析日期字符串的函数,该函数有一个 'date' 字符串,并返回一个日期值。下面的实例演示如何重写默认的解析(parser)函数。
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

事件

名称 参数 描述
onSelect date 当用户选择一个日期时触发。
代码实例:
$('#dd').datebox({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

方法

该方法扩展自组合(combo),下面是为日期框(datebox)重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
calendar none 获取日历(calendar)对象。下面的实例演示如何获取日历(calendar)对象,然后重现它。
// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
    firstDay: 1
});
setValue value 设置日期框(datebox)的值。
代码实例:
$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value

jQuery EasyUI 表单插件 – Datebox 日期框

jQuery EasyUI 插件
jQuery EasyUI 表单插件 – Datebox 日期框
jQuery EasyUI 教程

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。

jQuery EasyUI 教程目录

1.jQuery EasyUI 教程
2.jQuery EasyUI 基础插件 – Draggable 可拖拽
3.jQuery EasyUI 基础插件 – Easyloader 加载器
4.jQuery EasyUI 基础插件 – Parser 解析器
5.jQuery EasyUI 布局插件 – Tabs 标签页/选项卡
6.jQuery EasyUI 布局插件 – Panel 面板
7.jQuery EasyUI 基础插件 – Tooltip 提示框
8.jQuery EasyUI 基础插件 – Progressbar 进度条
9.jQuery EasyUI 基础插件 – Searchbox 搜索框
10.jQuery EasyUI 基础插件 – Pagination 分页
11.jQuery EasyUI 基础插件 – Resizable 可调整尺寸
12.jQuery EasyUI 基础插件 – Droppable 可释放
13.jQuery EasyUI 菜单与按钮插件 – Linkbutton 链接按钮
14.jQuery EasyUI 菜单与按钮插件 – Menu 菜单
15.jQuery EasyUI 布局插件 – Layout 布局
16.jQuery EasyUI 布局插件 – Accordion 折叠面板
17.jQuery EasyUI 菜单与按钮插件 – Splitbutton 分割按钮
18.jQuery EasyUI 菜单与按钮插件 – Menubutton 菜单按钮
19.jQuery EasyUI 表单插件 – Datebox 日期框
20.jQuery EasyUI 表单插件 – Numberbox 数字框
21.jQuery EasyUI 表单插件 – Combogrid 组合网格
22.jQuery EasyUI 表单插件 – Combotree 组合树
23.jQuery EasyUI 表单插件 – Combobox 组合框
24.jQuery EasyUI 表单插件 – Combo 组合
25.jQuery EasyUI 表单插件 – Validatebox 验证框
26.jQuery EasyUI 表单插件 – Form 表单
27.jQuery EasyUI 数据网格与树插件 – Datagrid 数据网格
28.jQuery EasyUI 窗口插件 – Messager 消息框
29.jQuery EasyUI 窗口插件 – Dialog 对话框
30.jQuery EasyUI 窗口插件 – Window 窗口
31.jQuery EasyUI 表单插件 – Slider 滑块
32.jQuery EasyUI 表单插件 – Timespinner 时间微调器
33.jQuery EasyUI 表单插件 – Numberspinner 数值微调器
34.jQuery EasyUI 表单插件 – Spinner 微调器
35.jQuery EasyUI 表单插件 – Calendar 日历
36.jQuery EasyUI 表单插件 – Datetimebox 日期时间框
37.jQuery EasyUI 扩展 – 可编辑的树
38.jQuery EasyUI 扩展 – 可编辑的数据网格
39.jQuery EasyUI 扩展 – 数据网格视图
40.jQuery EasyUI 扩展 – Portal
41.jQuery EasyUI 插件
42.jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格
43.jQuery EasyUI 数据网格与树插件 – Tree 树
44.jQuery EasyUI 数据网格与树插件 – Propertygrid 属性网格
45.jQuery EasyUI 扩展 – RTL 支持
46.jQuery EasyUI 扩展 – DWR 加载器
47.jQuery EasyUI 扩展 – 主题
48.jQuery EasyUI 扩展 – 树形网格行拖放
49.jQuery EasyUI 扩展 – 数据网格行拖放
50.jQuery EasyUI 扩展 – 数据网格行过滤
51.jQuery EasyUI 扩展 – Ribbon