0

I've recently noticed in my web application, but bizarrely, not for every user, that the date formats of my inputs which have the date input type, has been somewhat wrong, the format that I need is: YYYY-MM-DD, which for most of the time seems to work fine, or at least in my web browser in Safari and Chrome, I've tried to replicate the issue of the incorrect format on my smartphone, but can't figure out why the format is wrong.

The wrong format that I'm getting is: YYYY-DD-M, for instance: 2021-22-2, which isn't right at all, I'm wondering if there's anything that I'm missing from my HTML input, or anything that might be causing this weird format:

<input type="date" name="income" required>

To the best of my knowledge, the date input type will format dates correctly? So how would a user be able to bypass this?

Now, I do also have a few hidden inputs that also contain dates, and it's here where I also see the incorrect format, so I have a few functions that essentially get the date, two dates, in the future, and but in my tests, they give the correct value...

function addDaysToDate (date = new Date(), days) {
  const today = new Date(date)
  today.setDate(today.getDate() + days)
  return today
}

function reverseDateStr (str) {
  return str.split('/').reverse().join('/')
}

function getPaydates (
  now = new Date(),
  nextDaysFromNow = 20,
  followingDaysFromNow = 40
) {
  const next = new Date(addDaysToDate(new Date(now), nextDaysFromNow)).toLocaleDateString()
  const following = new Date(addDaysToDate(new Date(now), followingDaysFromNow)).toLocaleDateString()

  return {
    next: reverseDateStr(next).split('/').join('-'),
    following: reverseDateStr(following).split('/').join('-')
  }
}

// usage:
const paydates = getPaydates()

// returns...
// { next: '2021-03-02', following: '2021-03-22' }

So I have no idea if I'm missing something which would cause my dates to sometimes be: YYYY-DD-M, can anyone see anything obvious?

Ryan H
  • 2,620
  • 4
  • 37
  • 109
  • 2
    You are using `Date.toLocaleDateString()`. There is no guarantee whatsoever how this will look in a particular browser in a particular locale ... For instance in chrome in german locale this will look like "10.2.2021" so all your parsing will fail. If you need a certain format for your date, build it yourself or use a 3rd party library for formatting. See for instance this answer https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date – derpirscher Feb 10 '21 at 07:51
  • The simplest approach would be using `date.toISOString().substr(0,10)` which will extract the date part of an `YYYY-MM-DDTHH:MM:SS.FFFZ` iso timestring. But be aware, that that timestamp is always UTC, thus your datestring may be off by one – derpirscher Feb 10 '21 at 07:59
  • So instead of `Date.toLocaleDateString().` you're suggesting to use `Date.toISOString()` and then use `substr`? – Ryan H Feb 10 '21 at 08:53
  • That's one possibility, but has a pitfall, that depending on the timezone you (or your users) are in, the date might be off by one day. Or you have a look at the many anwers to the question I linked. I'm sure, one approach there will fit your needs ... – derpirscher Feb 10 '21 at 08:56
  • Your issue is using *toLocaleString* to format dates. See [*How to format a JavaScript date*](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date?r=SearchResults&s=1|1770.7354), in particular [*this answer*](https://stackoverflow.com/a/3552493/257182). – RobG Feb 10 '21 at 09:12
  • @RobG You realize that's exactly the same comment as my first comment (even the same question linked) – derpirscher Feb 10 '21 at 09:13

0 Answers0