[Solved] [V1] QDate does not work with Unix timestamp but it works in V0.17.x with QDatetime

[Stanley]

In V0.17.x, there is a component called QDatetime, it works well with Unix timestamp or a String representing a date(E.g. 1497159857411, Sun Jun 11 2017 08:44:42 GMT+0300).

In V1 version, I tried below two methods, neither is working.

<q-input v-model="date" filled type="date" hint="Native date"/>

It only accepts date format yyyy-mm-dd

<q-input filled v-model="date" mask="date" :rules="['date']">
  <template v-slot:append>
    <q-icon name="event" class="cursor-pointer">
      <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
        <q-date v-model="date" @input="() => $refs.qDateProxy.hide()" />
      </q-popup-proxy>
    </q-icon>
  </template>
</q-input>

It only accepts the string date format with different mask, but not including Unix timestamp.

I know we can use below function to do it, but it needs additional effort every time.

import { date } from 'quasar'

let timeStamp = Date.now()
let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')

[s.molinari]

Maybe this might get you where you want to be?

https://codepen.io/smolinari/pen/OYKyGq

Scott

[Stanley]

@s-molinari Thanks Scott!
But I am afraid this may not solve my problem.
My issue is for example, I got some date data from API call, the date format is Unix timestamp (E.g. 1497159857411), so how to show it using QDate?

I know I can use the syntax date.formatDate(timeStamp, ‘YYYY-MM-DD’) to convert it manually, but it needs the extra effort every time. As you know, QDatetime in V0.17.x supports Unix timestamp.

So is that possible that QDate supports Unix timestamp directly?

[s.molinari]

No. Unfortunately not, AFAIK. You have to reformat it to the new date format. You could create your own custom date input component, which has a “built-in” reformatting. So, you make it only once and use it everywhere.

Scott

[Stanley]

@s-molinari Get it. Thanks for your help!

[rstoenescu]

@Stanley also check out https://quasar.dev/vue-components/date#Model-mask and https://quasar.dev/vue-components/time#Model-mask

[Stanley]

@rstoenescu I may not catch you point. Do you mean it is not possible to accept Unix timestamp?

[s.molinari]

No. You can work with Unix timestamps, you just have to reformat the timestamp to a format the component will work with. The formatting Razvan linked to is for formatting the text output of QInput (which you’d need for making your custom date/time component).

Scott