UIBuilder Bootstrap-Vue Question

General
1

I am working my way through the Bootstrap-Vue documentation since that is installed by default with uibuilder and seems like a reasonable framework to become familar with. Going through the various components and getting them to work in uibuilder is progressing well. I have however run into one that I am not clear on how to implement it. It is at https://bootstrap-vue.org/docs/components/calendar#date-constraints

The html/js that is shown to implement this is:

<template>
  <div>
    <b-calendar v-model="value" :min="min" :max="max" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      // 15th two months prior
      const minDate = new Date(today)
      minDate.setMonth(minDate.getMonth() - 2)
      minDate.setDate(15)
      // 15th in two months
      const maxDate = new Date(today)
      maxDate.setMonth(maxDate.getMonth() + 2)
      maxDate.setDate(15)

      return {
        value: '',
        min: minDate,
        max: maxDate
      }
    }
  }
</script>

I know where in the default index.js I would put

        value: '',
        min: minDate,
        max: maxDate

And the html part is also obvious.

I can even figure out the logic of the part I don't know where to place, but I can't figure out where to put:

      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      // 15th two months prior
      const minDate = new Date(today)
      minDate.setMonth(minDate.getMonth() - 2)
      minDate.setDate(15)
      // 15th in two months
      const maxDate = new Date(today)
      maxDate.setMonth(maxDate.getMonth() + 2)
      maxDate.setDate(15)

If anyone can explain where and why I would put it there, I think it would really deepen my understanding of Bootstrap-Vue.

2

I think it would really deepen my understanding of Bootstrap-Vue.

The "understanding" should really be vuejs as bootstrap lives on top of that. I cannot explain here what you need to do with the code as it requires knowledge about vuejs and understanding the concepts. What you are looking at is a so-called component. Vue SPA (single page applications) are build using (reusable) components.

There is an uibuilder example how you can implement this with uibuilder (there is more to it than i wrote above).

If you are new to vuejs and/or reactive frameworks, this is going to be a journey by itself as the concepts are different from what you might be used to.

3

In your index.html:

  ...
  <div>
    <b-calendar v-model="value" :min="min" :max="max" locale="en"></b-calendar>
  </div>
  ...

In the index.js, inside the vue app:

data: {
    value: '',
    min: null,
    max: null,
    ....
},
...
mounted: {
    ...
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    // 15th two months prior
    const minDate = new Date(today)
    minDate.setMonth(minDate.getMonth() - 2)
    minDate.setDate(15)
    // 15th in two months
    const maxDate = new Date(today)
    maxDate.setMonth(maxDate.getMonth() + 2)
    maxDate.setDate(15)

    this.min = minDate
    this.max = maxDate
    ....
}
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.