EasyUI 日期框

来源：互联网发布：手机陶笛软件编辑：程序博客网时间：2024/06/04 19:03

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

1、用法

（1）、从标记创建日期框（datebox）。

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

（2）、使用 javascript 创建日期框（datebox）。

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

2、属性

该属性扩展自组合（combo），下面是为日期框（datebox）添加的属性。

名称

类型

描述

默认值

panelWidth

number

下拉日历面板的宽度。

180

panelHeight

number

下拉日历面板的高度。

auto

currentText

string

当前日期按钮上显示的文本。

Today

closeText

string

关闭按钮上显示的文本。

okText

string

确定按钮上显示的文本。

disabled

boolean

设置为 true 时禁用该域。

false

buttons

array

日历下面的按钮。该属性自版本 1.3.5 起可用。

sharedCalendar

string,selector

多个日期框（datebox）组件使用的共享日历。该属性自版本 1.3.5 起可用。

null

formatter

function

格式化日期的函数，该函数有一个 'date' 参数，并返回一个字符串值。

parser

function

解析日期字符串的函数，该函数有一个 'date' 字符串，并返回一个日期值。

3、事件

名称

参数

描述

onSelect

date

当用户选择一个日期时触发。

4、方法

该方法扩展自组合（combo），下面是为日期框（datebox）重写的方法。

名称

参数

描述

options

none

返回选项（options）对象。

calendar

none

获取日历（calendar）对象。

setValue

value

设置日期框（datebox）的值。

5、实例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>DateBox - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="margin:20px 0;"></div><h2>基本的日期框</h2><input class="easyui-datebox"></input><div style="margin:20px 0;"></div><h2>日期格式</h2><input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input><script type="text/javascript">function myformatter(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);}function myparser(s){if (!s) return new Date();var ss = (s.split('-'));var y = parseInt(ss[0],10);var m = parseInt(ss[1],10);var d = parseInt(ss[2],10);if (!isNaN(y) && !isNaN(m) && !isNaN(d)){return new Date(y,m-1,d);} else {return new Date();}}</script><div style="margin:20px 0;"></div><h2>日期框按钮</h2><input class="easyui-datebox" data-options="buttons:buttons"></input><script>var buttons = $.extend([], $.fn.datebox.defaults.buttons);buttons.splice(1, 0, {text: 'MyBtn',handler: function(target){alert('click MyBtn');}});</script><div style="margin:20px 0;"></div><h2>日期框事件</h2><input class="easyui-datebox" data-options="onSelect:onSelect"></input><div style="margin:10px 0"><span>Selected Date: </span><span id="result"></span></div><script>function onSelect(date){$('#result').text(date)}</script><div style="margin:20px 0;"></div><h2>日期框的日期范围限制</h2><input id="dd"></input><script>$(function(){$('#dd').datebox().datebox('calendar').calendar({validator: function(date){var now = new Date();var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()+10);return d1<=date && date<=d2;}});});</script><div style="margin:20px 0;"></div><h2>日期框验证</h2><input class="easyui-datebox" required data-options="validType:'md[\'10/11/2012\']'"></input><script>$.extend($.fn.validatebox.defaults.rules, {md: {validator: function(value, param){var d1 = $.fn.datebox.defaults.parser(param[0]);var d2 = $.fn.datebox.defaults.parser(value);return d2<=d1;},message: 'The date must be less than or equals to {0}.'}})</script><div style="margin:20px 0;"></div><h2>日期框的共享日历</h2><table><tr><td>Start Date:</td><td><input class="easyui-datebox" data-options="sharedCalendar:'#cc'"></td><td>End Date:</td><td><input class="easyui-datebox" data-options="sharedCalendar:'#cc'"></td></tr></table><div id="cc" class="easyui-calendar"></div></body></html>

0 0