如何轻松地从用户角度选择日期和时间？

Question

如何选择用户输入的日期和时间？我需要使用Angular将其保存在firestore时间戳属性中。请给我一种方法。

Answer 1

../../ node_modules / ng-pick-datetime / date-time / date-time-picker.component.d.ts：2：62中的错误-错误TS2307：找不到模块'@ angular / cdk /覆盖'。

2从“ @ angular / cdk / overlay”导入{BlockScrollStrategy，Overlay，ScrollStrategy};~~~~~~~~~~~~~~~~~~~~~~../../node_modules/ng-pick-datetime/dialog/dialog-config.class.d.ts:2:32-错误TS2307：找不到模块'@ angular / cdk / overlay'。

2 import'ScrollStrategy} from'@ angular / cdk / overlay';~~~~~~~~~~~~~~~~~~~~~~../../node_modules/ng-pick-datetime/dialog/dialog-container.component.d.ts:3:34-错误TS2307：找不到模块'@ angular / cdk / a11y'。

3从“ @ angular / cdk / a11y”导入{FocusTrapFactory};~~~~~~~~~~~~~~~~~~~../../node_modules/ng-pick-datetime/dialog/dialog-container.component.d.ts:4:84-错误TS2307：找不到模块'@ angular / cdk / portal'。

4 import {BasePortalOutlet，CdkPortalOutlet，ComponentPortal，TemplatePortal}，来自“ @ angular / cdk / portal”；~~~~~~~~~~~~~~~~~~~~~../../node_modules/ng-pick-datetime/dialog/dialog-ref.class.d.ts:2:28-错误TS2307：找不到模块'@ angular / cdk / overlay'。

2从'@ angular / cdk / overlay'导入{OverlayRef};~~~~~~~~~~~~~~~~~~~~~~../../node_modules/ng-pick-datetime/dialog/dialog.service.d.ts:6:59-错误TS2307：找不到模块'@ angular / cdk / overlay'。

6 import {Overlay，OverlayContainer，ScrollStrategy} from'@ angular / cdk / overlay';~~~~~~~~~~~~~~~~~~~~~~../../node_modules/ng-pick-datetime/dialog/dialog.service.d.ts:7:31-错误TS2307：找不到模块'@ angular / cdk / portal'。

7从“ @ angular / cdk / portal”导入{ComponentType};~~~~~~~~~~~~~~~~~~~~]

** Angular Live Development Server正在localhost：4200上侦听，请在http://localhost:4200/上打开浏览器**我｢wdm｣：编译失败。

Answer 2

您可以使用npm的Angular Date Time Picker包从输入中获取日期和时间。

示例代码1）module.ts

import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
@NgModule({
    declarations: [],
    imports: [
        OwlDateTimeModule,
        OwlNativeDateTimeModule
    ],
})

2）component.html

<input type="text" placeholder="MM/DD/YYYY" [owlDateTime]="dt1"
    formControlName="installDate" id="installDate" autocomplete="off"
    (ngModelChange)="onInstallDateChange()" class="form-control" 
    [max]="currentDate" />
<owl-date-time #dt1 pickerType="calendar"></owl-date-time>