zoukankan      html  css  js  c++  java
  • 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,
                     240,
                    renderTo: Ext.getBody(),
                    items: [{
                        fieldLabel: "日期选择框",
                        labelWidth: 80,
                         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:"禁止选择该日期",
                        230,
                        value:"04/23/2012"
                    }]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html
  • 相关阅读:
    Android环境配置问题
    Android diary 1
    Android diary 2
    myeclipse常见问题
    Mysql常用命令
    桉树系统公司市场高级副总裁David Butler:全球最广泛应用的企业内部云平台
    引用外部.css或.js文件的路径问题
    [基础知识]巧用项目生成事件属性自动打包
    TSQL经验总结
    [Silverlight]UI 开发规范
  • 原文地址:https://www.cnblogs.com/myitmylife/p/3620212.html
Copyright © 2011-2022 走看看