门户开发-组件介绍-日期选择-门户管理-O2OA企业应用开发平台-人人都是协同系统开发专家

门户开发-组件介绍-日期选择

时间：2023-03-20

内容导读

本篇介绍 O2OA 门户设计器中的日期选择组件。该组件用于在页面中选取日期，可选择日期、时间、年度或月份等形式，并可按格式化规则控制显示效果。文中说明选择类型、是否精确到秒、格式化与校验等属性，以及载入前后、选择完成与清空等系统事件，并列出显示、隐藏、绑定事件、获取原生节点与读写数据等方法，便于在页面中快速实现日期录入。

O2OA 平台具备门户页面定制与集成的能力，通过门户定制可根据企业文化与业务需要，设计符合企业需要的统一信息门户和系统首页等 UI 界面。本篇介绍页面设计器元素组件中的日期选择组件。

一、先决条件

1、O2Server 服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署 O2OA》

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录 O2OA 平台，如：xadmin

3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》

二、日期选择组件

日期选择组件用于选取日期。

三、日期选择属性

日期选择特有的基本属性如下：

属性	描述	备注
选择类型	选择日期、时间、年度、月份等
是否选择秒	当允许选择时间时，是否到秒级	默认情况下只选择到分
格式化	对日期格式进行格式化规则
校验	此字段在页面中无效	在表单中用于提交时的数据校验

日期格式化规则：

a-短日（“星期一”，“星期二”）
A-全天（“星期一”）
b-短个月（“ Jan”，“ Feb”）
B-整月（“一月”）
c-字符串的完整日期（“ Mon Dec 10 14:35:42 2007”；％a％b％d％H：％m：％S％Y）
d-日期为两位数（01、05等）
e-日期为一位数字（1、5、12等）
H-军事时间的小时到两位数字（24小时模式）（00、11、14等）
I-使用12小时制的小时（十进制数字）（范围从01到12）。
j-一年中的三位数（001到366，是1月1日）
k-小时（24小时制），为数字（范围为0到23）。单个数字前面有一个空格。
l-小时（12小时制），为数字（范围为1到12）。单个数字前面有一个空格。
L-以毫秒为单位的时间（三位数；“ 081”）
m-表示两位数的数字月份（01是1月，12是12月）
M-分钟到两位数（01、40、59）
o-以当前语言表示的一天中的一天的序数（“ st”代表第一天，“ nd”代表第二天，依此类推）
p-当前等效于AM或PM的语言
s-Unix纪元时间戳
S-秒到两位数字（01、40、59）
T-时间为％H：％M：％S
U-两位数的星期（01是1月1日的星期，52是12月31日的星期）
w-星期中的数字天，一位数字（0是星期日，1是星期一）
x-当前语言首选格式的日期。英文：％m /％d /％Y（12/10/2007）
X-当前语言首选格式的时间。zh-CN：％I：％M％p（02:45 PM）
y-短年份（两位数字；“ 07”）
Y-全年（四位数；“ 2007”）
z-GMT偏移量（“ -0800”）
Z-时区（“ GMT”）
％-返回％（例如：％y %% = 07％）
db - "%Y-%m-%d %H:%M:%S",
compact - "%Y%m%dT%H%M%S",
iso8601 - "%Y-%m-%dT%H:%M:%S%z",
rfc822 - "%a, %d %b %Y %H:%M:%S %Z",
rfc2822 - "%a, %d %b %Y %H:%M:%S %z",
short - "%d %b %H:%M",
long - "%B %d, %Y %H:%M"

区段属性在页面中无效，只在表单中生效。

四、日期选择事件

除了 DOM 事件之外，日期选择的系统事件如下：

事件名	描述
queryLoad	元素被载入之前执行
load postLoad	元素被载入之后执行
complete	当一次选择完成时执行
clear	当日期被清空时执行

五、日期选择方法

日期选择对象可以通过以下脚本获取：

var el = this.page.get(name); //name为日期选择的标识

获取的对象有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom= el.node	获取 html 原生 Dom 对象
setData	el.setData(str)	设置日期选择的值
getData	var value = el.getData()	获取日期选择的值

以上是门户设计器中日期选择组件的简要说明，如需了解门户页面开发的更多内容，请参考以下文章：

《门户开发-门户设计开发入口和权限说明》