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

[CharlieGreenman]

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.

[Qocotzxin]

Hi! I have a problem changing the business logic of datepicker and I came across with the issue you mention. As a simple workaround if you use the moment-date-adapter, you can easily access the value as a string by using String(formValue.creationData().input). You are gonna have to type the value you get as Moment (the interface) so you can get the methods. Hope it helps!

Sorry the wrong tag before!

[CharlieGreenman]

@Qocotzxin thank you for commenting! If I may, I'm not sure if this solves my personal use case. For instance, would you be able to include this with FormControl/FormGroup, without having to convert the Date() object to a string first? Thank you

[Qocotzxin]

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.

[jasonhjohnson]

Hi, any updates on this? Is there a way to return a string without doing extra formatting before sending to backend services?

[BenLune]

Hi, Just spent a few hours to check how to return a string into my form rather than a full object (Luxon DateTime in my case). Even with a custom Adapter it seems to not be possible... So I have two possibilities, working at FormControl level by adding a second form control (plugged into my form), listening to datePicker change, then applying the string version of the date picker value. Or listening to my form valueChanges, and then, look at DateTime objects in the form and transform them into string before sending to back-office. I wonder why so much complexity for such a (seems to be) simple problem. Maybe are there explanations ?

[CharlieGreenman]

Hey @BenLune feel free to join the github.com/razroo discord and we can chat about it https://discord.gg/KrujUmMC

[CharlieGreenman]

@BenLune what we did back then(i believe) is create layer over the mat-datpicker. Every time the value changes, take the date and return a string instead

[BenLune]

Hi @CharlieGreenman, Thanks a lot for your help, I will look at it a bit later :-)

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[BraedanR]

I am working with mat-datepicker and I'm having issues with timezones. Since this returns a Date object, it is formatted to the current timezone. It would be nice if it could return a string value of the selected date as the solution doesn't need to be timezone specific.

If there is anyway someone has found how to do this, that would be awesome if you shared :)

[AntennaTower]

guess they won't add it huh

[madhukarcharla]

@CharlieGreenman, I have a usecase where the matDateTimePicker is giving dateObject and directly saving the date in unexpected format, since I am expecting a string. I bound the ngModel with a date field directly referencing the backend object., in my case the browserDB indexedDB, is storing the date format and throwing error. How did you resolve the date picker to return in String format? Please help. Thank you.

[shayan-ghzl]

use it : const datetime = this.formControl.value.toDate().toISOString();

[znotdead]

use it : const datetime = this.formControl.value.toDate().toISOString();

The idea to have a string return is to make code cleaner, instead of walking through all your date fields in nested FormGroup you can just pass myForm.value directly to API. If you have 1 date field this kinda acceptable, not perfect but okay. if you have more complex structure code becomes uglier. So had to have a helper and run all 'form.value' structure through it to change Date objects with strings

[pestev]

Just found this issue. It was a surprise for me. I have a form control defined with a string value, and after selection, there is an object. I am using the date-fns adapter. As a workaround, I created a directive which transforms the Date object into a string. ` @Directive({ selector: '[matDatepicker]', standalone: true }) export class DatepickerAdapterDirective implements OnInit {

#format = inject(MAT_DATE_FORMATS).parse.dateInput; #control = inject(NgControl); #destroy = inject(DestroyRef);

ngOnInit() { this.#control?.control?.valueChanges?.pipe( takeUntilDestroyed(this.#destroy), ).subscribe( value => { const stringValue = format(value, this.#format); this.#control?.control?.setValue(stringValue, { emitEvent: false }); } ); } }

<input matInput [matDatepicker]="picker" formControlName="date"> `