Tips for working with dates

[vinnyc]

Hi folks, just looking for some general advices when working with dates. I get its painful in any language/framework, but perhaps someone could share some good practices.

I’m using q-date, and to my understanding dates have to be a String right? I was storing them on yyyy-mm-dd at mongodb just to make it sortable, but I need to present in dd/mm/yyyy. It became a real nightmare trying to do conversions back and forth from model to view and back.

I was thinking and moving all dates on mongodb to be real Date() objects, but then the q-date object would not work. Is there a way to work around this to work with javascript Date() objects?

My last resort would be store everything on the model as strings on the right locale, and transform them before insertion and deserialize on reads, but that also seems a bit overwhelming.

Open to any suggestions here.

Cheers

[dobbel]

@vinnyc

Did you see this:
https://quasar.dev/quasar-utils/date-utils

I was thinking and moving all dates on mongodb to be real Date() objects

I would do that…

, but then the q-date object would not work. Is there a way to work around this to work with javascript Date() objects?

Yes convert / format using the date-utils.

[vinnyc]

@dobbel Thanks I’ve seen and am using it, to do the whole conversion to different formats. My question was more about if my model uses only dates, then the v-model binding of q-date can’t be applied to the model itself correct? I did not see any way to do this, besides adding a string version of the date to my model, which I would like to avoid.

I guess what I was hoping is a hook to allow the value shown on the date field to be parsed/formatted before modifying the model or reading from it. It this is not possible then I guess doing all the conversion before insert/read is the only way right?

[dobbel]

@vinnyc

Take a look at this code sample:
https://github.com/controledigital/quasar-solutions/blob/master/components/cInputDate.vue

It uses q-date component that has a model that is a computed property with get/set. It uses 2 models indeed , as you suggested.

calendarModel: {
      get: function () {
        return this.Model || ''
      },
      set: function (value) {
        if (new Date(this.Model).getDate() !== new Date(value).getDate()) this.$refs.popup.hide()
        this.Model = value
        this.isValid = true
      }
    },

[vinnyc]

Thanks again, this is giving me some ideas on where to go. I may just do the conversion on the service calls, instead of using two models.