Angular 6 项目中的 ng-pick-datetime 版本 7，尽量不显示时间，只显示日期并在选择日期后关闭

Question

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

我用过的Angular6个项目中，

package.json:

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

Component.module :

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>

Answer 1

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

1-如果日期字段在数据库中存储为日期时间，我们希望在 UI

中显示日期和时间

Package.json

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

component.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_FORMATS 的提供者时，它会影响项目中使用 OwlDateTimeModule

的所有其他模块

component.ts

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>

2-如果日期字段在数据库中存储为日期时间，而我们只想在 UI

中显示日期而不显示时间

修改component.module为

export const MY_MOMENT_FORMATS = {
  parseInput: 'LL',
  fullPickerInput: 'LL',
  datePickerInput: 'LL',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY',
};

修改，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>

3- 如果日期字段在数据库中存储为 nvarchar

因此，首先我们使用 moment.js 在前端更改日期属性的格式，然后选择描述的选项之一。

修改，component.ts

import * as moment from 'moment';

birthDate:string;

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

然后通过修改模块和html

选择以上选项之一显示时间或不显示时间

希望这个答案对需要通过日期时间选择器在 Angular 项目上工作的人有所帮助。

Angular 6 项目中的 ng-pick-datetime 版本 7，尽量不显示时间，只显示日期并在选择日期后关闭

ng-pick-datetime version 7 in Angular 6 project, try to not show Time, just show date and close once date is selected

datetimepicker

angular6