jQuery EasyUI 表单插件 _ Datebox 日期框


jQuery EasyUI 插件 jQuery EasyUI 插件

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

日期框(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)添加的属性。

名称类型描述默认值
panelWidthnumber下拉日历面板的宽度。180
panelHeightnumber下拉日历面板的高度。auto
currentTextstring当前日期按钮上显示的文本。Today
closeTextstring关闭按钮上显示的文本。Close
okTextstring确定按钮上显示的文本。Ok
disabledboolean设置为 true 时禁用该域。false
buttonsarray日历下面的按钮。该属性自版本 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
});
sharedCalendarstring,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
formatterfunction格式化日期的函数,该函数有一个 '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;
}
parserfunction解析日期字符串的函数,该函数有一个 'date' 字符串,并返回一个日期值。下面的实例演示如何重写默认的解析(parser)函数。
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

事件

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

方法

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

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

jQuery EasyUI 插件 jQuery EasyUI 插件

    0 个评论

    要回复文章请先登录注册