[V1] QDate\QInput default of now?

[rconstantine]

I’ve been poring over the docs but can’t seem to figure out how to set a QInput to a default date of now, when a QDate is ‘inside’, similar to how it’s shown on the QDate docs. Shouldn’t it default to now?

<q-input
          filled
          v-model="startDate"
          mask="date"
          :rules="['date']"
          label="Start Date/Time"
          class="float-left q-ml-sm"
        >
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy>
                <q-date
                  v-model="startDate"
                  color="deep-purple-14"
                  today-btn
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>

At this point, the QInput starts out as blank. What am I missing? Do I just set it myself? If so, do you recommend JavaScript’s Date or Moment?

[s.molinari]

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

Scott

[Dapeng]

@s-molinari in my application, instead of using the two-way binding “v-model”, I need to use the one-way binding “:value” combined with “@change” event. With the old <q-datetime> I can do it like this:

<q-datetime :value="birthday" @change="val=>{updateBirthday(val)}" type="date" format="MMM DD, YYYY"/>

Could you give an example how to do one-way binding (:value + @input) in QInput + QPopupProxy + QDate?

Thanks.

[s.molinari]

It’s the same.

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

You certainly could have figured that our yourself, couldn’t you?

Scott

[Dapeng]

@s-molinari Thanks so much.
I have to say that I’m an amateur programmer.
I did try something that I put the “:value / @input” in both QInput and QDate and it didn’t work. So I came here to ask for help from expert.

I found what I did wrong is actually the date string format of the model. Seems the format has to be “YYYY/MM/DD”. Although the example on Quasar site does show it, the documentation for the QDate->API->Model->value doesn’t explicitly specify this format.

[jeffatpf]

@s-molinari So, we’e like to start the user experience in selecting a date with an empty input. When you set the initial date to ‘undefined’ in your codepen the input is empty (great) but when the selector is displayed the q-date header is blank/broken (not great). Any ideas? It’s like the q-date selector should default to a default date.

[s.molinari]

You can do something like this? https://codepen.io/smolinari/pen/VwYKZPX

Or split the models and only update the input on a model change from QDate???

Scott

[jeffatpf]

@s-molinari
Thanks, I can work with that. Much appreciated.