How to assign value to datetime-local in a Reactive Form

Question

I am unable to assign value to `datetime-local element in a form.

Code from template:

Code from typescript file:

let dateTime : Date = new Date();

this.testForm = this.formBuilder.group({    
  'dateTime': new FormControl(dateTime),
});

Result:

What is the proper way to assign date & time to datetime-local using typescript

type datetime-local is a "string" type, so you can do this.testForm = this.formBuilder.group({ 'dateTime': '2017-06-01T08:30', });. Anyway, I suggested NOT use type datetime-local. This don't work in all navigators (e.g. you see as "normal" input in FireFox) — Eliseo
– Eliseo, Commented Apr 14, 2018 at 12:28
@Eliseo Thanks for your suggestion. Hard coded string works perfectly but I want to assign system's current date and time to the datetime-local. — Robert Williams
– Robert Williams, Commented Apr 14, 2018 at 12:37
use new Date().toString() or some like, see, e.g stackoverflow.com/questions/1056728/… — Eliseo
– Eliseo, Commented Apr 14, 2018 at 13:38

Yuvaraj V · Accepted Answer · 2019-05-02 11:06:09Z

8

datetime-local requires value in specific format (yyyy-mm-ddThh:mm)

You can try the following,

const dateTime = new Date();
this.testForm = this.formBuilder.group({    
  dateTime: new FormControl(dateTime.toISOString().substring(0, 16)),
});

edited May 2, 2019 at 11:06

answered May 2, 2019 at 10:59

Yuvaraj V

1,2323 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

testing · Accepted Answer · 2023-05-26 12:24:26Z

You can find the official docs here. Output from the console:

The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

I used DatePipe for this, but you could go with formatDate also (see here for more).

In your component:

import { DatePipe } from '@angular/common';

constructor(
    private datePipe: DatePipe
)

ngOnInit() {
    this.dateControl.setValue(this.datePipe.transform(this.defaultValues, 'yyyy-MM-ddTHH:mm:ss'));
}

In your module declarations (e.g. app.module.ts) add DatePipe:

import { DatePipe } from '@angular/common';

@NgModule({
    declarations: [
        AppComponent,
        // ...
    ],
    imports: [
        // ...

    ],
    providers: [
        DatePipe,
        // ...
    ],
    exports: // ...
    bootstrap: [AppComponent]
})
export class AppModule { }

Collectives™ on Stack Overflow

How to assign value to datetime-local in a Reactive Form

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related