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

最新推荐文章于 2017-11-27 19:14:22 发布

weixin_33826609

最新推荐文章于 2017-11-27 19:14:22 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/myitmylife/p/3620212.html

本文详细介绍了Ext.form.field.Date组件的主要配置项及其用途，包括日期格式、禁用日期设置等，并提供了一个完整的示例代码，展示了如何创建并配置一个日期选择框。

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

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