Angular6 ng在Angular 6项目中选择datetime版本7，尝试不显示时间，只显示日期并在选择日期后关闭

在Angular 6项目中使用ng pick datetime version 7，尝试不显示时间，只显示日期，并在选择日期后关闭

在我使用的Angular 6项目中

package.json：

"ng-pick-datetime": "^7.0.0",
"ng-pick-datetime-moment": "^1.0.8",

组件模块：

import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

export const MY_MOMENT_FORMATS = {
  parseInput: 'llll LT',
  fullPickerInput: 'llll',
  datePickerInput: 'llll',
  timePickerInput: 'LT',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LLLL',
  monthYearA11yLabel: 'MMMM YYYY',
};

providers: [
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
  ]

Component.html：

<div class="form-group">
<label class="form-control-label">Check Due Date</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="icon ion-calendar tx-16 lh-0 op-6"></i>
</div>
</div>

      <input class="form-control owlDateTime" [owlDateTime]="dt3" 
      [owlDateTimeTrigger]="dt3" placeholder="MM/DD/YYYY HH:MM" 
      name="dueDate" [(ngModel)]="selectedCheck.dueDate" id="dueDate">

      <owl-date-time #dt3></owl-date-time>

</div>
</div>

支票到期日

我找到了这些解决方案，因此我认为ng pick datetime版本7是Angular 5/6/7项目中最强大的日期时间选择器

1-如果日期字段在DB中显示为DateTime，并且我们希望在UI中显示日期和时间

Package.json

"moment": "^2.23.0",
"ng-pick-datetime": "^7.0.0",
"ng-pick-datetime-moment": "^1.0.8"

组件.module.ts

import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

export const MY_MOMENT_FORMATS = {
  parseInput: 'llll LT',
   fullPickerInput: 'llll',
   datePickerInput: 'llll',
  timePickerInput: 'LT',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LLLL',
  monthYearA11yLabel: 'MMMM YYYY',
};
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    OwlMomentDateTimeModule,
    FormsModule,
    SharedModule,
    MedSetupPackageModule,
    NursingUnitModule,
    BedModule,
    ResidentModule,
    AllergyModule,
    DiagnoseModule,
    ResidentxdiagnoseModule,
    ResidentxallergyModule],

  providers: [
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
  ]
})

重要！ 当您设置此配置并将其定义为OWL_DATE_TIME_格式的提供程序时，它会影响项目中使用OwlDateTimeModule的所有其他模块

组件技术

Get the data that includes the dateTime field via an angular service

component.html

<div class="col-lg-4">
              <div class="form-group">
                <label class="form-control-label">Go Live Date <span class="tx-danger">*</span></label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text">
                      <i class="icon ion-calendar tx-16 lh-0 op-6"></i>
                    </div>
                  </div>
                  <input class="form-control owlDateTime" [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="MM/DD/YYYY HH:MM" name="goLiveDate" [(ngModel)]="selectedProject.goLiveDate" id="goLiveDate">
                  <owl-date-time #dt2></owl-date-time>
                </div>
              </div>
            </div>

将component.html修改为

    <div class="col-lg-4">
      <div class="form-group">
        <label class="form-control-label">Invoice Due Date</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <i class="icon ion-calendar tx-16 lh-0 op-6"></i>
            </div>
          </div>
          <input class="form-control owlDateTime" [owlDateTime]="dt3" [owlDateTimeTrigger]="dt3" placeholder="MM/DD/YYYY HH:MM" name="invoiceDueDate" [(ngModel)]="selectedProject.invoiceDueDate" id="invoiceDueDate">
          <owl-date-time [pickerType]="'calendar'"  #dt3></owl-date-time>
        </div>
      </div>
    </div>

然后选择上述选项之一，通过修改模块和html显示时间或不显示时间

希望这个答案能帮助那些需要在角度项目中使用日期时间选择器的人

    <div class="col-lg-4">
      <div class="form-group">
        <label class="form-control-label">Invoice Due Date</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <i class="icon ion-calendar tx-16 lh-0 op-6"></i>
            </div>
          </div>
          <input class="form-control owlDateTime" [owlDateTime]="dt3" [owlDateTimeTrigger]="dt3" placeholder="MM/DD/YYYY HH:MM" name="invoiceDueDate" [(ngModel)]="selectedProject.invoiceDueDate" id="invoiceDueDate">
          <owl-date-time [pickerType]="'calendar'"  #dt3></owl-date-time>
        </div>
      </div>
    </div>

import * as moment from 'moment';

birthDate:string;

this.birthDate = moment(Object.birthDate).format("YYYY-MM-DDTHH:mm:ss");