草庐IT

Angular 2 : How to use JavaScript Date Object with NgModel two way binding

coder 2023-07-04 原文

我正在使用 Angular 2，我有这段代码:

JS，此代码启动模板的员工变量:

handleEmployee(employee : Employee){
        this.employee = employee;
        this.employee.startDate = new Date('2005/01/01');
        console.log(this.employee);
    }

模板:

...
<div>
    <label>Start date: </label>
    <input [(ngModel)]="employee.startDate" type="date" name="startDate"/>
  </div>
  <div>
...

名字等其他数据可以正确显示。但是对于我刚得到的日期:

mm/dd/yyyy

在输入元素中，它应该是一个日期。

我该怎么做？

最佳答案

更新:

StackBlitz

当我写下这个答案时 DatePipe不存在，现在你可以这样做

<input [ngModel]="startDate | date:'yyyy-MM-dd'" (ngModelChange)="startDate = $event" type="date" name="startDate"/>

`

旧答案:

PLUNKER

您需要将 date object 转换为 input type="date" 格式，即 yyyy-mm-dd，方法如下它会起作用

模板:

<input [(ngModel)]="humanDate" type="date" name="startDate"/>

组件(TS):

export class App {
  startDate: any;

  constructor() {
    this.startDate = new Date(2005, 1, 4);
  }

  set humanDate(e){
    e = e.split('-');
    let d = new Date(Date.UTC(e[0], e[1]-1, e[2]));
    this.startDate.setFullYear(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
  }

  get humanDate(){
    return this.startDate.toISOString().substring(0, 10);
  }
}

关于 Angular 2 : How to use JavaScript Date Object with NgModel two way binding，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37055311/

JavaScriptAngularcodestartDatestrongtypescript

有关Angular 2 : How to use JavaScript Date Object with NgModel two way binding的更多相关文章

  1. ruby-on-rails - Rails with angular 与 Rails pure(查看性能) - 2

    我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用

  2. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移，gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular，它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架，例如grape、slim(是的，我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方，我在Rails4中有

  3. 与Angular 2集成时，Bootstrap下拉列表和Bootstrap TagSinput不起作用 - 2

    Bootstrap下拉代码正常工作（无角2），但相同的代码与Angular2集成在一起，它无法按预期工作。HTML和CSS代码：[下拉活动正在工作。]YoucanLoginSignupHTML和具有角2的CSS[下拉行动不起作用。]YoucanLoginSignup看答案LoginSignup尝试此..使用最终版本，除非您有路径参数，否则RouterLink不应用作套餐。然后在路由器文件中RouterModule.forRoot([{path:"login",component:},{path:"signup",component:}])

  4. Angular 4懒负载模块与名称的儿童插座无效 - 2

    我正在尝试为模块实现懒惰加载。该模块有一堆儿童路线独特的出口名称。当我尝试访问路线时，这似乎不起作用。从我保存的这个示例中，这似乎可以：https://plnkr.co/edit/nnxaozitm00riixzemts?p=preview您可以看到我有孩子的路线{path:'list',component:HeroListComponent,outlet:'abc'},在hero-routing.module.ts和路由器出口：在hero.com.ponent.ts当我在本地运行时，我应该能够访问Localhost：3000/Heroes/（ABC：List），但似乎不起作用。注意：您可以通

  5. 如何在Angular应用中而不是Favicon.ico中提供favicon.png？ - 2

    我创建了一个新的Angular应用程序：ngnew...我可以使用以下方式查看该应用程序ngserve--open我删除了默认值src/favicon.ico并替换为src/favicon.png。我也打开了src/index.html并更改了适当的行以阅读：这似乎没有起作用。发出GET请求/favicon.png只需返回内容src/index.html。重新启动ngserve没有区别。如何使该文件可以访问该应用程序？看答案制作具有相同名称的PNG图像（即favicon.png）并更改这些文件中的名称。index.htmlAngular.json"assets":["src/favicon.p

  6. css - 将 SASS 用于 Ruby on Rails 时，如何使用 border-radius 属性删除导航栏圆 Angular ？ - 2

    我是编程新手，通过一门名为OneMonthRails的类(class)学习bootstrap。我想删除反向导航栏上的圆Angular，但我很难。我已经查看了下面链接中的两个stackoverflow线程，但仍然遇到问题。目前我有一个名为“Bootstrap_and_customization.css.scss”的文件，它包含以下代码:$body-bg:#95a5a6;$border-radius:0px;@import'bootstrap';但是，边框半径仍然是圆的。我希望我提供了足够的信息，但我可能没有，所以请告诉我。谢谢=====链接:Gettingridofalltheround

  7. javascript - 在 Angular js中用字符串 "null"替换空数据 - 2

    我必须使用ng-repeat在html页面中显示表格。表中的大多数条目都有空数据，但我无法用空格或字符串null替换null。我试过{{行||'null'}}但它没有帮助。当它生成表时，如果行中有大量空值，它会把它完全搞砸。{{colname}}{{row||'null'}} 最佳答案 旧的怎么样ng-show和ng-hide如果值为“null”，则显示某些内容。替换{{row||'null'}}与{{row}}/div>null 关于javascript-在Angularjs中用字符串

  8. javascript - 结合 AngularJS、jQueryUI、Angular-Drag-Drop 排序列表 - 2

    我遇到以下情况，我需要允许用户从列表中选择对象并将它们拖/放到某个插槽中:对象的大小可以是插槽的一到三倍。所以如果用户将Object1拖到Slot0，那么它只占用Slot0(startSlot=0和endSlot=0)。但是，如果用户将对象3拖动到插槽3，则它会占用插槽3、4和5(startSlot=3和endSlot=5)。将对象放入槽中后，用户可以通过在槽中单击并上下拖动对象来重新排序对象。对象不能相互重叠:我正在使用Angular，所以我正在从数据库中读取对象列表，并且我有一个槽数变量。我尝试了几种解决方案。我相信使用jQuery和jQueryUI可拖动、可放置和可排序是解决方案

  9. javascript - 引用错误 : _ is not defined while using angular-google-maps - 2

    我收到ReferenceError:_isnotdefinedangular-google-maps我真的不明白为什么我会收到这个错误，因为我完全按照网站上写的去做。我也搜索过类似的问题，但没有帮助。bundle.js$=window.$=window.jQuery=require('./lib/jquery');require('./lib/angular-simple-logger.js');require('./lib/angular-google-maps.js');require('./lib/lodash.js');我正在将bundle.js导入到index.html中。我

  10. javascript - 如何从 Controller 调用 Angular 服务方法？ - 2

    我对Angular有点陌生。我已经构建了“员工搜索”服务模块。这是代码...//Serviceforemployeesearchapp.service('employeeSearchService',function($http,resourceServerAddress){this.empList=[];//Methodforclearingsearchemployeelistthis.clearEmpList=function(){this.empList=[];}//Methodforfetchingemployeesearchlistthis.fetchEmpList=func

随机推荐