只有月份和日期的日期选择器（隐藏年份）答案

【问题标题】：Datepicker with only Month and Day (Hide year)只有月份和日期的日期选择器（隐藏年份）
【发布时间】：2019-04-08 18:27:29
【问题描述】：

我无法在 ngx-bootstrap 日期选择器上找到任何记录在案的方法来隐藏年份。我试过dateInputFormat: 'MMDD'，但日期选择器标题中仍然显示年份。文档链接： https://valor-software.com/ngx-bootstrap/#/datepicker 我想展示类似的东西：

【问题讨论】：

当前版本没有隐藏年份的选项。

标签： angular ngx-bootstrap

【解决方案1】：

嗯，问题是使用 encapsulation:ViewEncapsulation.None 和类似的类

.bs-datepicker-head button:nth-child(3){
  display:none!important;
}

ViewEncapsultaion.None 的问题在于组件中的所有 .css 都会影响到所有应用程序。所以，最好写一个 .css 之类的

.custom .bs-datepicker-head button:nth-child(3){
  display:none!important;
}

所以，如果我们使用 ViewEncapsultaion.None，只会影响具有“自定义”类的日期选择器。要使用自定义类创建 datePicker，您需要使用 [bsConfig]。

我写代码

我们的 .html

<div class="content">
  <h4>datepicker should display current date:</h4>
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            class="form-control"
            [minDate]="minDate"
            [maxDate]="maxDate"
            #dp="bsDatepicker" [bsConfig]="bsConfig"
            bsDatepicker [(bsValue)]="myDateValue">
    </div>
  </div>
</div>

还有我们的组件

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  myDateValue: Date;
  bsConfig: Partial<BsDatepickerConfig>;
  ngOnInit() {
    this.myDateValue = new Date();
    //see that our class was "theme-green custom"
    this.bsConfig = Object.assign({}, { containerClass: 'theme-green custom' });
  }
}

你可以在stackblitz看到

【讨论】：

【解决方案2】：

您可以使用自定义 NgbDatepickerI18n 并覆盖方法 getYearNumerals 以返回空字符串。事实上，正是这种方法被 NgbDatePicker 用来在导航标题上呈现年份。

这是一个简单的例子：

@Injectable({
  providedIn: 'root'
})
class CustomDateI18n extends NgbDatepickerI18nDefault {
  getYearNumerals(year: number): string {
    return '';
  }
}
@Component({
  selector: 'app-component',
  templateUrl: './my-component.component.html',
  providers: [
    {
      provide: NgbDatepickerI18n,
      useClass: CustomDateI18n
    }
  ]
})

【讨论】：