Question

我正在尝试在旧的datepicker上应用区域设置

https://valor-software.com/ngx-bootstrap/#/datepicker

我尝试了evrything，我不知道在哪里可以看得更远，我可以使用新的，但我有一个很大的解决方案，我必须留在旧的datepicker

这是我的

my.module.ts

import { CommonModule } from '@angular/common';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
    imports: [
        DatepickerModule.forRoot() 
    ],
    declarations: [

    ],
    providers: [

    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class MyModule {
}

my.component.ts

import { defineLocale } from 'ngx-bootstrap/bs-moment';
import { de } from 'ngx-bootstrap/locale';
defineLocale('de', de);


@Component({
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})

export class MyComponent implements OnInit {}

my.component.html

  <datepicker formControlName="effectiveDate" [showWeeks]="false" [locale]="de">

无法绑定到＆＃39; locale＆＃39;因为它不是'datepicker＆＃39;的已知属性。：（

Answer 1

此日期选择器的旧版本不包含locale输入。文档状态This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.较新版本具有区域设置，但不能将其修改为输入属性。而是使用BsLocaleService来更改区域设置。看起来应该是这样的：

<强> my.module.ts

import { CommonModule } from '@angular/common';
import { BsDatepickerModule, BsLocaleService  } from 'ngx-bootstrap/datepicker';
import { de } from 'ngx-bootstrap/locale';
defineLocale('de', de);

@NgModule({
    imports: [
        BsDatepickerModule.forRoot() 
    ],
    declarations: [

    ],
    providers: [
        BsLocaleService 
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class MyModule {
}

<强> my.component.ts

import { BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
import { listLocales } from 'ngx-bootstrap/bs-moment';

@Component({
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})

export class MyComponent implements OnInit {
   locale = 'de';

   constructor(private _localeService: BsLocaleService) {}

   ngOnInit(){
      this._localeService.use(this.locale);
   }

}

<强> my.component.html

<input placeholder="Datepicker" type="text" formControlName="effectiveDate" class="form-control" bsDatepicker #dp="bsDatepicker">

Datepicker ngx-bootstrap

1 个答案: