angular - ng-pick-datetime datumväljare format

Jag använder Angular och i det används ng-pick-datetime npm. När jag försöker ändra formatet efter att ha valt datum (dd/MM/yyyy) får jag bara (MM/dd/yyyy). Jag vet inte hur man gör.

Skärmdump för mer förtydligande om min fråga:

HTML

<input
    [owlDateTime]="dt1"
    [owlDateTimeTrigger]="dt1"
    placeholder="Wedding Anniversary"
    formControlName="wedding"
    class="form-control"
    onkeydown="return false"
    id="text-input"
    name="wedding"
    max="{{ maxDate | date: 'yyyy-MM-dd' }}"
  />
  <owl-date-time #dt1 [pickerType]="'calendar'"></owl-date-time>

Jag behöver resultatet så här (dd/MM/yyyy). Tack på förhand...

Svar #1

Injicera ett objekt i din komponent med det datumformat du behöver.

Mer info: https://daniel-projects.firebaseapp.com/owlng/date-time-picker#implementation-format

import { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
  parseInput: 'DD/MM/YYYY',
  fullPickerInput: 'DD/MM/YYYY hh:mm a',
  datePickerInput: 'DD/MM/YYYY',
  timePickerInput: 'hh:mm a',
  monthYearLabel: 'MMM-YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM-YYYY'
};

@Component({
  selector: 'time-series',
  templateUrl: './time-series.component.html',
  styleUrls: ['./time-series.component.scss'],
  providers: [
    { provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }
  ]
})
@Injectable()
export class TimeSeriesComponent {
   ....
}

Svar #2

Använd väljare med MomentJS Här är ett exempel på hur man använder OwlMomentDateTimeModule med olika datum- och tidsformat: (Observera att OwlMomentDateTimeModule kräver MomentJS)

npm Install:

npm install ng-pick-datetime-moment moment --save;

Kod :

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_MOMENT_FORMATS = {
    parseInput: 'l LT',
    fullPickerInput: 'l LT',
    datePickerInput: 'l',
    timePickerInput: 'LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
};

@NgModule({
    imports: [OwlDateTimeModule, OwlMomentDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS},
    ],
})
export class AppExampleModule {
}