您的位置：首页 > 其它

Ext.form.field.Date日期选择框

2012-04-22 17:14 423 查看

1、Ext.form.field.Date主要配置

Ext.form.field.Date主要配置项

配置项	类型	说明
altFormats	String	多个日期输入格式组成的字符串，不同的格式之间使用“\|”进行分隔。将使用这些格式来解析用户的输入信息。默认值为"m/d/y\|n/j/y\|m/j/y\|n/d/y\|m/j/Y\|n/d/Y\|m-d-y\|m-d-Y\|m/d\|m-d\|md\|mdy\|mdY\|d\|Y-m-d\|n-j\|n/j"
disabledDates	Array	禁止选择日期组成的数组
disabledDatesText	String	选择禁止日期时提示的消息
disabledDays	Array	禁止选择的星期组成的数组，0-周日，1-周一， ...，6-周六，默认为undefined
format	String	日期显示格式，默认为"m/d/y"
invalidText	String	输入无效日期时的提示消息
maxValue	Date/String	允许选择的最大日期
maxText	String	大于最大日期时的提示消息
minValue	Date/String	允许选择的最小日期
minText	String	小于最小日期时的提示消息
showToday	Boolean	是否显示“今天”选择按钮，默认为true
submitFormat	String	提交到服务器端的日期格式，默认为format

disabledDates配置格式及说明：

说明	示例
["05/01/2012","05/02/2012"]	禁止选择2012年05月01日和2012年05月02日
["05/01","05/02"]	禁止选择每年年05月01日和05月02日
["05/01"]	禁止选择每年年05月01
["03/../2012"]	禁止选择2012年3月份的任何一天
["^03"]	禁止选择每年3月份的任何一天

日期显示格式说明：

说明	说明	示例
d	日期的数字表示，带前缀0	01至31
j	日期的数字表示，不带前缀	1至31
D	星期的缩写表示	Sun-Sat
I	日期的完整表示	Sunday至Saturday
N	ISO-8601中规定的星期的数字表示	1表示周一，7表示周日
S	英文日期的2字母后缀	st,nd,th，常与j配合使用，组成1st，2nd形式的日期描述
w	星期的数字表示	0-周日，...，7-周日
z	一年中的第几天，从0开始	0至364
W	ISO-8601中规定的星期在一年中的数字表示。每星期从周一开始	01至53
F	月份的完整表示	January至December
m	月份的数字表示，带前缀0	01至12
M	月份的缩写表示	Jan至Dec
n	月份的数字表示，不带前缀0	1至12
t	特定月份的天数	28至31
L	特定年是否为闰年	1表示闰年，0表示非闰年
o	ISO-8601中规定的四位年数份	2012
Y	年份的四位数表示	2012
y	年份的两位数表示	12

2、示例

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.form.field.Date示例</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var frm = new Ext.form.Panel({
title: "Ext.form.field.Date示例",
bodyStyle: "padding:5",
frame: true,
height: 100,
width: 240,
renderTo: Ext.getBody(),
items: [{
fieldLabel: "日期选择框",
labelWidth: 80,
width: 230,
xtype: "datefield",
labelSeparator: "：",
labelAlign: "left",
msgTarget: "side",
autoFitErrors: false,
maxValue: "12/31/2012",
maxText: "日期应小于{0}",
minValue: "01/01/2012",
minText: "日期应大于{0}",
format: "Y年m月d日",
invalidText: "日期格式无效",
disabledDates: ["2012年04月22日"],
disabledDatesText:"禁止选择该日期",
disabledDays:[0,6], // 禁止选择周六和周日
disabledDaysText:"禁止选择该日期",
width:230,
value:"04/23/2012"
}]
});
});
</script>
</head>
<body>
</body>
</html>

效果图：

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

标签：

相关文章推荐

新的分享

章节导航