: 日期: : 小时1: 角日期/时间拾取器
此软件包的当前版本支持 Angular 22
如果您需要其它角版本的支持, 请参见 中断更改 见下文.
中断更改
- 22.x.x版本为Angular 22的正式发布,也支持Angular 21.
- 21.x.x版本是Angular 21的正式发布,它也支持Angular 20.
- 20.x.x版本是Angular 20的正式发布,它也支持Angular 19.
- 版本19.x.x >=已不支持ng 18. 如果您需要ng 18支持,请坚持18.x.x版本.
- 版本18.x.x 已不支持ng 17. 如果您需要ng 17支持,请坚持17.x.x版本.
- 版本17.x.x->=已不支持ng 16-13. 如果需要ng 16-13支持,请坚持16.x.x版本.
- 14.x.x >=已不支持 < ng 13. 如果您需要 View 引擎支持,请坚持13.x.x版本.
- 13.1.0+版本不再支持
MomentJs时间适配器。 如果您想要使用 MomentJs 适配器, 请查看 GitHub 图像 或者说 无。 。 。 . - 需要ng 8支持时,请坚持: https://github.com/DanielYKPan/date-time-cicker 互联网档案馆的存檔,存档日期2013-12-21
说明
简单的角枣取时器. 在线医生 这里,在线演示(StackBlitz)是 这里 财务报告和审定财务报表 这里。 。 。 . 这个拾取器是反应性的设计,所以可以随意在您的桌面,平板电脑和移动设备中尝试.
如何使用
-
安装方式 无数字 :
npm install @danielmoncada/angular-datetime-picker --save -
安装
@angular/cdk,它是一个对等依赖,并提供采取者使用的覆盖:npm install @angular/cdk --save。 。 。 . 如果您的应用程序已经使用 角质材料,为您安装了 CDK,这个步骤(和下面的上覆样式)已经覆盖了. -
添加样式. 拾取器将它的弹出/对话框放入一个CDK上方,所以你既需要拾取器样式,也需要CDK预建的上方样式. 如果你是的话 没有 使用角材料, 加入一次
styles.scss数字 :@use '@angular/cdk/overlay-prebuilt.css'; @use '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';或通过
styles阵列angular.json数字 :"styles": [ "node_modules/@angular/cdk/overlay-prebuilt.css", "node_modules/@danielmoncada/angular-datetime-picker/assets/style/picker.min.css", "src/styles.scss" ](如果您已经导入 Angular 材料的主题, 则包含 CDK 覆盖样式, 您只需要取取取样式 。)
-
添加 猫头鹰时间模块 财务报告和审定财务报表 猫头鹰时间模块 给您的 @ NgMudule (英语) 类似下文的例子
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyTestApp } from './my-test-app'; import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker'; @NgModule({ imports: [BrowserModule, OwlDateTimeModule, OwlNativeDateTimeModule], declarations: [MyTestApp], bootstrap: [MyTestApp], }) export class MyTestAppModule {} -
连接拾取器与输入和触发器.
<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time" /> <owl-date-time #dt1></owl-date-time><input [owlDateTime]="dt2" placeholder="Date Time" /> <span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span> <owl-date-time #dt2></owl-date-time>以上例子相当基本。 拾取者还有更多特征, 你可以更多地了解这些 演示页面。 。 。 .
选择日期执行
日期取出器的建造是日期执行不可知. 开发者需要确保为拾取者提供合适的棋子来配合所选择的实施. 有两个预先制作的模块,用户需要导入其中的一款或自己建一款(从 这里) (中文(简体) ).
OwlNativeDateTimeModule- 支持本地 JavaScript 日期对象OwlUnixTimestampDateTimeModule- 支持自Epoch起的毫秒(数目)
日期/时间适应器扩展
属性 owl-date-time
| 名称 | 类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
pickerType | both, (中文(简体) ), calendar, (中文(简体) ), timer | 可选 | both | 设定日期时间拾取器的类型 . both: 显示日历和计时器, calendar: 只显示日历, timer:只有显示计时器. |
pickerMode | popup, (中文(简体) ), dialog | 可选 | popup | 选手的风格会打开. |
startView | month, (中文(简体) ), year, (中文(简体) ), multi-year | 可选 | month | 关于日历应该开始的观点. |
yearOnly | 布尔 | 可选 | false | 限定日历仅显示月份选择的年份和多年期视图. |
showCalendarWeeks | 布尔 | 可选 | false | 是否在日历中显示日历周 . |
multiyearOnly | 布尔 | 可选 | false | 限制日历只显示选择年份的多年视图. |
startAt | 吨/吨 | 可选 | null | 打开拾取器开始的时刻. |
endAt | 吨/吨 | 可选 | null | 区域日历结束时间的默认选择时间 |
firstDayOfWeek | 编号 | 可选 | 0 | 设出礼拜一日. 有效值从0到6. 0:星期日至6:星期六 |
showSecondsTimer | 布尔 | 可选 | false | 当指定为真时, 它会显示一个定时器来配置第二个值 |
hideOtherMonths | 布尔 | 可选 | false | 是否在本月份开始或结束时隐藏其他月份的日期 |
hour12Timer | 布尔 | 可选 | false | 当指定为真时, 计时器将以小时12 格式模式 |
stepHour | 编号 | 可选 | 1 | 每一步换个小时. |
stepMinute | 编号 | 可选 | 1 | 每一步变化一分钟. |
stepSecond | 编号 | 可选 | 1 | 每步变化秒. |
scrollStrategy | 滚动战略 | 可选 | BlockScrollStrategy | 打开拾取器时定义滚动策略 。 学这些 https://material.angular.io/cdk/overlay/overview#scroll-战略。 。 。 . |
disabled | 布尔 | 可选 | false | 当指定为真时, 它会禁用拾取器 . |
backdropClass | 字符串/字符串 [] | 可选 | null | 采取背景的自定义类 . |
panelClass | 字符串/字符串 [] | 可选 | null | 采取器上覆面板的自定义类 . |
活动 owl-date-time
| 活动 | 参数 | 说明 |
|---|---|---|
beforePickerOpen | 无效 | 在拾取器打开前召回引用 |
afterPickerOpen | 无效 | 打开拾取器时召回引用 |
afterPickerClosed | 无效 | 采取者闭口后召回引出. |
yearSelected | T级 | 选择年份时召回引用 。 这并不意味着选定日期有所改变. |
monthSelected | T级 | 选定月份时调用以引用 。 这并不意味着选定日期有所改变. |
dateClicked | T级 | 当选定数据发生变化时调用 . |
selectedChanged | T级 | 当当前选中的数据改变时调用 . |
userSelection | 无效 | 选择任何日期时召回 . |
属性 input[owlDateTime]
| 名称 | 类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
owlDateTime | OwlDateTimeComponent<T> | 需求 | null | 此输入相关的日期时间选择器 . |
owlDateTimeFilter | ( date: T)=>boolean | 可选 | null | 过滤日期时间的函数 . |
disabled | 布尔 | 可选 | false | 当指定为真时, 它会禁用拾取器的输入 . |
min | <T> | 可选 | null | 最小有效日期时间 . |
max | <T> | 可选 | null | 最长有效日期时间 . |
selectMode | single, (中文(简体) ), range, (中文(简体) ), rangeFrom, (中文(简体) ), rangeTo | 可选 | single | 指定拾取器的选择模式. single: 允许的单一值, range:允许用户选择日期时间范围, rangeFrom:输入只显示出"从"值,取出者只能选择出"从"值, rangeTo:输入只显示"to"值,取出者只能选择"to"值. |
rangeSeparator | 字符串 | 可选 | - | 将输入值中的“ 从” 和“ 到” 区分开来字符 . |
活动 input[owlDateTime]
| 活动 | 参数 | 说明 |
|---|---|---|
dateTimeChange | 资料来源:猫头鹰时间输入,值:输入值,输入:输入元素 | 召回时引用 change 事件为此开火 <input [owlDateTime]> |
dateTimeInput | 资料来源:猫头鹰时间输入,值:输入值,输入:输入元素 | 当一个 input 事件为此开火 <input [owlDateTime]>。 。 。 . |
属性 [owlDateTimeTrigger]
| 名称 | 类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
owlDateTimeTrigger | OwlDateTimeComponent<T> | 需求 | null | 此触发器相关的日期时间选择器 . |
disabled | 布尔 | 可选 | false | 当指定为真时, 它会禁用触发器 . |
属性 [owlDateTimeTrigger]
| 名称 | 类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
owlDateTimeTrigger | OwlDateTimeComponent<T> | 需求 | null | 此触发器相关的日期时间选择器 . |
disabled | 布尔 | 可选 | false | 当指定为真时, 它会禁用触发器 . |
属性 owl-date-time-inline
| 名称 | 类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
pickerType | both, (中文(简体) ), calendar, (中文(简体) ), timer | 可选 | both | 设定日期时间拾取器的类型 . both: 显示日历和计时器, calendar: 只显示日历, timer:只有显示计时器. |
startView | month, (中文(简体) ), year, (中文(简体) ), multi-year | 可选 | month | 关于日历应该开始的观点. |
startAt | 吨/吨 | 可选 | null | 打开拾取器开始的时刻. |
endAt | 吨/吨 | 可选 | null | 区域日历结束时间的默认选择时间 |
firstDayOfWeek | 编号 | 可选 | 0 | 设出礼拜一日. 有效值从0到6. 0:星期日至6:星期六 |
showSecondsTimer | 布尔 | 可选 | false | 当指定为真时, 它会显示一个定时器来配置第二个值 |
hideOtherMonths | 布尔 | 可选 | false | 是否在本月份开始或结束时隐藏其他月份的日期 |
hour12Timer | 布尔 | 可选 | false | 当指定为真时, 计时器将以小时12 格式模式 |
stepHour | 编号 | 可选 | 1 | 每一步换个小时. |
stepMinute | 编号 | 可选 | 1 | 每一步变化一分钟. |
stepSecond | 编号 | 可选 | 1 | 每步变化秒. |
disabled | 布尔 | 可选 | false | 当指定为真时, 它会禁用拾取器 . |
owlDateTimeFilter | ( date: T)=>boolean | 可选 | null | 过滤日期时间的函数 . |
min | <T> | 可选 | null | 最小有效日期时间 . |
max | <T> | 可选 | null | 最长有效日期时间 . |
selectMode | single, (中文(简体) ), range, (中文(简体) ), rangeFrom, (中文(简体) ), rangeTo | 可选 | single | 指定拾取器的选择模式. single: 允许的单一值, range:允许用户选择日期时间范围, rangeFrom:输入只显示出"从"值,取出者只能选择出"从"值, rangeTo:输入只显示"to"值,取出者只能选择"to"值. |
本地化和日期时间格式
不同语言和格式的本地化由 OWL_DATE_TIME_LOCALE 财务报告和审定财务报表 OWL_DATE_TIME_FORMATS您可以从 这里。 。 。 .
依赖关系
@angular/cdk——提供取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 记住要包括 CDK 覆盖样式(@use '@angular/cdk/overlay-prebuilt.css';除非您已经使用角材料。 见 如何使用。 。 。 .
演示
许可证
- 许可证:麻省理工学院
作者
由丹尼尔·蒙卡达(Daniel Moncada)维护和更新, 由丹尼尔·潘(Daniel Pan)原创执行