0

the following function receives an event from the Angular Material Design DatePicker and shall print it to the console:

  applyFilter(event: MatDatepickerInputEvent<Date>) {

     console.log(`${event.value}`); // prints the selected date

     console.log(event.value); // prints some weird object
  }

But they are each printing a different output to the console. The first prints the actual selected date, the second one prints some weird object to the console.

This is the console output: This is the console output

This is my DatePicker:

    <mat-form-field>
        <mat-label>Anfangsdatum</mat-label>
        <input matInput (dateInput) = "applyFilter($event)" [matDatepicker] = "startDatePicker">
        <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #startDatePicker></mat-datepicker>
    </mat-form-field>

I just want to get the date the user picked using the DatePicker from Angular Material Design, but it seems like that this overly complicated. Can someone please help me?

Walnussbär
  • 567
  • 5
  • 19

1 Answers1

2

You are seeing two different values.

When you call console.log(new Date()) you will get the actual date object. (replace new Date() with any date object such as your event.value)

This object is the weird object that you speak of. It's simply a Date which has all kinds of methods available to help you. But in the end, all a Date is actually is a Number that represents milliseconds since 1 January 1970 UTC, then a bunch of helper functions with it.

One of those helper functions is .toString().

When you call console.log(`${new Date}`); you are creating a date object, then putting it inside a template literal (the backticks). This template literal calls the .toString() of the date object to convert it to a string, as you are asking for a string with a template literal. So you get the string representation of the Date object. (It's actually a bit more complex than that per this post, it's not always the toString() method per this post).

So if you want the string value, use the template literal or just call event.value.toString(). If you want the date object so you can do things with it (use the full date object and all its abilities per the documentation linked at the top)... use the date object. If you have other questions, feel free to comment.

Edit:

I don't think it's the actual date object. Check out the API. You are getting the object you are expecting, but it may be the one described in this API. I noticed they both have the add method in the prototype. Either way, it's an object vs the string representation. I tried to find the type definition since I'm assuming you are in Typescript, that should list all the methods available to you.

Diesel
  • 5,099
  • 7
  • 43
  • 81
  • Thank you very much, this explanation makes sense to me! I got another question: When I say date: Date = new Date(), I get an intance of Date class and can access all its mehtods, like setHours(...) But when I bind my Date object to a DatePicker, I cannot use the Date methods like setHours() on the binding result and I always have to cast the result to a Date object. Do you know why this is? – Walnussbär Aug 02 '20 at 18:40
  • They may be actually different objects. When you say you can't use Date methods, are you saying Typescript won't let you? It maybe the API I linked and not actually a date object – Diesel Aug 02 '20 at 19:34
  • The compiler does not complain, but I can see in the developer console of the browser the output saying that e.g. setHours() is not a function when I try to call that method without casting to Date. I thought that the Angular DatePicker creates normale Date instances, but it seems not. – Walnussbär Aug 02 '20 at 19:51
  • Nah I think it's the type described in that API. I'm not sure which type the value is, but I bet it has a property to a date object. – Diesel Aug 02 '20 at 21:08
  • I gonna check that today and let you know. Thanks anyway for support :) – Walnussbär Aug 03 '20 at 08:12