如何使用angular 5 bootstrap datepicker在datepicker上设置uk格式

63lcw9qa  于 2023-06-27  发布在  Bootstrap
关注(0)|答案(2)|浏览(138)

我试图设置英国格式的日期后,它已被选中。
下面是代码:

<div class="form-group">
    <label for="test_StartDate" class="col-md-12">{{l("StartDate")}}</label>
    <input *ngIf="!test.id" class="form-control m-input" type="datetime" name="test_StartDate" datePicker [(selectedDate)]="test.startDate" id="test_StartDate">
    <input *ngIf="test.id" 
           class="form-control m-input" 
           type="datetime" 
           name="test_StartDate" 
           datePicker
           [(selectedDate)]="test.startDate" 
           id="test_StartDate"
           data-date-format="DD/MM/YYYY">
</div>

输出:01/12/2019
应该是:12/01/2019

yrdbyhpb

yrdbyhpb1#

使用Angular 10 +
您可以在模块中设置提供程序的区域设置:只需添加以下内容:

import { LOCALE_ID, NgModule } from '@angular/core';

...

providers: [
{
    provide: LOCALE_ID,
    useValue: 'gb'
},...]

示例HTML:

<mat-form-field>
    <input matInput type="datetime" [matDatepicker]="startDate" 
           placeholder="Choose a date">
         <mat-datepicker-toggle matSuffix [for]="startDate">
         </mat-datepicker-toggle>
         <mat-datepicker #startDate ></mat-datepicker>
</mat-form-field>

sample

0g0grzrc

0g0grzrc2#

要达到预期的结果,请在日期选择器配置选项中添加格式

$("#test_StartDate").datepicker({ 
        autoclose: true, 
        format: 'dd/mm/yyyy',
        todayHighlight: true
  }).datepicker('update', new Date());
#test_StartDate{
  width:150px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <label for="test_StartDate" class="col-md-12">{{l("StartDate")}}</label>
    <input *ngIf="!test.id" class="form-control m-input" type="datetime" name="test_StartDate" datePicker [(selectedDate)]="test.startDate" id="test_StartDate">
    <input *ngIf="test.id" 
           class="form-control m-input" 
           type="datetime" 
           name="test_StartDate" 
           datePicker
           [(selectedDate)]="test.startDate" 
           id="test_StartDate"
           data-date-format="DD/MM/YYYY">
</div>

codepen - https://codepen.io/nagasai/pen/ROxjrY

相关问题