question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow mat-datepicker to return a string instead of a date object.

See original GitHub issue

Please describe the feature you would like to request.

Allow for the mat-datepicker to return a string, instead of a Date object.

What is the use-case or motivation for this proposal?

I am currently attempting to use mat-datepicker, with the Angular Form Builder. The only issue, is that mat-datepicker will return the selected value as a Date object instead of a string. This does not allow for the value to be immediately passed in from the mat-datepicker into a formGroup, and then sent as a request to the server without first converting it to a string. In an app that heavily uses date-picker it requires a new component to be built on top of mat-datepicker.

Is there anything else we should know?

The following is a stackblitz, which re-iterates point that the mat-datepicker returns an object, instead of the expected string. You will have to open up console in order to see value.

If you have any recommendations on how to provide a value from a module side of things, so that mat-datepicker returns a string instead of a date object, it would be very much so appreciated. Thank you.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:14
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
Qocotzxincommented, May 21, 2019

No, of course it will not solve the issue since it’s only a workaround, and even more, this way you only get the value exactly as you see it on screen. So, if you look for example something more like a JS date string you would have to use toString() method from Moment.

As far as I know the best (?) way to get this solved is through the adapter. I was finally able to do it by creating a custom adapter extending moment one, but the parse method would only allow as return value ‘null’ or ‘Moment’ so we are still missing the string you mention. I’m guessing that just adding a new return type will be the solution for the string issue, and should be the more elegant way to avoid extra logic since the adapter is the only ‘place’ where you always have to pass if you use the datepicker component. I totally support that, it would be a great feature to avoid unncessary extra parsing before sending a request and you even could choose what kind of string you wanna get since the adapter allows to apply different logics.

1reaction
SamiSulcommented, Aug 25, 2022

guess they won’t add it huh

Read more comments on GitHub >

github_iconTop Results From Across the Web

Convert a mat-datepicker into a String - Stack Overflow
I want to get the date in a String (for example : "YYYY-MM-DD") and not an object. Currently, the html template of my...
Read more >
Allow mat-datepicker to return a string instead of a date object.
Please describe the feature you would like to request. Allow for the mat-datepicker to return a string, instead of a Date object.
Read more >
Datepicker in Angular using mat-datepicker | Material Design
Date picker is a component which allow users to choose a date from the ... Object): string { if (displayFormat === 'input') {...
Read more >
Datepicker | Angular Material
A label for the last date of a range of dates (used by screen readers). ... opens in a dialog rather than a...
Read more >
Angular 12 Material Datepicker Parse Custom Date Format of ...
If we don't import any adapter the Material will return this error: ERROR Error: MatDatepicker: No provider found for DateAdapter. You must ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found