angular - How to Override Button Bar Labels in PrimeNG Date Picker? - Stack Overflow

admin管理员组

文章数量:1317898

I'm using PrimeNG's <p-datepicker> component in my Angular application. My goal is to change the labels of the "Clear" and "Today" buttons in the button bar from English to Italian. Here is my current component setup:

<p-datepicker
  formControlName="minDate"
  inputId="minDate"
  showIcon
  inline
  [maxDate]="maxDate"
  [showButtonBar]="true"
  [locale]="it"
/>

I have set [showButtonBar]="true" which displays the "Clear" and "Today" buttons. However, I need to change these labels to Italian.

For me, it is defined as:

it = {
  today: 'Oggi',
  clear: 'Svuota',
};

I followed the instructions in this StackOverflow question (How to change the 'Today' button label in primeng calendar), but it didn't work for my component. That question was about primeng calendar, not date picker but I tried anyway.

How can I override the labels of the "Clear" and "Today" buttons in the button bar of the component?

I'm using Angular 19.0.0 and PrimeNG 19.0.1.

I'm using PrimeNG's <p-datepicker> component in my Angular application. My goal is to change the labels of the "Clear" and "Today" buttons in the button bar from English to Italian. Here is my current component setup:

<p-datepicker
  formControlName="minDate"
  inputId="minDate"
  showIcon
  inline
  [maxDate]="maxDate"
  [showButtonBar]="true"
  [locale]="it"
/>

I have set [showButtonBar]="true" which displays the "Clear" and "Today" buttons. However, I need to change these labels to Italian.

For me, it is defined as:

it = {
  today: 'Oggi',
  clear: 'Svuota',
};

I followed the instructions in this StackOverflow question (How to change the 'Today' button label in primeng calendar), but it didn't work for my component. That question was about primeng calendar, not date picker but I tried anyway.

How can I override the labels of the "Clear" and "Today" buttons in the button bar of the component?

I'm using Angular 19.0.0 and PrimeNG 19.0.1.

• angular
• primeng

Share Improve this question Follow asked Jan 22 at 16:04 Enrico ArnaudoEnrico Arnaudo 651212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I solved my issue by following the steps described in this StackOverflow question (https://stackoverflow/questions/79314545/how-to-change-the-language-in-primeng-version-19#:~:text=How%20can%20I%20do%20this%20in%20Angular%2FPrimeng%2019%3F,needs%20this.primeNGConfig.setTranslation%28localeFr%29%3B%20%2F%2F%20French%20%2F%2F%20this.primeNGConfig.setTranslation%28localeEs%29%3B%20%2F%2F%20Spanish), which focuses on PrimeNG 19.0. Here's what I did:

• Install primelocale npm i primelocale
• Imported Italian translation in my app.config import { it } from 'primelocale/it.json';

Final code setup

import { it } from 'primelocale/it.json';
//...other imports


export const appConfig: ApplicationConfig = {
  providers: [
    //some global providers
   providePrimeNG({
      ripple: true,
      translation: it,
      theme: {
        preset: MyBeautifulPreset,
        options: {
          prefix: 'p',
          darkModeSelector: 'system',
          cssLayer: false,
        },
      },
    }),
    ...other providers...
 ]

And my date picker component:

<p-datepicker
    formControlName="minDate"
    inputId="minDate"
    showIcon
    inline
    [maxDate]="maxDate"
    [showButtonBar]="true"
  />

本文标签： angularHow to Override Button Bar Labels in PrimeNG Date PickerStack Overflow