Hi Toan,
Thanks for
contacting Syncfusion support.
Query 1 : I want translate properties of
dateRangerPicker as shown below
Yes , We can load locale
text for the concern culture through L10n.load method. Please find the below highlighted code
for your reference
app.component.ts :
|
//Load the L10n from ej2-base
import { L10n } from '@syncfusion/ej2-base';
//load the locale object to set the localized placeholder value
L10n.load({
'fr': {
'daterangepicker': {
placeholder: "Choisissez une plage de dates",
startLabel: "Date de début",
endLabel: "Date de fin",
applyText: "Appliquer",
cancelText: "Annuler",
selectedDays: "Jours sélectionnés",
days: "Journées",
customRange: "Gamme personnalisée"
}
}
});
|
Template:
|
<ejs-daterangepicker locale='fr' ></ejs-daterangepicker>
|
Sample : https://www.syncfusion.com/downloads/support/forum/167370/ze/DateRangePicker_localization-1938426842
UG link: https://ej2.syncfusion.com/angular/documentation/daterangepicker/globalization/
Query
2: I'm working on a hotel
booking website. I want to disable the set dates but I see in the manual it
only helps me to select a range ([1/1/2000-1/1/2001])
Yes, We can disable the specific
date(s) while rendering the day cell by
using ‘renderDayCell’ event. Kindly refer the below code snippet and
sample for your reference .
API:
https://ej2.syncfusion.com/angular/documentation/api/daterangepicker#renderdaycell
|
export class AppComponent {
public minDate: Date = new Date(2021,6,19);
public maxDate: Date = new Date( 2021,7,19);
public disabledDates: Date [];
constructor( ) {
this.disabledDates = [new Date(2021,6,27)
,new Date(2021,6,28)
,new Date(2021,6,29)
,new Date(2021,6,30)
,new Date(2021,6,28)
,new Date(2021,7,2)
,new Date(2021,7,3)
,new Date(2021,7,4)
,new Date(2021,7,5)];
}
onLoad(args: any) {
/*Date need to be disabled*/
for(var i =0 ; i< this.disabledDates.length; i++)
{
if (args.date.toDateString() === this.disabledDates[i].toDateString() ) {
args.isDisabled = true;
}
}
}
}
|
Template :
|
<ejs- daterangepicker (renderDayCell)="onLoad($event)"[min]='minDate' [max]='maxDate'></ejs-daterangepicker>
|
Sample :
https://stackblitz.com/edit/angular-o7ridg?file=app.component.ts
Regards,
Deepak R.
