zoukankan      html  css  js  c++  java
  • 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>

    效果图:

  • 相关阅读:
    003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程
    002 01 Android 零基础入门 01 Java基础语法 01 Java初识 02 Java简介
    001 01 Android 零基础入门 01 Java基础语法 01 Java初识 01 导学
    001 Android Studio 首次编译执行项目过程中遇到的几个常见问题
    Dora.Interception,为.NET Core度身打造的AOP框架 [2]:以约定的方式定义拦截器
    Dora.Interception,为.NET Core度身打造的AOP框架 [1]:更加简练的编程体验
    监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile
    轻量级ORM框架——第二篇:Dapper中的一些复杂操作和inner join应该注意的坑
    轻量级ORM框架——第一篇:Dapper快速学习
    CF888G Xor-MST(异或生成树模板)
  • 原文地址:https://www.cnblogs.com/libingql/p/2465205.html
Copyright © 2011-2022 走看看