AYUI内置的万能日期控件-web界的my97

栏目: ASP.NET · 发布时间: 6年前

内容简介:新建AYUI7项目建立完全后,我们来学怎么使用。打开HomeView,添加代码

新建AYUI7项目

AYUI内置的万能日期控件-web界的my97

建立完全后,我们来学怎么使用。打开HomeView,添加代码

<Grid x:Name="root" Background="White">

</Grid>

控件外观的颜色,根据背景的主题来的,如果是图片,自动分析图片,自动配色。

1 平面演示

AYUI内置的万能日期控件-web界的my97

<control:AyCalendar HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    SelectMode="DateTime"></control:AyCalendar>
SelectMode有以下的值
        None,
        YearMonth,
        OnlySelectDate,
        DateTimeH,
        DateTimeNoSecond,
        DateTime,
        HM,
        HMS

外观演示: None是无效值,无需选择

DateTimeH 显示年月日 时

AYUI内置的万能日期控件-web界的my97

DateTimeNoSecond 年月日时分

AYUI内置的万能日期控件-web界的my97

HM 时分

AYUI内置的万能日期控件-web界的my97

HMS 时分秒

AYUI内置的万能日期控件-web界的my97

YearMonth 年月

AYUI内置的万能日期控件-web界的my97

OnlySelectDate 年月日

AYUI内置的万能日期控件-web界的my97

加上上面演示的 DateTime,年月日时分秒模式,一共7种

单独的年月日时分秒控件是(以下控件没有级联控制,自己解决,它们也是AyCalendar的基础组成部分)

年:AyDateBoxYear

月:AyDateBoxMonth

日:AyDateBoxDay

时:AyDateBoxHour

分:AyDateBoxMinute

秒:AyDateBoxSecond

下面的一些按钮可以控制是否显示

IsShowClear 控制是否 显示 清空按钮

IsShowToday 控制是否 显示今天按钮

ExtButtonsVisibility 是否显示 整个按钮组( 清空 今天 确定)

接下来,讲下基本的 AyDateBoxCalendar ,基于AyCalendar的日期选择控件

2 基本模式 AyDateBoxCalendar

<control:AyDateBoxCalendar  HorizontalAlignment="Center"

Width="190"  Height="32"

VerticalAlignment="Center"></control:AyDateBoxCalendar>

AYUI内置的万能日期控件-web界的my97

拉伸模式,自适应外围

<Grid Height="38">

<control:AyDateBoxCalendar  HorizontalAlignment="Stretch"

Width="auto"

Height="auto"

VerticalAlignment="Stretch"></control:AyDateBoxCalendar>

</Grid>

AYUI内置的万能日期控件-web界的my97

默认选择模式是 年月日模式,选择一次日,就会自动关闭了,年月日时分秒模式是双击日,或者单击确定按钮,到了AyDateBoxCalendar模式,所有的控制,全在DateRule这个属性控制了,

这个表达式,是我实现的,格式json,键值设置。 我称作 AY日期表达式

下面学习这个表达式,我的控件暂时,不支持图标触发,打开AyCalendar供用户选择

3 起始日期

默认的起始日期为 1991-04-04 (我生日)

当日期框为空值时,将使用 1991-04-04 做为起始日期

<control:AyDateBoxCalendar  HorizontalAlignment="Center"

Width="200" DateRule="startDate:'1991-04-04'"

Height="32"

VerticalAlignment="Center"></control:AyDateBoxCalendar>

AYUI内置的万能日期控件-web界的my97

4 alwaysUseStartDate属性应用

默认的起始日期为 1991-04-04

当日期框无论是何值,始终使用 1991-04-04 做为起始日期

从下面开始,只列出表达式的写法的代码了

startDate:'1991-04-04',alwaysUseStartDate:true

AYUI内置的万能日期控件-web界的my97 AYUI内置的万能日期控件-web界的my97

5. 下拉,输入,导航选择日期

  1. 通过导航图标选择

AYUI内置的万能日期控件-web界的my97

2. 直接使用键盘输入数字

AYUI内置的万能日期控件-web界的my97

3.直接从弹出的下拉框中选择,支持鼠标滚轮

AYUI内置的万能日期控件-web界的my97

6 支持周显示

isShowWeek:true

AYUI内置的万能日期控件-web界的my97

利用onpicked事件把周赋值给另外的文本框

OnPicked

这里我用后台xaml.cs事件获得的,你也可以用AYUI的MVC模式,Action.Event="OnPicked" IsSendEventArgs=true即可

获得时间:AyDatePickEventArgs e参数,会传给你

e.PickedDateTime.HasValue

关于周的显示,你可以绑定,日期选择控件的Week依赖属性即可,Text="{Binding ElementName=dbc,Path=Week}",dbc是一个AyDateBoxCalendar的控件

AYUI内置的万能日期控件-web界的my97

7 只读开关,高亮周末功能

设置readOnly属性 true 或 false 可指定日期框是否只读

设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末

高亮颜色暂时没提供对外的暴露,固定的红色

readOnly:true,highLineWeekDay:true

AYUI内置的万能日期控件-web界的my97

8 操作按钮自定义

清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true

最好把readOnly置为true,否则即使隐藏了清空按钮,用户依然可以在输入框里把值delete掉

isShowClear:false,readOnly:true

AYUI内置的万能日期控件-web界的my97

9 自动选择显示位置

当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了.

使用positon属性指定,弹出日期的坐标为{left:100,top:50}

position:{left:100,top:50}

AYUI内置的万能日期控件-web界的my97

10 自定义星期的第一天

各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.

相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类推

以星期一作为第一天

firstDayOfWeek:1

AYUI内置的万能日期控件-web界的my97

星期三为第一天

AYUI内置的万能日期控件-web界的my97

11 使用内置参数

除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月)

下例演示,年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间

startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true

AYUI内置的万能日期控件-web界的my97 无论怎么打开都是 AYUI内置的万能日期控件-web界的my97

12 自定义格式

yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式.

在我的日期控件里,支持下面的,当然还支持其他的,后面再讲

%y当前年

%M当前月

%d当前日

%ld本月最后一天

%H当前时

%m当前分

%s当前秒

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

我的日期控件会根据 dawteFmt来自动切换 界面供用户选择,当然基于AyCalendar的SelectMode

年月日时分秒

dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'

AYUI内置的万能日期控件-web界的my97

dateFmt:'yyyy-MM-dd HH:mm:ss'

AYUI内置的万能日期控件-web界的my97

时分秒

dateFmt:'H:mm:ss'

AYUI内置的万能日期控件-web界的my97

快速选择会根据文本框的日期,自动生成5个推荐的,如果没有,就是系统当前的时分秒,然后推荐

AYUI内置的万能日期控件-web界的my97

年月

dateFmt:'yyyy年MM月'

AYUI内置的万能日期控件-web界的my97

取得系统可识别的日期值,如果用户填写的日期不符合DateFmt就会有提示,这里建议时间是只读的,是有好处的。

AYUI内置的万能日期控件-web界的my97

星期, 月 日, 年

dateFmt:'dddd, MMMM d, yyyy'   具体参考C#的StringFormat的日期时候的 东东

AYUI内置的万能日期控件-web界的my97

13 双月功能

支持年月日,年月日时分秒两种,

doubleCalendar:true,dateFmt:'yyyy-MM-dd'

AYUI内置的万能日期控件-web界的my97

doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm:ss'

AYUI内置的万能日期控件-web界的my97

当然可以配合周是否显示等其他的基本限制

AYUI内置的万能日期控件-web界的my97

14 不合法日期

日期超过最大最小日期限制, 日期格式不正确, 日期是禁用的然后手动输入的,日期闰月平月的日期等,都会弹出不合法日期的提示框

15 图标和清除事件

设置 Icon="{x:Null}",换其他的图标 Icon="path_clock"  显示图标的控件是AyIconAll控件,所有图标都能显示,png,jpg,gif,path,font,fontawesome等

AYUI内置的万能日期控件-web界的my97

OnCleared是单击了清空 按钮触发的

16 多国语言和皮肤

暂时只支持 中文,暂时除了跟随主题换色,暂时没其他的主题,支持暂时固定死的,然后基于AyFormInput写的,所以 AyDateBoxCalendar支持AY表达式。

关于动态时间的选择限制,下篇文章继续讲

这里才演示了AyDateBoxCalendar的30%的功能点

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Hit Refresh

Hit Refresh

Satya Nadella、Greg Shaw / HarperBusiness / 2017-9-26 / USD 20.37

Hit Refresh is about individual change, about the transformation happening inside of Microsoft and the technology that will soon impact all of our lives—the arrival of the most exciting and disruptive......一起来看看 《Hit Refresh》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具