Show v-calendar date picker only in click even

Question

I have a v-calendar date picker with two inputs, I want to show the date picker only on click event, and for each input. I have this but it shows just for the first one!.

               <v-date-picker is-range is-dark v-model="dateRange" mode="dateTime">
                  <template v-slot="{ inputValue, togglePopover }">
                    <b-row>
                      <b-col>
                          <b-form-group label="Last update Start">
                            <b-form-input readonly v-model="inputValue.start" @click="togglePopover()"></b-form-input>
                          </b-form-group>
                      </b-col>
                      <b-col>
                          <b-form-group label="Last update Start">
                            <b-form-input readonly v-model="inputValue.end" @click="togglePopover()"></b-form-input>
                          </b-form-group>
                      </b-col>
                    </b-row>
                  </template>
                  <template v-slot:footer>
                    <div class="p-2 d-flex flex-row">
                      <b-select :disabled="loading" v-model="selectedUpdate" :options="options.last_update" @input="updateDateRanges"></b-select>
                      <b-button variant="outline-danger" @click="clearDateRange">Clear</b-button>
                    </div>
                  </template>
                </v-date-picker>

• I tried one input but it return object for the input value, which I can't re-format, because I need that object(In Backend).
• using two inputs(datepickers) are not good options for UX.