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

Closed
Justgo13 opened this issue Nov 5, 2024 · 1 comment
Closed
Labels
wontfix This will not be worked on

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
@Jasenkoo
Copy link
Contributor

This is expected behavior, as it needs a reference to be able to open the required picker, which in this case is unknown

@Jasenkoo Jasenkoo added wontfix This will not be worked on and removed bug Something isn't working awaiting triage The issue is not reviewed by the maintainers labels Dec 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

2 participants