Value is not removed if set to null

[edgar-koster]

I currently have [email protected] with my quasar project

I have a datetime picker set as

<q-datetime-picker standard square dense filled
                ref="dtAssign"
                @input="funcCheckDate()"
                v-model="oAssign.dtStart"
                class="col-6 micpFormNoError micpIsRequired"
                :disable="!bCanSave"
                :lang="$store.state.oDefaultSettings.system.strDateLanguage"
                id="fld_asmnt_assign_dt_start"
                first-day-of-week="1"
                :date-options="dateOptions"
                :error="$v.oAssign.dtStart.$error"
                :error-message="$v.oAssign.dtStart.$error ? funcGetObjectTerm('oTemplateObjects', 'field', 'fld_asmnt_assign_dt_start', 'helptext') : ''"
                :label="funcGetObjectTerm('oTemplateObjects', 'field', 'fld_asmnt_assign_dt_start', 'label')">
</q-datetime-picker>

My check date function funcCheckDate and dateOptions are:

        dateOptions (date) {
            return date >= this.$moment(new Date()).format('YYYY/MM/DD');
        },
        funcCheckDate () {
            if (this.$moment(this.oAssign.dtStart).format('YYYY/MM/DD') < this.$moment(new Date()).format('YYYY/MM/DD')) {
                this.oAssign.dtStart = null;
            }
        },

For some reason, when check date is triggered by choosing a date and then manually changing it to e.g. 10/10/2018, the check date function is executed, but the value isn't removed in the datetime picker. An 'alert' in the function will show it is changed.

How can I clear the field via a script, to prevent incorrect user input

[TobyMosque]

@edgar-koster try this:

<q-datetime-picker :value="oAssign.dtStart" @input="funcCheckDate" />

funcCheckDate (value) {
  if (new Date(value).getTime() < new Date().getTime()) {
    this.oAssign.dtStart = null
  } else {
    this.oAssign.dtStart = value
  }
},

PS: anyway, i think u don't need momentjs at all, just look intro the date utils:
https://quasar.dev/quasar-utils/date-utils#Introduction

[edgar-koster]

Hmm not a difference. But... I now have you field next to the one I have and if I manually change your it changes mine :-). So change the first picker manually, the second is updated. Change the first via the picker, both are set (also the otherway around)

<q-datetime-picker
                :value="oAssign.dtStart"
                @input="funcCheckDate"/>
            <q-datetime-picker standard square dense filled
                ref="dtAssign"
                @input="funcCheckDate"
                v-model="oAssign.dtStart"
                class="col-6 micpFormNoError micpIsRequired"
                :disable="!bCanSave"
                :lang="$store.state.oDefaultSettings.system.strDateLanguage"
                id="fld_asmnt_assign_dt_start"
                first-day-of-week="1"
                :date-options="dateOptions"
                :error="$v.oAssign.dtStart.$error"
                :error-message="$v.oAssign.dtStart.$error ? funcGetObjectTerm('oTemplateObjects', 'field', 'fld_asmnt_assign_dt_start', 'helptext') : ''"
                :label="funcGetObjectTerm('oTemplateObjects', 'field', 'fld_asmnt_assign_dt_start', 'label')">
            </q-datetime-picker>

[edgar-koster]

Solved, put a timout of 500 around setting it. Thanks for the help

[TobyMosque]

probably that is happening because of one of this lines:

app-extension-qdatetimepicker/src/component/QDatetimePicker.js

Line 254 in 245d778

this.$nextTick().then(() => {

app-extension-qdatetimepicker/src/component/QDatetimePicker.js

Line 306 in 245d778

this.$nextTick().then(() => {

as u can see, some times the value is updated only at the next render cycle.
I still think u can handle this in the @input event, to this, u'll need to do the dual bind manually, replacing the v-model by :value with @input, or even a computed property.

<q-datetime-picker v-model="__dtStart"/>

export default {
  computed: {
    __dtStart: {
      get () {
        return this.oAssign.dtStart
      },
      set (value) {
        if (new Date(value).getTime() < new Date().getTime()) {
          this.oAssign.dtStart = null
        } else {
          this.oAssign.dtStart = value
        }
      }
    }
  }
}

of course, u workaround would work too, but i would use this only as a last resort, and that would work using a very small value, like 25 (in my opinion, 500 is too much and this can create a bad impression at the user)

[edgar-koster]

Hi Toby. This sample of yours works perfectly. One additional question to complete the picture. If I select a date, it is set in the field e.g. 30/08/2020. However, when I then 'backspace' the 0 from the date and leave the field it still remains as is. Is this related or do I need to trigger a blur or something.

Again, I now use your code sample.

[TobyMosque]

so, the QDatetimePicker try to ensure the value will be valid, so that would be null or a date in the format yyyy-MM-ddTHH:mm or yyyy/MM/ddTHH:mm.

mostly because of this, the input event will be emited only when of this actions are taken:
1 - the input is cleared (usign the clear button and clearing the input)
2 - the input's mask is filled (the value will be updated, even if the date inputed is invalid)

if the user type (2020/02/30), the value will be updated to 2020/03/01

3 - the user set a date using the QDate/QTime.

so, as long the mask isn't filled, the value will not be update... so if the type 30/08/2020 and after that delete the zero, the internal value will continue to be 30/08/2020

[edgar-koster]

okay perfect actually.

[tmezzena]

Hi. How can I force the input text (partial filled) go back to model value (null or valid date) when the focus is lost? It is strange keep the input showing different information from the model. I tried to force it on Blur event but this is not fired on this state (partial filled and loose focus).