EasyUI 日期框
2016-07-29 18:22
302 查看
日期框(datebox)把可编辑的文本框和下拉日历面板结合起来,用户可以从下拉日历面板中选择日期。在文本框中输入的字符串可悲转换为有效日期。被选择的日期也可以被转换为期望的格式。
<input id="dd" type="text" class="easyui-datebox" required="required">
(2)、使用 javascript 创建日期框(datebox)。
<input id="dd" type="text">
$('#dd').datebox({
required:true
});
<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>
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 | 关闭按钮上显示的文本。 | Close |
okText | string | 确定按钮上显示的文本。 | Ok |
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>
相关文章推荐
- Leetcode 62. Unique Paths (Medium) (cpp)
- EasyUI 数字框
- Rescue
- EasyUI 组合网格
- 给手势UITapGestureRecognizer绑定tag
- EasyUI 组合框
- java设计模式——建造者模式(Builder Pattern)
- EasyUI 组合树
- EasyUI 组合
- Android 5.1 SystemUI 状态栏修改
- EasyUI 文本框、文件框和开关按钮
- ueditor 文本编辑器
- 98.Which two statements are true regarding the usage of the SQL*Loader utility? (Choose two.)
- Rescue hd 1242
- POJ 2031 Building a Space Station (最小生成树)
- EasyUI 验证框
- EasyUI 表单
- 蓝牙bluetooth之二-源码分布
- Android UI(ToggleButton)详解
- EasyUI 提示框