ng-pick-datetime версия 7 в проекте Angular 6, попытайтесь не показывать время, просто покажите дату и закройте ее после выбора даты - PullRequest
Новая
       24

ng-pick-datetime версия 7 в проекте Angular 6, попытайтесь не показывать время, просто покажите дату и закройте ее после выбора даты

1 голос
/ 06 марта 2019

Используя ng-pick-datetime версия 7 в проекте Angular 6 , старайтесь не показывать время, просто показывать дату и закрываться после выбора даты

В проекте 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>

1 Ответ

1 голос
/ 12 марта 2019

Я нашел эти решения, поэтому я думаю, ng-pick-datetime версия 7 является наиболее сильным средством выбора даты-времени для Angular 5/6/7 проектов.

1-Если поле Дата расположено в БД как DateTime, и мы хотим показать дату и время в пользовательском интерфейсе

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 - Если поле Дата расположено в БД как DateTime, и мы просто хотим, чтобы Дата и время не отображались в пользовательском интерфейсе

Изменить файл 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

Итак, сначала мы изменим свойство формата даты во Front-End с помощью moment.js, затем выберем один из описанных вариантов.

Изменить, component.ts 

import * as moment from 'moment';

birthDate:string;

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

Затем выберите один из приведенных выше вариантов, чтобы показать время или не показывать время, изменив модуль и HTML

Надеюсь, этот ответ поможет людям, которым нужно работать с помощью datetimepicker в проектах Angular.

...