您的位置：首页 > Web前端 > JQuery

第二百一十五节，jQuery EasyUI，DateBox(日期输入框)组件

2017-04-05 19:05 399 查看

jQuery EasyUI，DateBox(日期输入框)组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法，这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历)。

一．加载方式

class 加载方式

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

datebox()将一个输入框元素执行日期输入框方法

JS 加载调用

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

二．属性列表

Datebox 属性，扩展自 Combo(自定义下拉框)组件，所以[b]Combo(自定义下拉框)组件的属性也是有效的[/b]

panelWidth number 下拉日历面板宽度。默认值180。

$(function () {
$('#box').datebox({
panelWidth:147,
panelHeight:200
});
});

panelHeight number 下拉日历面板高度。默认值 auto。

$(function () {
$('#box').datebox({
panelWidth:147,
panelHeight:200
});
});

currentText string 显示当天按钮。默认值 Today。设置今天按钮文字

$(function () {
$('#box').datebox({
panelWidth:147,
panelHeight:200,
currentText:'T',
closeText:'C'
});
});

closeText string 显示关闭按钮。默认值 Close。设置关闭按钮文字

$(function () {
$('#box').datebox({
panelWidth:147,
panelHeight:200,
currentText:'T',
closeText:'C'
});
});

okText string 显示 OK 按钮。默认值 Ok。异常

disabled boolean 该属性值为 true 时禁用该字段。默认值 false。

$(function () {
$('#box').datebox({
panelWidth:147,
panelHeight:200,
disabled:true   //该属性值为 true 时禁用该字段。默认值 false。
});
});

buttons array 在日历下面的按钮。拓展日历下面的按钮

$(function () {
//插入拓展按钮
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: '确定',   //按钮名称
handler: function (target) {
alert('确定');
}
});

$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
buttons: buttons   //自定义拓展按钮
});
});

sharedCalendar string,selector 将一个日历控件共享给多个datebox 控件使用。默认值 null。就是将一个设置好的日历组件共用到多个输入框

html

<input class="box">
<input class="box">
<!--一个div-->
<div id="sc"></div>

$(function () {
$('.box').datebox({             //将两个输入框，执行日期输入框方法
panelWidth: 147,
panelHeight: 200,
sharedCalendar:'#sc'        //将日历控件指向id为sc的元素
});
$('#sc').calendar({             //将id为sc元素执行日历方法
firstDay:1
})
});

formatter function该函数用于格式化日期，它有一个'date'参数并且会返回一个字符串类型的值。下面的一个例子展示了如何重写默认的 formatter 函数。格式化日期

$(function () {
$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
formatter:function (date) {  //重新格式化如果，以/作为分隔符
return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate();
}
});
});

parser function该函数用于解析一个日期字符串，它有一个'date'字符串参数并且会返回一个日期类型的值。将输入框的日期固定一个日期值，无论怎么选择它都是这个值

$(function () {
$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
parser:function (date) {
return new Date(2015,6,1);
}
});
});

三．事件列表

onSelect date 在用户选择一天的时候触发。

$(function () {
$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
onSelect:function (date) {      //在用户选择一天的时候触发
alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
}
});
});

四．方法列表

options none 返回参数对象。

$(function () {
$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
});
alert($('#box').datebox('options'));
});

calendar none 返回日历对象。

$(function () {
$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
});
//得到日历对象，再将日历的星期一放到最前面
$('#box').datebox('calendar').calendar({
firstDay: 1,
});
});

setValue value 设置日期输入的值。初始化日历输入框里的[b]value值[/b]

$(function () {
$('#box').datebox({
panelWidth: 147,
panelHeight: 200,
});
$('#box').datebox('setValue','2015-6-1');   //初始化日历输入框里的value值
});

我们可以使用$.fn.databox.defaults 重写默认值对象。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航