Make input type time work with TypeScript and Angular2?

Question

On my EventCreate's TypeScript class, I have startDateTime and endDateTime properties with the datatype Date. HTML5 uses the input type time to get the time. I just want to ask: how do I make input type time work with TypeScript and 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>

What is exactly the problem you are facing? Have you tried using String to store the time? If in doubt, visit the documentation. — m.spyratos
– m.spyratos, Commented May 2, 2017 at 16:16
@m.spyratos . HTML 5 have input type time. just I want to ask how to make it work with typescript and angular 2 — NinjaDeveloper
– NinjaDeveloper, Commented May 2, 2017 at 16:25
Time is the input type. The result of the input though, is String. So you need to have public startDateTime: String;. You can see this by doing the following: console.log(typeof this.startDateTime); — m.spyratos
– m.spyratos, Commented May 2, 2017 at 16:46
type is a native attribute of <input> that can have many values including the string time to denote an input of type "time". Can you provide more detail on what you mean by : "how to make it work with typescript and angular 2 " — Ahmed Musallam
– Ahmed Musallam, Commented May 2, 2017 at 17:17
type=time in angular5 does not return a string or can't be binded to it, i'm facing the same trouble. — cajuuh
– cajuuh, Commented May 17, 2018 at 18:42

edmakalla · Accepted Answer · 2019-09-19 20:17:23Z

I know it's kind of late, but it can help someone anyways. Input type "time" outputs a string representation of of the time you entered. If you aim to get a typescript Date object from this "time" string (for some reasons), I would recommend you to take a look at the input type datetime-local and then convert its value to typescript Date object as new Date(your_input_value). Here is a sample code (I'm using reactive forms and angular material):

<form [formGroup]="meetingForm" novalidate autocomplete="off">
.............. other input fields .....................
<input matInput 
type="datetime-local" 
placeholder="Start Time" 
formControlName="meetingStartTime">
....................................
</form>

Then part of the component class will look something similar to this

.........other codes................
constructor(formBuilder:FormBuilder, ...){}
...............................
let meetingStartTimeFormControl = this.meetingForm.get('meetingStartTime') as FormControl;
this.startDateTime = new Date(this.meetingStartTimeFormControl.value);
console.log(this.startDateTime)

Collectives™ on Stack Overflow

Make input type time work with TypeScript and Angular2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related