场景

效果

属性

该属性扩展自组合（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()); } });

名称

参数

描述

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

名称

参数

描述

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

实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<input id="dd" type="text" class="easyui-datebox" required="required">
<input id="dd1" type="text" class="easyui-datebox" required="required">
<script type="text/javascript">$('#dd1').datebox({onSelect: function(date){alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());}});
</script>
</body>
</html>

EasyUI中Datebox日期框的简单使用相关推荐

EasyUI中Combox组合框的简单使用
场景效果用法从带有预定义结构的 <select> 元素创建组合框(combobox). <select id="cc" class="easyui ...
EasyUI中Validatebox验证框的简单使用
场景效果属性名称类型描述默认值 required boolean 定义是否字段应被输入. false validType string,array 定义字段的验证类型,比如 email.u ...
EasyUI中ToolTip提示框的简单使用
场景效果属性名称类型描述默认值 position string 提示框(tooltip)位置.可能的值:'left'.'right'.'top'.'bottom'. bottom cont ...
EasyUI中Messager消息框的简单使用
场景效果属性名称类型描述默认值 ok string 确定按钮的文本. Ok cancel string 取消按钮的文本. Cancel 方法名称参数描述 $.messager.sho ...
Android中MaterialSearchView(搜索框)的简单实用
Android中MaterialSearchView(搜索框)的简单实用收搜框架有好多,动画效果满炫酷的就是代码太多,没发抽取他的搜索功能,而这个却比较好用些,直接从代码里面抠出来一个简单实现搜索功 ...
jQuery EasyUI 表单插件 - Datebox 日期框
为什么80%的码农都做不了架构师?>>> 扩展自 $.fn.combo.defaults.通过 $.fn.datebox.defaults 重写默认的 defaults. 日期 ...
Easyui之DateBox日期输入框
DateBox初步介绍前言案例演示 1.静态html实现 2.js动态加载数据实现总结前言今天为大家分享的知识点是DateBox组件,博主自主学习之后决定分享给你们啦,感兴趣的小伙伴们搬好小 ...
Easyui的DateBox日期格式化
DateBox 日期显示默认的格式为"dd/mm/yyyy",如果想自定义成我们的格式需要实现两个函数,formatter和parser. formatter函数使得选择日期后将其 ...
往mysql数据库中存当前日期_在MySQL数据库中存储日期的最简单方法是什么？
要在MySQL中存储日期,请使用STR_TO_DATE()方法-insert into yourTableName values(STR_TO_DATE('yourDate', '%d/%m/%Y') ...

EasyUI中Datebox日期框的简单使用

场景

效果

属性

事件

方法

实现

EasyUI中Datebox日期框的简单使用相关推荐

最新文章

热门文章