8

Here is my simple code that works only for 'title'. 'docdatetime' control appears blank. What am I doing wrong?

//template ===================================================
<div class="form-group">
  <input type="text" id="title" formControlName="title" class="form-control">
</div>

<div class="form-group">
  <input type="datetime-local" id="docdatetime" formControlName="docdatetime" class="form-control">
</div>

//component.ts ===============================================
import { FormGroup, FormControl } from '@angular/forms';
..... 

export class..... 
    docForm: FormGroup;

    ngOnInit() {
        let docTitle = 'My first document';
        let docDate = 'Jun 15, 2015, 9:43:11 PM';
        this.docForm = new FormGroup({
            'title': new FormControl(docTitle),
            'docdatetime': new FormControl(new Date(docDate))
        });
    }   

enter image description here

3 Answers 3

15

The reason for this error is that the DatetimeLocal property on the input requires a very specific format, being YYYY-MM-DDTHH:MM:SS.SSS. This format is known as an ISO Date. So to fix your error, you have to pass in a date in that format. HOWEVER, an actual ISO Date's format is YYYY-MM-DDTHH:MM:SS.SSSZ. The Z refers to the timezone, which is always zero UTC offset. Look here for information on ToISOString(). So, an easy fix for that is to simply slice off the last character, which will always be the character Z in the new Date().toISOString().

let docTitle = 'My first document';
let docDate = 'Jun 15, 2015, 21:43:11 UTC'; //You'll want to change this to UTC or it can mess up your date.
this.docForm = new FormGroup({
    'title': new FormControl(docTitle),
    'docdatetime': new FormControl(new Date(docDate).toISOString().slice(0, -1))
});

NOTE

This means that the value you receive from that input will NOT be an actual Date. It'll be a string. So if you need it to be a date later on, make sure you create a New Date() using the value of the string and you should be good to go.

2
  • Thank you Jun Kang.. It works perfect.. I just had to restart Visual Studio Code and clean browser's cache..
    – VladP
    Oct 12, 2017 at 19:46
  • 2
    Hey if you have a Date prompt (not Date/Time) you will need to do new Date(this.editProduct.purchasedDate).toISOString().substr(0, 10);
    – Jess
    Dec 12, 2018 at 19:17
0

Try adding to the ngOnInit part to the following:

this.docForm.controls['docTitle'].setValue('My first document');
this.docForm.controls['docDate '].setValue('Jun 15, 2015, 9:43:11 PM');
3
  • I'd like to use FormGroup/FormControl concept
    – VladP
    Oct 12, 2017 at 17:31
  • 1
    This is using the concept. This solution is based on a similar problem I had here: stackoverflow.com/questions/46457401/… Edited the answer to "add" instead of change. Basically add this after you have instantiated the formgroup. Oct 12, 2017 at 17:32
  • it doesn't work either. Something wrong with the date/time control itself maybe!? When I submit the form I can see in console logs that the value is correct 'Jun 15, 2015, 9:43:11 PM'.. But it's blank in the browser window
    – VladP
    Oct 12, 2017 at 17:49
0

I had similar problems, I solved it by converting the date/time, before sending to the server.

Exemple (UTC Brazil):

typed "15/12/2020 22:30:00"

result: '2020-12-16T01:30:00.000Z'

You convert using:

var date = new Date('2020-11-06T01:30:00.000Z');
console.log(date.toLocaleDateString());
console.log(date.toLocaleString());
console.log(date.toLocaleTimeString());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.