Question

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

在我使用过的Angular 6项目中，

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 项目中最强大的datetimepicker。

1-如果数据库中的日期字段设置为DateTime，而我们想在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-如果DB中的Date字段被设置为DateTime，而我们只想在UI中显示Date而没有时间

将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更改前端中date属性的格式，然后选择所描述的选项之一。

修改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，尝试不显示时间，仅显示日期并在选择日期后关闭

1 个答案: