简体   繁体   中英

Quasar popup calendar to show current date

I need a little help with getting a Quasar vue popup q-date to default to show the current date. I can hard coded any date and it works fine but I can't get it to work for a variable of current date. I have a small sample code at

<div id="q-app">
  <div class="q-pa-md" style="max-width: 300px">
    <q-input filled v-model="date" mask="##/##/####" :rules="[checkDate]">
      <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()"  mask="MM/DD/YYYY"></q-date>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</div>

Codepen Example

I figured out what I needed.
I had to add

 beforeMount(){
  this.getCurrentDate();
},

and in the getCurrentDate I had to set

  this.date = Today;

Put getCurrentDate method to data's date value for default.

  <q-date
    v-model="date"
    minimal
  />

and place this in the script date: Date.now()

<q-date today-btn v-model="date" @input="() => $refs.qDateProxy.hide()" mask="MM/DD/YYYY" >

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM