如何在 Angular 中将日期输入类型更改为 DD/MM/YYYY？答案

【问题标题】：How to change date input type to DD/MM/YYYY in Angular?如何在 Angular 中将日期输入类型更改为 DD/MM/YYYY？
【发布时间】：2020-11-11 21:44:00
【问题描述】：

我使用属性作为输入类型="datetime"。但此属性查看输出 MM/DD/YYYY。那么如何将日期的输出格式更改为 DD/MM/YYYY？

pick the date format mm/dd/yyyy

                        <div class="form-group">
                            <label>{{"StartDate" | localize}}*</label>
                            <input required class="form-control m-input" type="datetime" bsDatepicker 
                            datePickerMomentModifier [(date)]="ticketWorkDetail.workDetailStartDate" 
                            id="TicketWorkDetail_WorkDetailStartDate" 
                            name="TicketWorkDetail_WorkDetailStartDate">
                        </div>

【问题讨论】：

你的问题是什么？
你在使用 ngx-bootstrap 吗？
来自developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…: "显示的日期格式将与实际值不同——显示的日期格式基于用户浏览器的区域设置，但解析后的值格式始终为 yyyy-mm-dd。”
你可以使用 ng-bootstrap、material-date-picker、ngx-bootstrap ....

标签： html angular typescript date

【解决方案1】：

如果您使用的是 ngx-bootstrap... 我认为您来自输入的 bsDatepicker 指令。您可以使用bsConfig 指令来格式化日期输入。 https://valor-software.com/ngx-bootstrap/#/datepicker#format

<div class="form-group">
    <label>{{"StartDate" | localize}}*</label>
    <input required class="form-control m-input" type="text" bsDatepicker 
    datePickerMomentModifier [(date)]="ticketWorkDetail.workDetailStartDate"
    [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY' }" 
    id="TicketWorkDetail_WorkDetailStartDate" 
    name="TicketWorkDetail_WorkDetailStartDate">
</div>

您可以将输入类型属性设置为文本，bsDatepicker 指令就可以了。

【讨论】：