如何在表单内的Angular ngx-bootstrap的datepicker中更改日期格式 [英] How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

问题描述

在Angular 4应用程序中使用ngx-bootstrap Datepicker

我知道通常您可以通过以下方式指定日期格式：

 < input id = from name = from 
 bsDatepicker [（bsValue）] = myModel 
 value = {{myModel | date：'yyyy-MM-dd'}}> 
  

但是这次我在模板驱动的Angular表单中，所以我的输入不限于上面示例中的变量，例如 myModel ，但它只绑定到以下形式：

 <输入id =来自 name =来自 
 bsDatepicker ngModel> 
  

那么在这种情况下如何指定日期格式？

编辑：实现此目的的一种方法是在组件内部创建一个新变量 newVar 然后绑定它与 [（bsValue）] = newVar ：

 < ; input id = from name = from 
 bsDatepicker ngModel 
 [（bsValue）] = newVar 
 value = {{newVar | date：'yyyy-MM-dd '}}> 
  

但是我想知道是否有更好的解决方案。

解决方案

[（bsValue）] 始终可与 bsDatepicker ，
是否为输入字段

如果只想更改一个字段的格式，则

[（bsValue）] = newVar value = {{newVar | date：'yyyy-MM-dd'}}

bsDatepicker 与输入字段和表单集成在一起，这应该对您有用：

<输入名称=来自 bsDatepicker [（ngModel）] = newVar>

，您可以通过config全局更改输入值中日期的格式

https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker /bs-datepicker.config.ts#L31

或vi [bsConfig] = {dateInputFormat：'yyyy-MM-dd'} 上具有 bsDatepicker 的元素p>

注释：当前存在一个格式为 L 的问题（v1.9.2），它`s始终使用本地语言环境

Using ngx-bootstrap Datepicker in an Angular 4 application,

I know that normally you can specify the date format this way:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">

but this time I'm inside a template-driven Angular form, so my input is not bound to a variable like myModel in the example above, but it's just bound to the form:

<input id="from" name="from"
       bsDatepicker ngModel>

so how can I specify the date format in this case?

Edit: it looks like that a way to achieve this is by creating a new variable newVar inside the component and then binding it with [(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">

However I wonder if there is a better solution.

解决方案

[(bsValue)] is always available for use with bsDatepicker, will it be input field or not

if you want to change format of only one field then

[(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}" is fine

bsDatepicker has integration with input fields and forms, this should work for you:

<input name="from" bsDatepicker [(ngModel)]="newVar">

and you can globally change format of date in input's value via config

https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts#L31

or via [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}" on element with bsDatepicker

note: there is currently an issue (v1.9.2) with L format, it`s always uses en-us locale

这篇关于如何在表单内的Angular ngx-bootstrap的datepicker中更改日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！