Z
Z
zlodiak2018-08-22 16:12:40
Angular
zlodiak, 2018-08-22 16:12:40

How to localize datepicker?

Please help to localize the datepicker, I would like to replace English with Russian. I used ng-bootstrap datepicker . Here is the DEMO . There is an example
of localization on the documentation page just below , but it does not look like my example in terms of the structure of the elements, so I can’t use it. Here is the complete code of my example: html:

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t">
</ngb-datepicker>

<ng-template #t let-date="date" let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

component:
hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered = (date: NgbDate) => this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  isInside = (date: NgbDate) => date.after(this.fromDate) && date.before(this.toDate);
  isRange = (date: NgbDate) => date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-08-22
@zlodiak

there is an example of localization, but it doesn’t look like my example in terms of the structure of the elements, so I can’t use it

I don't even know what to say. I used this example as it is (well, almost - added a couple of properties, dayTemplate is passed from the parent, and the selected date is emitted back) - everything worked out .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question