如何在日期选择器中使用角度 4 中的引导程序 8 将日期格式转换为 DD MMM YYYY

Question

<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 文件中，我不知道在哪里更改以获取我想要的输出，即使其显示月份名称而不是月份数值

Answer 1

你应该通过formControl而不是在它之外获取今天的日期来让它工作......

相关网页：

<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>

在这里工作堆栈闪电战

Answer 2

感谢您的建议，我已经弄清楚了。(在 TS 文件中进行更改(

initializeForm () {
this.cardlessForm= this.fb.group ({
dateFrom:new Date(),
dateTo:new Date ()
});

} 我只是在 dateFrom 和 dateTo 处添加"新日期 (("，然后我删除了代码( this.maxDate.setDate(this.maxDate.getDate(( + 0(;