求助：使用owl-date-time-inline设置日期格式后返回对象无变化

First off, let's clear up a common point of confusion here: the locale and format settings you configure for the owl-date-time-inline component only affect how the date/time is displayed in the UI, not the structure or output of the native JavaScript Date object you're binding to.

A Date object in JS doesn't have a "custom format" built into it — its default toString() or similar methods will always use the browser's default locale and format. So when you select a new date/time, the date_to_publish value is still a standard Date object; the component's format settings don't alter that underlying object at all.

Here's how to resolve your needs: #

1. Ensure your component's display format is correctly configured

First, double-check that your locale and format providers are set up properly in your Angular module or component. For example:

// In your module file (e.g., app.module.ts)
import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { NativeDateTimeAdapter } from 'ng-pick-datetime/date-time/adapter/native-date-time-adapter';

// Define your custom English locale format
export const MY_EN_FORMATS = {
  parseInput: 'MM/DD/YYYY HH:mm',
  fullPickerInput: 'MM/DD/YYYY HH:mm',
  datePickerInput: 'MM/DD/YYYY',
  timePickerInput: 'HH:mm',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY',
};

@NgModule({
  imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
  providers: [
    { provide: DateTimeAdapter, useClass: NativeDateTimeAdapter },
    { provide: OWL_DATE_TIME_LOCALE, useValue: 'en' },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_EN_FORMATS }
  ]
})
export class YourModule { }

This will make sure the component shows the date/time in your desired format directly in the UI.

2. Convert the Date object to your desired string format

If you need a formatted string (for example, to send to an API or display elsewhere in your app), you'll need to manually convert the Date object using the DateTimeAdapter provided by the library, or a date utility library like date-fns.

Using the owl-date-time adapter:

// In your component file
import { Component } from '@angular/core';
import { DateTimeAdapter } from 'ng-pick-datetime';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  date_to_publish: Date = new Date();

  constructor(private dateTimeAdapter: DateTimeAdapter<any>) {}

  // Method to get the formatted date string
  getFormattedPublishDate(): string {
    // Use your custom format string here
    return this.dateTimeAdapter.format(this.date_to_publish, 'MM/DD/YYYY HH:mm');
  }
}

Now, whenever you need the formatted value (like on form submission), call getFormattedPublishDate() instead of using the raw Date object.

3. Verify your template binding setup

Make sure your template is correctly binding to the date_to_publish property:

<!-- For template-driven forms -->
<owl-date-time-inline [(ngModel)]="date_to_publish"></owl-date-time-inline>

<!-- For reactive forms -->
<owl-date-time-inline formControlName="date_to_publish"></owl-date-time-inline>

Key Takeaway #

The component's locale and format settings control display only. The bound Date object remains a native JS Date — to get a custom-formatted string, you have to explicitly convert it using the library's tools or a date utility.

内容的提问来源于stack exchange，提问作者Odai Tu