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
posted @ 2014-03-24 09:51  菜鸟搞IT  阅读(660)  评论(0编辑  收藏  举报