Hi,

This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

<template>
  <q-field
    label="Your phone number"
    stack-label
    :error="isError">
    <vue-tel-input
      :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
      input-classes="input-vue-tel-input-in-qfield"
      @input="handleInput"
    >
    </vue-tel-input>
  </q-field>
</template>

<style>
/* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
.input-vue-tel-input-in-qfield {
  height:98%;
  margin-bottom: auto;
}

/* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
.wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
  color: var(--q-color-dark);
}
</style>

<script>
import { VueTelInput } from 'vue-tel-input';

export default {
  name: 'InputPhone',
  props: {
    //
  },
  components: {
    VueTelInput,
  },
  data() {
    return {
      isError: false,
    }
  },
  methods: {
    handleInput (val, objVal) {
      console.log(val, objVal);
      this.isError = !objVal.isValid;
    }
  },
}
</script>

Would someone have a simpler or easier way to do that?

@coude
I’m answering to myself. What I did works, but it seems too much for something so simple…

I put my code here for comments, and in case it might be useful for someone.

Here is the “html” part :

                  <q-card-section>
                        <q-toggle
                          v-model="showDateFin"
                        />
                      </q-card-section>
                      <q-card-section>
                        <div class="row justify-center q-px-md">
                          <keep-alive>
                            <q-date 
                              v-if="showDateFin"
                              key="dateFin"
                              v-model="dateFin" 
                              mask="DD/MM/YYYY HH:mm" 

                              :options="getOptionsDateFin" />
                          </keep-alive>
                          <q-time 
                            key="heureFin"
                            v-model="dateFin" 
                            mask="DD/MM/YYYY HH:mm" 
                            format24h

                            :options="getOptionsHeureFin" />
                        </div>
                      </q-card-section>

and the javascript part

import { parse, format , toDate, isAfter, isSameDay, setHours, setMinutes, getMinutes } from 'date-fns';
// (...)
    getOptionsDateFin (val) {
      let dateFin = parse(val, 'yyyy/MM/dd', new Date());
      let dateStart = toDate(parseInt(this.timestampStart));
      if(isSameDay(dateFin, dateStart)) {
        console.log(val, "same day");
        return true;
      }
      else if(isAfter(dateFin, dateStart)) {
        console.log(val, "after");
        return true;
      }
      console.log(val, "before");
      return false;
    },
    getOptionsHeureFin (hr, min) {
      console.log(hr, min);
      let dateStart = toDate(parseInt(this.timestampStart));
      if(!min) {
        min = getMinutes(dateStart) + 1;
        if(min === 60) {
          min = 0;
        }
      }
      let dateFin = parse(this.dateFin, 'dd/MM/yyyy HH:mm', new Date());
      let testDateFin = setHours( setMinutes(dateFin,min), hr);
      console.log(dateFin, dateStart, testDateFin);
      if(isSameDay(dateFin, dateStart)) {
        if( isAfter(testDateFin, dateStart) ) {
          return true;
        }
        return false;
      }
      else if(isAfter(dateFin, dateStart)) {
        return true;
      }
      return false;
    },

It might get simpler, but it works perfectly .

Hi,

It might have been asked somewhere, but I did not find it (I would think it might be a common use case).

I have a Qdate and a QTime, together using the same model, more or less like in the docs.

      <q-date v-model="model" mask="YYYY/MM/DD HH:mm" />
      <q-time v-model="model" mask="YYYY/MM/DD HH:mm"  />

I would like to use options in order to forbid date, and hours, before a given date-time (name startDate). That’s ok/easy for QDate, but how to do that with QTime?
In details: if the calendar date is after the startDate, that’s easy because there is no constraints for QTime ; but if both calendar date are the same (which should happen 99,9% of the time in my case), how can I ask QTime to forbid choices before the time-part of startDate ? Would you have any insight/ideas to give me?

Thank you very much for your help!

@s-molinari Thank you for your clear answer!

@s-molinari , @coude @Ben-Hayat and @dobbel have the same question, do you have any insight about it?
Thanks!

I looked for this question/info on the forum and github, but did not find it, so sorry if if has already been said or answered somewhere

How long do you plan to keep support/update the quasar v1? Do you plan to add new features in v1 too? For how long? Or will you only fix bugs and things like that?

Thanks!

@Hawkeye64 and @s-molinari Thank you for your answers!

@s-molinari Hi, any updates about the results?

Hi,

@currycode I would say that using v-model of the drawer and click event for elements inside it, it should do the work. You have some closely related examples in the docs

 <q-drawer
        v-model="showDrawer"
      >
        <q-scroll-area class="fit">
          <q-list>
            <q-item clickable v-ripple @click="showDrawer = !showDrawer">
              <q-item-section avatar>
                <q-icon name="inbox" />
              </q-item-section>
           </q-item>
(...)
        </q-list>
    </q-scroll-area>
 </q-drawer>

Hi,

This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

<template>
  <q-field
    label="Your phone number"
    stack-label
    :error="isError">
    <vue-tel-input
      :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
      input-classes="input-vue-tel-input-in-qfield"
      @input="handleInput"
    >
    </vue-tel-input>
  </q-field>
</template>

<style>
/* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
.input-vue-tel-input-in-qfield {
  height:98%;
  margin-bottom: auto;
}

/* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
.wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
  color: var(--q-color-dark);
}
</style>

<script>
import { VueTelInput } from 'vue-tel-input';

export default {
  name: 'InputPhone',
  props: {
    //
  },
  components: {
    VueTelInput,
  },
  data() {
    return {
      isError: false,
    }
  },
  methods: {
    handleInput (val, objVal) {
      console.log(val, objVal);
      this.isError = !objVal.isValid;
    }
  },
}
</script>