Change the label of 'Start Date' and 'End Date'

[ghost]

Hello Team,

I'm using the date-range picker and I want to change the label of 'Start Date' and 'End Date' to 'Send on' and 'Deliver by' respectively. So please guide me how I can do this?

Your quick response is much appreciated.

Thanks in advance.

[BerlyChristopher]

Hi Anoopyadav,

Greetings from Syncfusion.

We can customize the available labels in the DateRangePicker popup through “L10n.load” method based on the required locale. As per your requirement, we have customized the startDate and endDate label to “Send on” and “Deliver by” based on the “en-US” culture. Please refer the below code example.

[app.component.html]

<ejs-daterangepicker></ejs-daterangepicker>

[app.component.ts]

import { Component, ViewEncapsulation, Inject } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  ngOnInit(): void {
    L10n.load({
      'en-US': {
        'daterangepicker': {
          startLabel: 'Send on',
          endLabel: 'Deliver by'
        }
      }
    });
  }
}

Please find the sample from the below link.

Sample Link: https://stackblitz.com/edit/angular-krlmmu-e3hx4s?file=app.component.html

We have showcased this customization in the below UG documentation link.

UG Link: https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization/

Regards, Berly B.C

[ghost]

Thanks, Berly, It's working.