新建AYUI7项目建立完全后,我们来学怎么使用。打开HomeView添加代码Grid x:Nameroot BackgroundWhite/Grid控件外观的颜色根据背景的主题来的如果是图片自动分析图片自动配色。1 平面演示control:AyCalendar HorizontalAlignmentCenter VerticalAlignmentCenter SelectModeDateTime/control:AyCalendarSelectMode有以下的值None,YearMonth,OnlySelectDate,DateTimeH,DateTimeNoSecond,DateTime,HM,HMS外观演示 None是无效值,无需选择DateTimeH 显示年月日 时DateTimeNoSecond 年月日时分HM 时分HMS 时分秒YearMonth 年月OnlySelectDate 年月日加上上面演示的 DateTime年月日时分秒模式一共7种单独的年月日时分秒控件是以下控件没有级联控制自己解决它们也是AyCalendar的基础组成部分年AyDateBoxYear月AyDateBoxMonth日AyDateBoxDay时AyDateBoxHour分AyDateBoxMinute秒AyDateBoxSecond下面的一些按钮可以控制是否显示IsShowClear 控制是否 显示 清空按钮IsShowToday 控制是否 显示今天按钮ExtButtonsVisibility 是否显示 整个按钮组 清空 今天 确定接下来讲下基本的AyDateBoxCalendar基于AyCalendar的日期选择控件2 基本模式 AyDateBoxCalendarcontrol:AyDateBoxCalendar HorizontalAlignmentCenterWidth190 Height32VerticalAlignmentCenter/control:AyDateBoxCalendar拉伸模式自适应外围Grid Height38control:AyDateBoxCalendar HorizontalAlignmentStretchWidthautoHeightautoVerticalAlignmentStretch/control:AyDateBoxCalendar/Grid默认选择模式是 年月日模式选择一次日就会自动关闭了年月日时分秒模式是双击日或者单击确定按钮到了AyDateBoxCalendar模式所有的控制全在DateRule这个属性控制了这个表达式是我实现的格式json键值设置。 我称作AY日期表达式下面学习这个表达式我的控件暂时不支持图标触发打开AyCalendar供用户选择3 起始日期默认的起始日期为 1991-04-04 我生日当日期框为空值时,将使用 1991-04-04 做为起始日期control:AyDateBoxCalendar HorizontalAlignmentCenterWidth200 DateRulestartDate:1991-04-04Height32VerticalAlignmentCenter/control:AyDateBoxCalendar4 alwaysUseStartDate属性应用默认的起始日期为 1991-04-04当日期框无论是何值,始终使用 1991-04-04 做为起始日期从下面开始只列出表达式的写法的代码了startDate:1991-04-04,alwaysUseStartDate:true5. 下拉,输入,导航选择日期通过导航图标选择2. 直接使用键盘输入数字3.直接从弹出的下拉框中选择支持鼠标滚轮6 支持周显示isShowWeek:true利用onpicked事件把周赋值给另外的文本框OnPicked这里我用后台xaml.cs事件获得的你也可以用AYUI的MVC模式Action.EventOnPicked IsSendEventArgstrue即可获得时间AyDatePickEventArgs e参数会传给你e.PickedDateTime.HasValue关于周的显示你可以绑定日期选择控件的Week依赖属性即可Text{Binding ElementNamedbc,PathWeek}dbc是一个AyDateBoxCalendar的控件7 只读开关,高亮周末功能设置readOnly属性 true 或 false 可指定日期框是否只读设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末高亮颜色暂时没提供对外的暴露固定的红色readOnly:true,highLineWeekDay:true8 操作按钮自定义清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉isShowClear:false,readOnly:true9 自动选择显示位置当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了.使用positon属性指定,弹出日期的坐标为{left:100,top:50}position:{left:100,top:50}10 自定义星期的第一天各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类推以星期一作为第一天firstDayOfWeek:1星期三为第一天11 使用内置参数除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月)下例演示,年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间startDate:%y-%M-01 00:00:00,dateFmt:yyyy-MM-dd HH:mm:ss,alwaysUseStartDate:true无论怎么打开都是12 自定义格式yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式.在我的日期控件里支持下面的当然还支持其他的后面再讲%y当前年%M当前月%d当前日%ld本月最后一天%H当前时%m当前分%s当前秒{}运算表达式,如:{%d1}:表示明天我的日期控件会根据 dawteFmt来自动切换 界面供用户选择当然基于AyCalendar的SelectMode年月日时分秒dateFmt:yyyy年MM月dd日 HH时mm分ss秒dateFmt:yyyy-MM-dd HH:mm:ss时分秒dateFmt:H:mm:ss快速选择会根据文本框的日期自动生成5个推荐的如果没有就是系统当前的时分秒然后推荐年月dateFmt:yyyy年MM月取得系统可识别的日期值如果用户填写的日期不符合DateFmt就会有提示这里建议时间是只读的是有好处的。星期, 月 日, 年dateFmt:dddd, MMMM d, yyyy 具体参考C#的StringFormat的日期时候的 东东13 双月功能支持年月日年月日时分秒两种doubleCalendar:true,dateFmt:yyyy-MM-dddoubleCalendar:true,dateFmt:yyyy-MM-dd HH:mm:ss当然可以配合周是否显示等其他的基本限制14 不合法日期日期超过最大最小日期限制, 日期格式不正确, 日期是禁用的然后手动输入的日期闰月平月的日期等都会弹出不合法日期的提示框15 图标和清除事件设置 Icon{x:Null}换其他的图标 Iconpath_clock 显示图标的控件是AyIconAll控件所有图标都能显示png,jpg,gif,path,font,fontawesome等OnCleared是单击了清空 按钮触发的16 多国语言和皮肤暂时只支持 中文暂时除了跟随主题换色暂时没其他的主题支持暂时固定死的然后基于AyFormInput写的所以 AyDateBoxCalendar支持AY表达式。16 日期范围限制1 静态限制示例16-1-1 限制日期的范围是 2016-09-10到2018-12-20minDate:2016-09-10,maxDate:2018-12-20这里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示例16-1-3 限制日期的范围是 2018年2月 到 2018年10月dateFmt:yyyy年M月,minDate:2018-2,maxDate:2018-10示例16-1-4 限制日期的范围是 8:00:00 到 11:30:00dateFmt:H:mm:ss,minDate:8:00:00,maxDate:11:30:00当然我的限制是支持双月的doubleCalendar:true,dateFmt:yyyy-MM-dd HH:mm:ss,minDate:2018-09-08 11:30:00,maxDate:2018-10-20 20:50:302 动态限制%y当前年%M当前月%d当前日%ld本月最后一天%H当前时%m当前分%s当前秒{}运算表达式,如:{%d1}:表示明天#F{}{}之间是AY内置的函数上面的%XX是动态日期示例16-2-1 只能选择今天以前的日期(包括今天)maxDate:%y-%M-%d示例16-2-2只能选择今天以后的日期(不包括今天)minDate:%y-%M-{%d1}示例16-2-3只能选择本月的日期1号至本月最后一天minDate:%y-%M-01,maxDate:%y-%M-%ld示例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-{%d1} 21:00:00如果选了最大的会自动变成最大值纠正错误这里纠正了 3分25秒变成了 0分0秒是 21:00:00示例16-2-5只能选择 20小时前 至 30小时后 的日期dateFmt:yyyy-MM-dd HH:mm,minDate:%y-%M-%d {%H-20}:%m:%s,maxDate:%y-%M-%d {%H30}:%m:%s3 脚本自定义限制示例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 VerticalAlignmentCenter Text合同有效期从 FontSize14 Margin2,0,0,0/TextBlock control:AyDateBoxCalendar HorizontalAlignmentStretch Padding0 x:Namedbc1 Width190 control:AyForm.Form{Binding ElementNameforms} MaxDateReferToElement{Binding ElementNamedbc2} DateRuledateFmt:yyyy-MM-dd,maxDate:#F{#D(ay)} Foreground{DynamicResource Ay.Brush6} Margin1,0,2,0 Height32 VerticalAlignmentCenter/control:AyDateBoxCalendar TextBlock VerticalAlignmentCenter Text到 FontSize14 Margin1,0,0,0/TextBlock control:AyDateBoxCalendar HorizontalAlignmentStretch control:AyForm.Form{Binding ElementNameforms} Padding0 x:Namedbc2 MinDateReferToElement{Binding ElementNamedbc1} Width190 DateRuledateFmt:yyyy-MM-dd,minDate:#F{#D(ay)} Foreground{DynamicResource Ay.Brush6} Margin1,0,2,0 Height32 VerticalAlignmentCenter/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要一样单击第一个日期翻到了最后此时第二个日期没有选择的选择第二个然后随便选个日期选择今天吧然后单击第一个日期此时第一个日期已经被限制住咯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-{%d1}这里 静态日期联合限制我们使员工#DV()函数,#DV是支持 %XX开头的动态日期限制的示例16-3-2前面的日期3天 不能大于 后面的日期第一个日期设置maxDate:#F{#D(ay,{d:-3})}第二个日期设置minDate:#F{#D(ay,{d:3})}日期差量用法:属性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)}效果当第二个没有选择时候选择第一个切换到最后的日期当选择第二个后满足要求了。那么拓展下多个动态的天限制比如多个DV函数#F{#D(ay,{M:-3,d:-2})||#DV(2020-4-3,{M:-3,d:-2})||#DV(%y-%M-{%d1}))}我的日期不支持自定义方法来限制用户的日期。我的日期格式必须是yyyy-MM-dd HH:mm:ss 这种双位的日期符号不支持yyyy-M-d H:m:s这种17 无效天的限制可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表 周日至周六)禁用周六 disabledDays:[6]禁用周六周日 disabledDays:[0,6]18 无效日期用法(正则匹配):示例18-1 禁用 每个月份的 5日 15日 25日disabledDates:[5$]注意 :5$ 表示以 5 结尾 注意 $ 的用法示例18-2 禁用 所有早于2000-01-01的日期disabledDates:[^19]^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]$]示例18-4 禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量19 有效日期opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用只启用 每个月份的 5日 15日 25日opposite:true,disabledDates:[5$]20 特殊天和特殊日期特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效关键属性:specialDays (0至6 分别代表 周日至周六) 用法同无效天specialDates用法同无效日期,但是对时分秒无效示例20-1 高亮每周 周一 周五specialDays:[1,5]示例20-1 高亮每周 周一 周五specialDates:[....-..-01,....-..-15]禁用有效的啥的可以结合%y,%M %d等动态日期进行处理。比如 %y-%M-%d {%H-1}:..:..dateFmt:yyyy-MM-dd HH:mm:ss,disabledDates:[%y-%M-%d {%H-1}:..:..,%y-%M-%d {%H1}:..:..]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:..:..]