Angular 2 - 如何在 ngxbootstrap/datepicker 中只显示月份和年份答案

【问题标题】：Angular 2 - How to show only month and year in ngxbootstrap/datepickerAngular 2 - 如何在 ngxbootstrap/datepicker 中只显示月份和年份
【发布时间】：2018-08-16 08:46:27
【问题描述】：

我在项目中使用 ngx bootstrap datepicker

只需要像上图那样选择月份和年份

<input type="text"
         class="form-control"
          (bsValueChange)="modelChanged($event)"
          #dp="bsDatepicker"
          bsDatepicker [(bsValue)]="bsValue"
          [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
          >

有没有办法像这样配置日期选择器？或建议任何允许此功能的替代日期选择器

【问题讨论】：

嘿@aashiq，你能解决这个问题吗？我也遇到了同样的麻烦。我也想要和你一样的风景。你能帮我解决一下吗？
@monica 还没有使用 ngx datepicker，如果我们使用材料日期选择器或其他方式可以实现
我们如何突出显示选定的月份？

标签： angular datepicker angular2-services ngx-bootstrap

【解决方案1】：

您应该导入以下内容：

import { BsDatepickerConfig, BsDatepickerViewMode } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'demo-datepicker-min-mode',
  templateUrl: './min-mode.component.html'
})
export class DemoDatepickerMinModeComponent implements OnInit {
  bsValue: Date = new Date(2017, 7);
  minMode: BsDatepickerViewMode = 'month'; // change for month:year

  bsConfig: Partial<BsDatepickerConfig>;

  ngOnInit(): void {
    this.bsConfig = Object.assign({}, {
      minMode : this.minMode
    });
  }
}

在您的 HTML 文件中

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           class="form-control"
           [bsConfig]="bsConfig"
           #dp="bsDatepicker"
           bsDatepicker [(bsValue)]="bsValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group">
    <button class="btn btn-success" (click)="dp.toggle()" type="button">Date Picker</button>
  </div>
</div>
<br>

【讨论】：

【解决方案2】：

目前，没有办法实现您想要的。顺便说一下，这是 ngx-bootstrap 存储库中非常受欢迎的请求。

valor-software 团队正在实施此功能，您可以尝试他们目前所做的工作。查看下一个 ngx-bootstrap 版本。这是拉取请求的a link。

【讨论】：