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=======请不要转载谢谢了。=========

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


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

查看所有标签

猜你喜欢:

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

虚拟化与云计算

虚拟化与云计算

《虚拟化与云计算》小组 / 电子工业出版社 / 2009-10 / 45.00元

本书系统阐述了当今信息产业界最受关注的两项新技术——虚拟化与云计算。云计算的目标是将各种IT资源以服务的方式通过互联网交付给用户。计算资源、存储资源、软件开发、系统测试、系统维护和各种丰富的应用服务,都将像水和电一样方便地被使用,并可按量计费。虚拟化实现了IT资源的逻辑抽象和统一表示,在大规模数据中心管理和解决方案交付方面发挥着巨大的作用,是支撑云计算伟大构想的最重要的技术基石。本书以在数据中心采......一起来看看 《虚拟化与云计算》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换