Javascript 让输入类型时间与TypeScript和Angular2一起工作?

Javascript 让输入类型时间与TypeScript和Angular2一起工作?,javascript,angular,typescript,input,angular2-forms,Javascript,Angular,Typescript,Input,Angular2 Forms,在EventCreate的TypeScript类中,我有数据类型为Date的startDateTime和endDateTime属性。HTML5使用输入类型time获取时间。我只想问:如何使输入类型时间与TypeScript和Angular2一起工作 import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { EventCreate } from './eventCrea

在EventCreate的TypeScript类中,我有数据类型为
Date
startDateTime
endDateTime
属性。HTML5使用输入类型
time
获取时间。我只想问:如何使输入类型
时间
与TypeScript和Angular2一起工作

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { EventCreate } from './eventCreate';


@Component({
    selector: 'add-Event',
    templateUrl: './event-add.component.html',
})

export class EventAddComponent {
    title: string;
    description: string;
    locationId: number;
    locationDetails: string;
    categoryId: number;
    isRegistrationRequired: boolean;
    eventDate: Date;
    startDateTime: Date;
    endDateTime: Date;
    maximumRegistrants: number;

    newEvent: EventCreate;

    constructor(private router: Router) { }

    createNewEvent() {
        console.log('new Event Created');
        this.newEvent = new EventCreate(
            this.title,
            this.description,
            this.locationId,
            this.locationDetails,
            this.categoryId,
            this.isRegistrationRequired,
            this.eventDate,
            this.startDateTime,
            this.endDateTime,
            this.maximumRegistrants
        );
        console.log(this.newEvent);
        //call service
        //call route to go to Home page 
        this.router.navigate(['/home']);
    }
    cancel() {
        this.router.navigate(['/home']);
    }
}
    export class EventCreate {
        constructor(
            public title: string,
            public description: string,
            public locationId: number,
            public locationDetails: string,
            public categoryId: number,
            public isRegistrationRequired: boolean,
            public eventDate: Date,
            public startDateTime: Date,
            public endDateTime: Date,
            public maximumRegistrants: number,
        ) { }
    }

<form>
    <div class="form-group">
        <label>Start Time:</label>
        <input type="time" name="startDateTime" [(ngModel)]="startDateTime">
    </div>
    <div class="form-group">
        <label>End Time:</label>
        <input type="time" name="endDateTime" [(ngModel)]="endDateTime">
    </div>
</form>
从'@angular/core'导入{Component};
从'@angular/Router'导入{Router};
从“/EventCreate”导入{EventCreate};
@组成部分({
选择器:“添加事件”,
templateUrl:'./event add.component.html',
})
导出类EventAddComponent{
标题:字符串;
描述:字符串;
locationId:编号;
位置详细信息:字符串;
类别ID:编号;
isRegistrationRequired:布尔值;
事件日期:日期;
startDateTime:日期;
endDateTime:日期;
最大注册人数:人数;
newEvent:EventCreate;
构造函数(专用路由器:路由器){}
createNewEvent(){
console.log('newevent Created');
this.newEvent=neweventcreate(
这个名字,
这个.说明,,
这个.locationId,
这是地址详情,
这个,分类号,
这是需要注册的,
这个.eventDate,
这是开始时间,
这个.endDateTime,
这是最大的注册人
);
console.log(this.newEvent);
//呼叫服务
//呼叫route以转到主页
this.router.navigate(['/home']);
}
取消{
this.router.navigate(['/home']);
}
}
导出类EventCreate{
建造师(
公共标题:字符串,
公共描述:字符串,
公共位置ID:编号,
公共位置详细信息:字符串,
公共类别ID:编号,
需要公共ISRegistration:布尔值,
公共事件日期:日期,
公共开始日期:日期,
public endDateTime:Date,
公共最大注册人:数量,
) { }
}
开始时间:
结束时间:

我知道现在有点晚了,但不管怎样,它可以帮助别人。输入类型“time”输出您输入的时间的字符串表示形式。如果您打算从这个“时间”字符串中获取一个typescript日期对象(出于某些原因),我建议您查看输入类型,然后将其值转换为typescript日期对象,作为新日期(您的输入值)
。 下面是一个示例代码(我使用的是反应形式和角度材质):


你到底面临什么问题?您是否尝试过使用
String
存储时间?如有疑问,请访问.@m.spyratos。HTML5有输入类型时间。我只是想问一下如何使用typescript,angular 2Time是输入类型。但输入的结果是字符串。所以你需要有
publicstartdatetime:String。通过执行以下操作可以看到这一点:
console.log(typeof this.startDateTime)
type
的本机属性,它可以有许多值,包括字符串
time
,以表示“time”类型的输入。你能提供更多关于“如何使它与typescript和Angular2一起工作”的详细信息吗?类型=angular5中的时间不返回字符串或无法绑定到它,我面临同样的问题。
<form [formGroup]="meetingForm" novalidate autocomplete="off">
.............. other input fields .....................
<input matInput 
type="datetime-local" 
placeholder="Start Time" 
formControlName="meetingStartTime">
....................................
</form>
.........other codes................
constructor(formBuilder:FormBuilder, ...){}
...............................
let meetingStartTimeFormControl = this.meetingForm.get('meetingStartTime') as FormControl;
this.startDateTime = new Date(this.meetingStartTimeFormControl.value);
console.log(this.startDateTime)