Проблема с изменением календаря на французский в IE10 - PullRequest
0 голосов
/ 14 февраля 2019

Я использую два средства выбора даты в своем веб-приложении для фильтрации данных, выбирая дату начала и окончания.Я использовал mat-datepicker из Angular Materials.

Мне нужно отобразить календарь на французском языке, поэтому я использовал следующий код:

constructor(private dateAdapter: DateAdapter<Date>) {
    // Change calendar to french version
    this.dateAdapter.setLocale('fr');
}

Это прекрасно работает в Chrome и Mozilla.Но в IE10 у меня все еще есть календарь на английском.Вот скриншот:

enter image description here

Вот мой контент pollyfill.ts:

.....
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

import 'core-js/es7/symbol';
import 'core-js/es7/object';
import 'core-js/es7/math';
import 'core-js/es7/string';
import 'core-js/es7/array';
import 'core-js/es7/map';
import 'core-js/es7/weak-map';
import 'core-js/es7/set';
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';  // Included with Angular CLI.

1 Ответ

0 голосов
/ 20 февраля 2019

Согласно документу Material Datepicker , я создаю образец, используя следующий код, он хорошо работает в IE 10, вы можете сослаться на него:

код в component.ts:

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
//import {default as _rollupMoment} from 'moment';

const moment =  _moment;

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'app-material-datepicker',
  templateUrl: 'material-datepicker.component.html',
  styleUrls: ['material-datepicker.component.css'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class MaterialDatepickerComponent {

  constructor(private adapter: DateAdapter<Date>) {
    this.adapter.setLocale('fr');
  }
  date = new FormControl(moment());
}

Код в conponent.html:

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

The package.json:

{
  "name": "angular-material-sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.3.2",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.3.2",
    "@angular/material-moment-adapter": "^7.3.2",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "moment": "^2.24.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

Тогда результат будет таким:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...