0

I'm using vue.js v2. From my api I get an object with some date fields in ISO format but vue.js is not correctly displaying those value in an input tag.

<input type="date" class="form-control" v-model="lastPortalInvoiceDate">

Value found via the vue debug extension in Edge

"2022-02-06T23:00:00Z"

Value returned in JSON from api

{
    "data": {
        "portalInvoiceNumberPrefix": "I-{{BY}}-",
        "portalInvoiceFilePrefix": "ABC",
        "lastPortalInvoiceNumber": 1,
        "lastPortalInvoiceDate": "2022-02-06T23:00:00Z",
        "nextBookYearSwitchDate": "2022-02-10T23:00:00Z",
        "id": 1,
        "value": 1
    },
    "tenantId": 1,
    "responseType": "ok",
    "responseMessages": [
        "Successfully read PortalInvoiceConfig"
    ]
}

enter image description here

BrilBroeder
  • 1,409
  • 3
  • 18
  • 37

1 Answers1

0

Select a date with datepicker and see the changes in your data. You will see the output in format 'yyyy-mm-dd'. You must format your date. For this, you can split your time string to parse date only.

yourDateStr = yourDateStr.split('T')[0]; //if your date is "2022-02-06T23:00:00Z" format

Parsing with new Date(yourDateStr) will cause you trouble setting the right time zone. So, if you want a simple solution you could do just parse the date.

Saiful Islam
  • 13
  • 3
  • Does this depend on the regional setting of the users browsers ? – BrilBroeder Feb 08 '22 at 11:04
  • Browsers are unrestricted of how they present date format and it depends on browsers language setting and sometimes desktop's regional setting. See the existing answer from below post to know more. [Click here](https://stackoverflow.com/a/9519493/12257022) – Saiful Islam Feb 08 '22 at 11:32
  • Is your suggestion still is a solution if the date format of the user is not 'dd/mm/yyyy' ? – BrilBroeder Feb 08 '22 at 11:50
  • Yes, after parsing the data you can format it in format 'yyyy-mm-dd' to cope with HTML date input. Just format it right after fetching from your source. I suggest doing it after parsing the date just to avoid time zone-specific date conversion. In my timezone, "2022-02-06T23:00:00Z" becomes "Feb 07 2022 05:00:00 GMT+0600" [Notice the change of date]. While 2022-02-06 can be formatted in "06/02/2022" or "02-06-2022" or anyway you like. – Saiful Islam Feb 08 '22 at 12:06