QDate and Qtime together, with options

Coude

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!

Coude

@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 .

nededa

This post is deleted!

Coude

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

No More Posting New Topics!

QDate and Qtime together, with options