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.

Browser hangs when DatePicker's Input is bound to a function that returns Date translated from a string

See original GitHub issue

Bug:

input mdInput’s ngModel bound to a function that returns a Date object “hangs” the page.

What is the expected behavior?

The datepicker should display the date that represents the original date string.

What is the current behavior?

The browser page “hangs” (stack overflow likely).

What are the steps to reproduce?

https://plnkr.co/edit/icHhtOd4493dnc41uaY7?p=preview

If the component code is changed to the following, the browser page hangs:

private _myDate = '2016/12/25';
get myDate(): Date { return new Date(this._myDate); }
set myDate(newValue: Date) { /* irrelevant*/ }

What is the use-case or motivation for changing an existing behavior?

The model object has the dates in string format (ISO 8601 in real code), which should be the first class citizen just like Date.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular-material beta10

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
another-guycommented, Sep 12, 2017

Tracking for use of ISO 8601 strings: #6265 (comment)

@willshowell Subscribed, Thanks a ton!

Read here about setting up a date adapter to parse whatever you want in the mean time: #6773

Implementing the DateAdapter that works with ISO8601 string as a single representation is cumbersome, but I am trying to do that now…

Is it a requirement that your form model strictly uses strings? Why not just convert it to a date object once and pass that around instead?

Yes, it is an [internal technical] requirement. It is VERY painful to deal with Date in our JS code (that includes in-/out- translations on client-server communication). On our project we decided to use ISO8601 string as a single date, time, or date/time representation everywhere across the code base.

In JS we only use ephemeral Date objects when it comes to date/time arithmetic. As soon as the calculations are done, we translate the result into ISO8601 string again and lock it there.

I can not claim that most of the projects are following the same approach, but I believe that many do. Keeping in mind how painful dealing with Date can be in JS, back-end, databases, and across the board, I personally think that ISO8601 should be used as a base for the alternative native DateAdapter.

1reaction
another-guycommented, Sep 12, 2017

As a work in progress I got this (which is dependent on date-fns): Sorry for tons of console.xxx() – still debugging this messy beast.

Please, see code in Gist: https://gist.github.com/another-guy/adc2d9d731af7693fdbfab21b1e227a9#file-iso8601datestringadapter-ts

Read more comments on GitHub >

github_iconTop Results From Across the Web

Browser hangs when using datepicker
Safari and Chrome will hang when a date is picked, and then will provide a seemingly random date. We tested pressing "Today" along...
Read more >
Add support for passing IOS8601 strings to datepicker ...
Browser hangs when DatePicker's Input is bound to a function that returns Date translated from a string #6995.
Read more >
jQuery Datepicker hangs when input field is re-clicked (Chrome)
You are creating an infinite loop here. The cause of the problem is on line 7: $(this).datepicker("setDate", dt);.
Read more >
<input type="datetime-local"> - HTML - MDN Web Docs
This value must specify a date string later than or equal to the one specified by the min attribute.
Read more >
Date picker – pickadate.js - Amsul
The basic setup requires targetting an input element and invoking the picker: ... NOTE: months in a JavaScript Date object are zero-indexed. Meaning,...
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