CODEWITHSUNDEEP
javascriptvue.jsquasar
Bill
Bill

Reputation: 1477

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

Upvotes: 2

Views: 4021

Answers (4)

Zaid Sayed
Zaid Sayed

Reputation: 1

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

Upvotes: 0

user14822434
user14822434

Reputation: 1

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

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

Upvotes: 0

Bill
Bill

Reputation: 1477

I figured out what I needed.
I had to add

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

and in the getCurrentDate I had to set

  this.date = Today;

Upvotes: 3

Ryan
Ryan

Reputation: 16

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

Upvotes: 0

Related Questions