N
Nuxtβ€’2w ago
Karlstens

Block an array of dates from Calendar

Hi everyone, this is my first time to the world of Nuxt. I'm here off the back of this tutorial; https://www.youtube.com/watch?v=DvcHPR0CVpc I've now learning about input Date, and have attempted the following to block specific dates from being selected. Max and Min works, and I can't pick dates as expected. But I'd also like to load an array of dates that are also blocked. 
// Computed property for minimum date
const minRequestDate = computed(() => {
    const today = new Date();
    const minDate = new Date(today.setDate(today.getDate() + 2)); // Add 2 days
    return minDate.toISOString().split("T")[0]; // Format as YYYY-MM-DD
});

const maxRequestDate = computed(() => {
    const today = new Date();
    const minDate = new Date(today.setDate(today.getDate() + 50)); // Add 50 days
    return minDate.toISOString().split("T")[0]; // Format as YYYY-MM-DD
});

// Function to dynamically disable dates
const disableDate = (date: Date) => {
    const formattedDate = date.toISOString().split("T")[0];
    const minDate = new Date(minRequestDate.value);
    return new Date(formattedDate) < minDate || blockedDates.includes(formattedDate);
};
</script>
// Computed property for minimum date
const minRequestDate = computed(() => {
    const today = new Date();
    const minDate = new Date(today.setDate(today.getDate() + 2)); // Add 2 days
    return minDate.toISOString().split("T")[0]; // Format as YYYY-MM-DD
});

const maxRequestDate = computed(() => {
    const today = new Date();
    const minDate = new Date(today.setDate(today.getDate() + 50)); // Add 50 days
    return minDate.toISOString().split("T")[0]; // Format as YYYY-MM-DD
});

// Function to dynamically disable dates
const disableDate = (date: Date) => {
    const formattedDate = date.toISOString().split("T")[0];
    const minDate = new Date(minRequestDate.value);
    return new Date(formattedDate) < minDate || blockedDates.includes(formattedDate);
};
</script>
const blockedDates = ["2025-02-01", "2025-02-02", "2025-02-03"].map(date => new Date(date).toISOString().split("T")[0]);
const blockedDates = ["2025-02-01", "2025-02-02", "2025-02-03"].map(date => new Date(date).toISOString().split("T")[0]);
Keen to understand tutorial resources for this kind of question too.
John Komarnicki
YouTube
My Favorite Way To Build Forms With Validation In Nuxt
πŸ“• Nuxt Course: https://www.learnnuxt.dev/ πŸ› Save 15% at checkout with code NUXT_UI Video Resources https://ui.nuxt.com/ https://zod.dev/ In this video, learn how to create a basic form with validation using Nuxt UI and Zod. Other Resources πŸ“• Vue 3 Course: https://johnkomarnicki.gumroad.com/l/tqrmw πŸ€– Website: https://johnkomarnicki.com/ 🐦 Twit...
No description
2 Replies
kapa.ai
kapa.aiβ€’2w ago
Hi @Karlstens. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't have specific information about blocking an array of dates in a Nuxt calendar component as you've described. However, I can provide some guidance based on the DatePicker component from Nuxt UI, which might be helpful for your use case. The Nuxt UI library includes a DatePicker component that is built with v-calendar. While the exact implementation you're looking for isn't shown in the provided sources, the DatePicker component does offer customization options that might help you achieve what you want. Here's an example of how you might use the DatePicker component from Nuxt UI: 
<script setup lang="ts">
import { ref } from 'vue'
import { format } from 'date-fns'

const date = ref(new Date())

// Your blocked dates array
const blockedDates = ["2025-02-01", "2025-02-02", "2025-02-03"]

// Function to check if a date is blocked
function isDateBlocked(date: Date) {
  return blockedDates.includes(format(date, 'yyyy-MM-dd'))
}
</script>

<template>
  <UPopover :popper="{ placement: 'bottom-start' }">
    <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />

    <template #panel="{ close }">
      <DatePicker 
        v-model="date" 
        is-required 
        @close="close"
        :disabled-dates="isDateBlocked"
      />
    </template>
  </UPopover>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { format } from 'date-fns'

const date = ref(new Date())

// Your blocked dates array
const blockedDates = ["2025-02-01", "2025-02-02", "2025-02-03"]

// Function to check if a date is blocked
function isDateBlocked(date: Date) {
  return blockedDates.includes(format(date, 'yyyy-MM-dd'))
}
</script>

<template>
  <UPopover :popper="{ placement: 'bottom-start' }">
    <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />

    <template #panel="{ close }">
      <DatePicker 
        v-model="date" 
        is-required 
        @close="close"
        :disabled-dates="isDateBlocked"
      />
    </template>
  </UPopover>
</template>
In this example, we're using the disabled-dates prop of the DatePicker component to pass a function that checks if a date should be disabled. This function checks if the date is included in the blockedDates array. Please note that this is a simplified example and may need to be adjusted based on the exact implementation of the DatePicker component you're using. For more detailed information and examples, you can refer to the Nuxt UI DatePicker documentation. As for tutorial resources, the Nuxt documentation is generally a good place to start. However, for this specific use case with date pickers and blocking dates, you might need to look into the documentation of the specific date picker library you're using (like v-calendar in this case). Remember that you'll need to install the necessary dependencies like v-calendar and date-fns as mentioned in the DatePicker installation section. I hope this helps point you in the right direction. If you need more specific information, you might want to check the documentation of the date picker library you're using or ask a more targeted question about that library. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.aiβ€’2w ago
<@501199901963583489> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?