时间戳

首页 > 解决方案 > 如何使用 Angular 8 中的 Bootstrap 4 在日期选择器中将日期格式转换为 DD MMM YYYY

date - 如何使用 Angular 8 中的 Bootstrap 4 在日期选择器中将日期格式转换为 DD MMM YYYY

问题描述

    <div class="col-sm-8">
                <i class="far fa-calendar-alt"></i>
                <input
                  id="dtpFrom"
                  type="text"
                  placeholder="Datepicker"
                  placement="top"
                  class="form-control"
                  bsDatepicker
                  [bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
                  [bsValue]="todayDate"
                  [minDate]="minDate"
                  [maxDate]="maxDate"
                />
              </div>

    import { BsDatepickerConfig } from'ngx-bootstrap/datepicker';
    export class CardlessTransactionsComponent implements OnInit {

    datePickerConfig: Partial<BsDatepickerConfig>;
    privatetodayDate: Date = newDate();
    minDate: Date;
    maxDate: Date;
    }

    constructor(privatefb:FormBuilder) {
    this.todayDate = newDate();
    this.minDate = newDate();
    this.maxDate = newDate();
    this.minDate.setDate(this.minDate.getDate() - 7);
    this.maxDate.setDate(this.maxDate.getDate() + 0);

在 HTML 文件中，我认为在 bsValue 中需要做一些事情，而在 ts 文件中，我不知道在哪里更改以获得我想要的输出，即显示月份名称而不是月份数字价值

标签： datebootstrap-4datepickerformatangular8

解决方案

您应该通过 a 而不是在其外部获取今天的日期以formControl使其正常工作...

相关的 HTML：

<div class="row">
    <div class="col-sm-8">
        <i class="far fa-calendar-alt"></i>
        <input
          id="dtpFrom"
          placeholder="Datepicker"
          placement="top"
          class="form-control"
          bsDatepicker
          formControlName="dateMDY"
          [bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
          [bsValue]="todayDate"
          [minDate]="minDate"
          [maxDate]="maxDate"
        />
      </div>
    </div>

在这里工作stackblitz

推荐阅读