Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
145
Use locale and formatter in igx-date-picker
posted

Hello,

in our app we use a grid with editable timestamp values in some cells. So far i didn't found any date&time picker... Thats why we are going to use 1 date and 1 time picker for the same field (the implementation works fine :-)). But I also need to set the locale of the igx-date-picker and the date format can be customized, too.

Whenever I used the locale (as described here https://es.infragistics.com/products/ignite-ui-angular/angular/components/date-picker#internationalization) , the [formatter] or [format] will fail, when I f.e. select a 31. March. Suddently i can see NAN... With locale it works as expected.

Is there any way to get the calendar translations for a the specific language + using a specific date format?


Our current code looks more or less like this:

            <igx-date-picker [(ngModel)]="manualDate" [formatter]="dateFormatter"
                             [mask]="dateFormat" [ngModelOptions]="{standalone: true}"
                             [showWeekNumbers]="true"
                             cancelButtonLabel="{{ 'CANCEL' | translate }}"mode="dropdown"
                             todayButtonLabel="{{ 'TODAY' | translate }}">
              <ng-template igxDatePickerTemplate
                           let-displayData="displayData"
                           let-openDialog="openDialog">
                <igx-input-group>
                  <input #dateDropDownTarget (blur)="onManualDateChange($event.target.value, cell)" [value]="displayData" igxInput/>
                  <igx-suffix (click)="openDialog(dateDropDownTarget)">
                    <igx-icon>event_note</igx-icon>
                  </igx-suffix>
                </igx-input-group>
              </ng-template>
            </igx-date-picker>



We use the  version "10.2.10".

Parents
No Data
Reply
  • 1560
    Verified Answer
    Offline posted

    Hello,

    I have been looking into the described behavior and I was able to reproduce it using this sample.

    After an investigation, I determined that the root of the issue is the mask property. If you remove the mask into the attached sample and the default one is used everything seems to work as expected.

    However, I have logged this behavior in our GitHub repository and you can view the issue here. Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team.

    In order to receive a notification whenever new information is available please make sure that you are subscribed to the issue. This can be achieved via “Subscribe” button.

    Sincerely,

    Teodosia Hristodorova

    Associate Software Developer

Children