Skip to content

Commit 9812dae

Browse files
hamzajazyrihamzajazyri
committed
main - ff27a93 docs(material/datepicker): Update close calendar label (#26738)
1 parent f34615b commit 9812dae

File tree

7 files changed

+74
-26
lines changed

7 files changed

+74
-26
lines changed

‎docs-content/examples-highlighted/material/datepicker/datepicker-locale/datepicker-locale-example-ts.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<span class="hljs-keyword">import</span> {Component, Inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
1+
<span class="hljs-keyword">import</span> {Component, Inject, OnInit} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
22
<span class="hljs-keyword">import</span> {
33
MAT_MOMENT_DATE_FORMATS,
44
MomentDateAdapter,
@@ -11,6 +11,7 @@
1111
<span class="hljs-keyword">import</span> {MatFormFieldModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
1212
<span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;moment/locale/ja&#x27;</span>;
1313
<span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;moment/locale/fr&#x27;</span>;
14+
<span class="hljs-keyword">import</span> {MatDatepickerIntl} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/datepicker&#x27;</span>;
1415

1516
<span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Datepicker with different locale */</span>
1617
<span class="hljs-meta">@Component</span>({
@@ -34,15 +35,26 @@
3435
<span class="hljs-attr">standalone</span>: <span class="hljs-literal">true</span>,
3536
<span class="hljs-attr">imports</span>: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
3637
})
37-
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DatepickerLocaleExample</span> </span>{
38+
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DatepickerLocaleExample</span> <span class="hljs-title">implements</span> <span class="hljs-title">OnInit</span> </span>{
3839
<span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">
3940
<span class="hljs-keyword">private</span> _adapter: DateAdapter&lt;<span class="hljs-built_in">any</span>&gt;,
41+
<span class="hljs-keyword">private</span> _intl: MatDatepickerIntl,
4042
<span class="hljs-meta">@Inject</span>(MAT_DATE_LOCALE) <span class="hljs-keyword">private</span> _locale: <span class="hljs-built_in">string</span>,
4143
</span>)</span> {}
4244

45+
<span class="hljs-function"><span class="hljs-title">ngOnInit</span>(<span class="hljs-params"></span>)</span> {
46+
<span class="hljs-built_in">this</span>.updateCloseButtonLabel(<span class="hljs-string">&#x27;カレンダーを閉じる&#x27;</span>);
47+
}
48+
4349
<span class="hljs-function"><span class="hljs-title">french</span>(<span class="hljs-params"></span>)</span> {
4450
<span class="hljs-built_in">this</span>._locale = <span class="hljs-string">&#x27;fr&#x27;</span>;
4551
<span class="hljs-built_in">this</span>._adapter.setLocale(<span class="hljs-built_in">this</span>._locale);
52+
<span class="hljs-built_in">this</span>.updateCloseButtonLabel(<span class="hljs-string">&#x27;Fermer le calendrier&#x27;</span>);
53+
}
54+
55+
<span class="hljs-function"><span class="hljs-title">updateCloseButtonLabel</span>(<span class="hljs-params">label: <span class="hljs-built_in">string</span></span>)</span> {
56+
<span class="hljs-built_in">this</span>._intl.closeCalendarLabel = label;
57+
<span class="hljs-built_in">this</span>._intl.changes.next();
4658
}
4759

4860
getDateFormatString(): <span class="hljs-built_in">string</span> {

‎docs-content/examples-source/material/datepicker/datepicker-locale/datepicker-locale-example.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Inject} from '@angular/core';
1+
import {Component, Inject, OnInit} from '@angular/core';
22
import {
33
MAT_MOMENT_DATE_FORMATS,
44
MomentDateAdapter,
@@ -11,6 +11,7 @@ import {MatInputModule} from '@angular/material/input';
1111
import {MatFormFieldModule} from '@angular/material/form-field';
1212
import 'moment/locale/ja';
1313
import 'moment/locale/fr';
14+
import {MatDatepickerIntl} from '@angular/material/datepicker';
1415

1516
/** @title Datepicker with different locale */
1617
@Component({
@@ -34,15 +35,26 @@ import 'moment/locale/fr';
3435
standalone: true,
3536
imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
3637
})
37-
export class DatepickerLocaleExample {
38+
export class DatepickerLocaleExample implements OnInit {
3839
constructor(
3940
private _adapter: DateAdapter<any>,
41+
private _intl: MatDatepickerIntl,
4042
@Inject(MAT_DATE_LOCALE) private _locale: string,
4143
) {}
4244

45+
ngOnInit() {
46+
this.updateCloseButtonLabel('カレンダーを閉じる');
47+
}
48+
4349
french() {
4450
this._locale = 'fr';
4551
this._adapter.setLocale(this._locale);
52+
this.updateCloseButtonLabel('Fermer le calendrier');
53+
}
54+
55+
updateCloseButtonLabel(label: string) {
56+
this._intl.closeCalendarLabel = label;
57+
this._intl.changes.next();
4658
}
4759

4860
getDateFormatString(): string {

‎esm2022/material/datepicker/datepicker-locale/datepicker-locale-example.mjs‎

Lines changed: 18 additions & 8 deletions
Large diffs are not rendered by default.

‎fesm2022/material/datepicker.mjs‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -419,13 +419,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImpor
419419

420420
/** @title Datepicker with different locale */
421421
class DatepickerLocaleExample {
422-
constructor(_adapter, _locale) {
422+
constructor(_adapter, _intl, _locale) {
423423
this._adapter = _adapter;
424+
this._intl = _intl;
424425
this._locale = _locale;
425426
}
427+
ngOnInit() {
428+
this.updateCloseButtonLabel('カレンダーを閉じる');
429+
}
426430
french() {
427431
this._locale = 'fr';
428432
this._adapter.setLocale(this._locale);
433+
this.updateCloseButtonLabel('Fermer le calendrier');
434+
}
435+
updateCloseButtonLabel(label) {
436+
this._intl.closeCalendarLabel = label;
437+
this._intl.changes.next();
429438
}
430439
getDateFormatString() {
431440
if (this._locale === 'ja-JP') {
@@ -436,7 +445,7 @@ class DatepickerLocaleExample {
436445
}
437446
return '';
438447
}
439-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: DatepickerLocaleExample, deps: [{ token: i1$1.DateAdapter }, { token: MAT_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Component }); }
448+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: DatepickerLocaleExample, deps: [{ token: i1$1.DateAdapter }, { token: i3.MatDatepickerIntl }, { token: MAT_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Component }); }
440449
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0", type: DatepickerLocaleExample, isStandalone: true, selector: "datepicker-locale-example", providers: [
441450
// The locale would typically be provided on the root module of your application. We do it at
442451
// the component level here, due to limitations of our example generation script.
@@ -468,7 +477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImpor
468477
},
469478
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
470479
], standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule], template: "<mat-form-field>\n <mat-label>Different locale</mat-label>\n <input matInput [matDatepicker]=\"dp\">\n <mat-hint>{{getDateFormatString()}}</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker #dp></mat-datepicker>\n</mat-form-field>\n<button mat-button (click)=\"french()\">Dynamically switch to French</button>\n", styles: ["mat-form-field {\n margin-right: 12px;\n}\n"] }]
471-
}], ctorParameters: () => [{ type: i1$1.DateAdapter }, { type: undefined, decorators: [{
480+
}], ctorParameters: () => [{ type: i1$1.DateAdapter }, { type: i3.MatDatepickerIntl }, { type: undefined, decorators: [{
472481
type: Inject,
473482
args: [MAT_DATE_LOCALE]
474483
}] }] });

‎fesm2022/material/datepicker.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/datepicker/index.d.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ import { MatCalendarCellClassFunction } from '@angular/material/datepicker';
88
import { MatDateFormats } from '@angular/material/core';
99
import { MatDatepicker } from '@angular/material/datepicker';
1010
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
11+
import { MatDatepickerIntl } from '@angular/material/datepicker';
1112
import { Moment } from 'moment';
1213
import * as _moment from 'moment';
1314
import { OnDestroy } from '@angular/core';
15+
import { OnInit } from '@angular/core';
1416

1517
/** @title Datepicker action buttons */
1618
export declare class DatepickerActionsExample {
@@ -96,11 +98,14 @@ export declare class DatepickerInlineCalendarExample {
9698
}
9799

98100
/** @title Datepicker with different locale */
99-
export declare class DatepickerLocaleExample {
101+
export declare class DatepickerLocaleExample implements OnInit {
100102
private _adapter;
103+
private _intl;
101104
private _locale;
102-
constructor(_adapter: DateAdapter<any>, _locale: string);
105+
constructor(_adapter: DateAdapter<any>, _intl: MatDatepickerIntl, _locale: string);
106+
ngOnInit(): void;
103107
french(): void;
108+
updateCloseButtonLabel(label: string): void;
104109
getDateFormatString(): string;
105110
static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerLocaleExample, never>;
106111
static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerLocaleExample, "datepicker-locale-example", never, {}, {}, never, never, true, never>;

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular/components-examples",
3-
"version": "17.1.0-next.0+sha-8863885",
3+
"version": "17.1.0-next.0+sha-ff27a93",
44
"description": "Angular Components Examples",
55
"private": true,
66
"repository": {
@@ -369,15 +369,15 @@
369369
},
370370
"homepage": "https://github.com/angular/components#readme",
371371
"peerDependencies": {
372-
"@angular/cdk": "17.1.0-next.0+sha-8863885",
373-
"@angular/cdk-experimental": "17.1.0-next.0+sha-8863885",
372+
"@angular/cdk": "17.1.0-next.0+sha-ff27a93",
373+
"@angular/cdk-experimental": "17.1.0-next.0+sha-ff27a93",
374374
"@angular/core": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
375375
"@angular/common": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
376-
"@angular/material": "17.1.0-next.0+sha-8863885",
377-
"@angular/material-experimental": "17.1.0-next.0+sha-8863885",
378-
"@angular/material-moment-adapter": "17.1.0-next.0+sha-8863885",
379-
"@angular/material-luxon-adapter": "17.1.0-next.0+sha-8863885",
380-
"@angular/material-date-fns-adapter": "17.1.0-next.0+sha-8863885"
376+
"@angular/material": "17.1.0-next.0+sha-ff27a93",
377+
"@angular/material-experimental": "17.1.0-next.0+sha-ff27a93",
378+
"@angular/material-moment-adapter": "17.1.0-next.0+sha-ff27a93",
379+
"@angular/material-luxon-adapter": "17.1.0-next.0+sha-ff27a93",
380+
"@angular/material-date-fns-adapter": "17.1.0-next.0+sha-ff27a93"
381381
},
382382
"dependencies": {
383383
"tslib": "^2.3.0"

0 commit comments

Comments
 (0)