Angular uses the ngx-Bootstrap datepicker component and implements localization/internationalization.

Datepicker component API: http://ngx-bootstrap.com/#/datepicker

 

Step1. install ngx-Bootstrap:

NPM install ngx-Bootstrap -- save

Step 2. Introduce related files:

Introduce the relevant CSS file in styles in angular. JSON, and introduce the corresponding file as needed.

 "styles": [              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.scss"            ],

Introduce the component ts file into the module File

Import {bsdatepickermodule} from 'ngx-Bootstrap/datepicker '; import {definelocale} from 'ngx-Bootstrap/Chronos'; import {zhcnlocale} from 'ngx-Bootstrap/locale '; definelocale ('zh-cn', zhcnlocale); // The calendar displays Chinese @ ngmodule ({imports :[... bsdatepickermodule. forroot ()], declarations: [...], providers: [...]})

 

Component component

Import {bslocaleservice, bsdatepickerconfig} from 'ngx-Bootstrap/datepicker'; export class insurancebuycomponent implements oninit {bsconfig: Partial <bsdatepickerconfig>; locale = 'zh-cn '; constructor (Private FB: formbuilder, private localeservice: bslocaleservice) {} ngoninit (){
// Date configuration this. bsconfig = object. Assign ({}, {dateinputformat: 'yyyy-MM-DD ', showweeknumbers: false });
// Use Chinese characters for the date. This. localeservice. Use (this. locale );}}

 

In HTML

<Input type = "text" Placeholder = "select the Effective Date" bsdatepicker formcontrolname = "effectivetime" placement = "bottom" [mindate] = "effectivemindate" [maxdate] = "effectivemaxdate" [bsconfig] = "bsconfig">

 

Angular uses the ngx-Bootstrap datepicker component and implements localization/internationalization.