当前位置:网站首页 / AY梦 / 正文

AYUI内置的万能日期控件-日期表达式

时间:2018年10月17日 | 作者 : aaronyang | 分类 : AY梦 | 浏览: 411次 | 评论 0

上篇文章:AYUI内置的万能日期控件-web界的my97


16 日期范围限制

    1 静态限制

    示例16-1-1  限制日期的范围是 2016-09-10到2018-12-20

    minDate:'2016-09-10',maxDate:'2018-12-20'

    image.png首和尾image.png

    这里AY对 手动输入年月日,滚轮,单击选中日期的,都进行了控制。


    示例16-1-2  限制日期的范围是 2018-10-01 11:30:00 到 2018-10-01 20:59:30,今天是2018-10-17 16:49:31 所以今天按钮也是不可以选择的

    dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2018-10-01 11:30:00',maxDate:'2018-10-01 20:59:30'

    image.png

    示例16-1-3 限制日期的范围是 2018年2月 到 2018年10月

    dateFmt:'yyyy年M月',minDate:'2018-2',maxDate:'2018-10'

    image.png

    示例16-1-4 限制日期的范围是 8:00:00 到 11:30:00

    dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'

    image.png


当然我的限制,是支持双月的

doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2018-09-08 11:30:00',maxDate:'2018-10-20 20:50:30'

image.png前面和后面image.png



    2 动态限制

%y 当前年

%M 当前月

%d 当前日

%ld 本月最后一天

%H 当前时

%m 当前分

%s 当前秒

{} 运算表达式,如:{%d+1}:表示明天

#F{} {}之间是AY内置的函数


上面的%XX是动态日期



示例16-2-1 只能选择今天以前的日期(包括今天)

maxDate:'%y-%M-%d'

image.png

示例16-2-2 只能选择今天以后的日期(不包括今天)

minDate:'%y-%M-{%d+1}'

image.png

示例16-2-3 只能选择本月的日期1号至本月最后一天

minDate:'%y-%M-01',maxDate:'%y-%M-%ld'

image.png

示例16-2-4 只能选择今天7:00:00至明天21:00:00的日期

dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'

image.png  image.png  image.png image.png

如果选了最大的,会自动变成最大值,纠正错误,这里纠正了 3分25秒,变成了 0分0秒,是 21:00:00

image.png

示例16-2-5 只能选择 20小时前 至 30小时后 的日期

dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'

image.png


   3 脚本自定义限制

示例16-3-1前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01 

这里是两个级联,这里除了设置DateRule,还要设置MaxDateReferToElement和MinDateReferToElement就是绑定相关联的控件

例如下面的xaml代码,表达的意思,第一个日期,最大的日期是 后面的日期,第二个日期的最小日期 是前面一个选的日期,我们设置了MaxDateReferToElement或者MinDateReferToElement后,需要加上

maxDate:'#F{#D(ay)}'或者minDate:'#F{#D(ay)}'方可把对应的属性生效#D(ay)是固定的写法,只用于MaxDateReferToElement和MinDateReferToElement生效

 <TextBlock VerticalAlignment="Center"
                       Text="合同有效期从"
                       FontSize="14"
                       Margin="2,0,0,0"></TextBlock>
            <control:AyDateBoxCalendar  HorizontalAlignment="Stretch"
                                        Padding="0"
                                        x:Name="dbc1"
                                        Width="190" control:AyForm.Form="{Binding ElementName=forms}"
                                        MaxDateReferToElement="{Binding ElementName=dbc2}"
                               DateRule="dateFmt:'yyyy-MM-dd',maxDate:'#F{#D(ay)}'"
                                        Foreground="{DynamicResource Ay.Brush6}"
                                        Margin="1,0,2,0"
                                        Height="32"
                                        VerticalAlignment="Center"></control:AyDateBoxCalendar>
            <TextBlock VerticalAlignment="Center"
                       Text="到"
                       FontSize="14"
                       Margin="1,0,0,0"></TextBlock>
            <control:AyDateBoxCalendar  HorizontalAlignment="Stretch" control:AyForm.Form="{Binding ElementName=forms}"
                                        Padding="0"
                                        x:Name="dbc2"
                                        MinDateReferToElement="{Binding ElementName=dbc1}"
                                        Width="190"
                               DateRule="dateFmt:'yyyy-MM-dd',minDate:'#F{#D(ay)}'"
                                        Foreground="{DynamicResource Ay.Brush6}"
                                        Margin="1,0,2,0"
                                        Height="32"
                                        VerticalAlignment="Center"></control:AyDateBoxCalendar>

那么16-3-1的需求,怎么改也简单了。

第一个日期的表达式:dateFmt:'yyyy-MM-dd',maxDate:'#F{#D(ay)||#DV(2020-10-01)}'

第二个日期的表达式:dateFmt:'yyyy-MM-dd',minDate:'#F{#D(ay)}',maxDate:'2020-10-01'

注意:

两个日期的日期格式必须相同,dateFmt要一样


单击第一个日期,翻到了最后,此时第二个日期没有选择的

image.png

选择第二个

image.png

然后随便选个日期,选择今天吧,然后单击第一个日期,此时第一个日期已经被限制住咯

image.png

OK,满足需求。


当然还有种场景,第一个日期的最小日期是今天,修改如下

dateFmt:'yyyy-MM-dd',maxDate:'#F{#D(ay)||#DV(2020-10-01)}',minDate:'%y-%M-%d'

第二个日期不变,那么最小日期是明天呢

dateFmt:'yyyy-MM-dd',maxDate:'#F{#D(ay)||#DV(2020-10-01)}',minDate:'%y-%M-{%d+1}'

image.png

这里 静态日期联合限制,我们使员工#DV()函数,#DV是支持 %XX开头的动态日期限制的


示例16-3-2 前面的日期+3天 不能大于 后面的日期 

第一个日期设置:maxDate:'#F{#D(ay,{d:-3})}'

第二个日期设置:minDate:'#F{#D(ay,{d:3})}'

image.png

日期差量用法:

属性y,M,d,H,m,s分别代表年月日时分秒

如 

为空时,表示直接取值,不做差量

{M:5,d:7} 表示 五个月零7天

{y:1,d:-3} 表示 1年少3天

{d:1,H:1} 表示一天多1小时


示例16-3-2 前面的日期+3月零2天 不能大于 后面的日期 且 

                前面日期都不能大于 2020-4-3减去3月零2天 

                后面日期 不能大于 2020-4-3

第一个日期设置:maxDate:'#F{#D(ay,{M:-3,d:-2})||#DV(2020-4-3,{M:-3,d:-2})}'

第二个日期设置:minDate:'#F{#D(ay,{M:3,d:2})}',maxDate:'#F{#DV(2020-4-3)}'

效果:

当第二个没有选择时候,选择第一个,切换到最后的日期

image.png

当选择第二个后

image.png

满足要求了。

那么拓展下,多个动态的天限制,比如多个DV函数

#F{#D(ay,{M:-3,d:-2})||#DV(2020-4-3,{M:-3,d:-2})||#DV(%y-%M-{%d+1}))}


我的日期,不支持自定义方法来限制用户的日期。我的日期格式必须是yyyy-MM-dd HH:mm:ss 这种双位的日期符号,不支持yyyy-M-d H:m:s这种



 17 无效天的限制

 可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)   

 禁用周六 disabledDays:[6]

image.png

禁用周六,周日 disabledDays:[0,6]

image.png


18 无效日期

用法(正则匹配): 

示例18-1 禁用 每个月份的 5日 15日 25日

disabledDates:['5$']

image.png

注意 :'5$' 表示以 5 结尾 注意 $ 的用法


示例18-2 禁用 所有早于2000-01-01的日期

disabledDates:['^19']

image.png

'^19' 表示以 19 开头 注意 ^ 的用法 

当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法


示例18-3 配合min/maxDate使用,可以把可选择的日期分隔成多段

本示例本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末

minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']

image.png


示例18-4 禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量

image.png选择小时image.png


19 有效日期

opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用

只启用 每个月份的 5日 15日 25日

opposite:true,disabledDates:['5$']

image.png


20 特殊天和特殊日期

特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效


关键属性:

specialDays (0至6 分别代表 周日至周六) 用法同无效天 

specialDates 用法同无效日期,但是对时分秒无效


示例20-1 高亮每周 周一 周五

specialDays:[1,5]

image.png

示例20-1 高亮每周 周一 周五

specialDates:['....-..-01','....-..-15']

image.png

禁用,有效的啥的,可以结合%y,%M %d等动态日期进行处理。

比如 %y-%M-%d {%H-1}:..:..

dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}:..:..','%y-%M-%d {%H+1}:..:..']

opposite:true,dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}:..:..']

opposite:true,dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d %H:..:..']


====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========


这个日期控件,我一共写了60多天,前后 推到设计重做7次,耐的住寂寞,才能写的出来,谢谢大家,

以上的日期控件,AY制作,也只有AYUI才有,我想这是目前WPF上 功能最全的日期控件了。




推荐您阅读更多有关于“”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

兼容XP到win10,vs2015/2019,最新AYUI:7.6.5.2

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表