角约会时间拾取器

角日期时间拾取器 - 角重用 UI 组件 此软件包支持角 9+

中断更改

• 自 9. 0. 0 起, 采集器已更新为 Angular 9+ apps
• 自8.0.0起,取取器被更新为Angular 8+应用.
• 自7.0.0起,取取器被更新为角7+应用.

说明

简单的角枣取时器. 在线医生 这里,在线演示(StackBlitz)是 这里。 。 。 . 这个拾取器是反应性的设计,所以可以随意在您的桌面,平板电脑和移动设备中尝试.

如何使用

1. 安装方式 无数字 :npm install ng-pick-datetime --save

2. 添加样式. 如果您正在使用 Angular CLI, 您可以在您的样式中添加此功能. css :

   @import "~ng-pick-datetime/assets/style/picker.min.css";
   

   或者如果你喜欢使用sass:

   @import "~ng-pick-datetime/assets/style/picker.scss";
   

   如果您没有使用角CLI,您可以通过 a 加入 picker.min.css <link> 元素在索引.html中.

3. 添加 猫头鹰时间模块 财务报告和审定财务报表 猫头鹰时间模块 给您的 @ NgMudule (英语) 类似下文的例子

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { MyTestApp } from './my-test-app';
   
    import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
   
    @NgModule({
        imports: [ 
            BrowserModule, 
            OwlDateTimeModule, 
            OwlNativeDateTimeModule,
        ],
        declarations: [ MyTestApp ],
        bootstrap:    [ MyTestApp ]
    })
    export class MyTestAppModule {}
   

4. 连接拾取器与输入和触发器.

   <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>
   

   以上例子相当基本。 拾取者还有更多特征, 你可以更多地了解这些 演示页面。 。 。 .

动画

这个采取器使用角动画来改善用户体验, 因此,您需要安装 @angular/animations 导入 BrowserAnimationsModule 您的应用程序.

npm install @angular/animations --save

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class YourAppModule { }

如果您喜欢禁用动画效果, 请使用 NoopAnimationsModule 换句话说.

选择日期执行

日期取出器的建造是日期执行不可知. 开发者需要确保为拾取者提供合适的棋子来配合所选择的实施. 有两个预先制作的模块,用户需要导入其中的一款或自己建一款(从 这里) (中文(简体) ).

• OwlNativeDateTimeModule - 支持本地 JavaScript 日期对象
• OwlMomentDateTimeModule - 支持运动Js

属性 owl-date-time

活动 owl-date-time

属性 input[owlDateTime]

活动 input[owlDateTime]

属性 [owlDateTimeTrigger]

属性 [owlDateTimeTrigger]

属性 owl-date-time-inline

本地化和日期时间格式

不同语言和格式的本地化由 OWL_DATE_TIME_LOCALE 财务报告和审定财务报表 OWL_DATE_TIME_FORMATS您可以从 这里。 。 。 .

依赖关系

无

演示

• 在线医生 这里
• 在线演示( StackBlitz) 是 这里

许可证

• 许可证:麻省理工学院

作者

丹尼尔·Y克·潘