Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flow with custom time picker is not keeping track of the flow step #1030

Open
Justgo13 opened this issue Nov 5, 2024 · 0 comments
Open

Flow with custom time picker is not keeping track of the flow step #1030

Justgo13 opened this issue Nov 5, 2024 · 0 comments
Labels
awaiting triage The issue is not reviewed by the maintainers bug Something isn't working

Comments

@Justgo13
Copy link

Justgo13 commented Nov 5, 2024

Describe the bug
When i add the custom time picker from the documentation https://vue3datepicker.com/slots/components/#time-picker then utilize auto-apply with flow=[calendar, hours. minutes] it is considering each calendar date pick as a new flow step

<template>
  <div>
    <Datepicker v-model="date" :flow="flow" auto-apply>
      <template #time-picker="{ time, updateTime }">
        <div class="custom-time-picker-component">
          <select
            class="select-input"
            :value="time.hours"
            @change="updateTime(+$event.target.value)"
          >
            <option v-for="h in hoursArray" :key="h.value" :value="h.value">
              {{ h.text }}
            </option>
          </select>
          <select
            class="select-input"
            :value="time.minutes"
            @change="updateTime(+$event.target.value, false)"
          >
            <option v-for="m in minutesArray" :key="m.value" :value="m.value">
              {{ m.text }}
            </option>
          </select>
        </div>
      </template>
    </Datepicker>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
const flow = ref(['calendar', 'hours', 'minutes']);
const hoursArray = computed(() => {
  const arr = [];
  for (let i = 0; i < 24; i++) {
    arr.push({ text: i < 10 ? `0${i}` : i, value: i });
  }
  return arr;
});

const minutesArray = computed(() => {
  const arr = [];
  for (let i = 0; i < 60; i++) {
    arr.push({ text: i < 10 ? `0${i}` : i, value: i });
  }
  return arr;
});
</script>

To Reproduce
Steps to reproduce the behavior:

  1. Click three different dates without touching time
  2. Calendar closes because the flow step is increasing when i click a new date on the calendar

Expected behavior
I expect the calendar to only close when i click a calendar date followed by hour then minute

@Justgo13 Justgo13 added awaiting triage The issue is not reviewed by the maintainers bug Something isn't working labels Nov 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting triage The issue is not reviewed by the maintainers bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant