Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change OWL_DATE_TIME_FORMATS on click event or ngOnInit #191

Open
pamanes opened this issue Jan 26, 2024 · 1 comment
Open

Change OWL_DATE_TIME_FORMATS on click event or ngOnInit #191

pamanes opened this issue Jan 26, 2024 · 1 comment

Comments

@pamanes
Copy link

pamanes commented Jan 26, 2024

hi, I need to be able to change the format of the date time picker either on ngOnInit or in a method called later after initialization. It looks like changing the format in the constructor works fine, but it cannot be changed afterwards. Thanks!

Here's the stackblitz of the setup I have:
https://stackblitz.com/edit/angular-vcdudj?file=src%2Fapp%2Fapp.component.ts

Here's the app.component for the sample:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    // `MomentDateTimeAdapter` can be automatically provided by importing
    // `OwlMomentDateTimeModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {
      provide: DateTimeAdapter,
      useClass: MomentDateTimeAdapter,
      deps: [OWL_DATE_TIME_LOCALE],
    },
    {
      provide: OWL_DATE_TIME_FORMATS,
      useFactory: (datepickerFormatsProvider: DatepickerFormatsProvider) =>
        datepickerFormatsProvider.getFormats(),
      deps: [DatepickerFormatsProvider],
    },
    DatepickerFormatsProvider,
  ],
})
export class AppComponent implements OnInit {
  public dateTime = new moment();
  constructor(
    private datepickerFormat: DatepickerFormatsProvider
  ) {
    console.log('constructor');
    
    this.datepickerFormat = datepickerFormat;
    //this one works fine:
    this.datepickerFormat.setFormats(1);//switch values from 1 to 2
  }

  ngOnInit() {      
    console.log('ngOnInit');
    //this one does not work, too late to change the format?
    this.datepickerFormat.setFormats(1);//switch values from 1 to 2
  }

  btnClick(){
    console.log("button was clicked");
    //this one does not work, too late to change the format?
    this.datepickerFormat.setFormats(1);//switch values from 1 to 2, 

    this.dateTime = new moment();
  }
}

@MrHOY
Copy link

MrHOY commented Dec 18, 2024

Yep, I have a similar issue.
On my component, the user can select one from the list date format, and after the user chooses I have to set the same format on the input of owl-date-time
Any suggestions are appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants