# UIBuilder Bootstrap-Vue Question

**URL:** <https://discourse.nodered.org/t/uibuilder-bootstrap-vue-question/32462>\
**Category:** General\
**Created:** [5 September 2020 02:40 UTC](https://discourse.nodered.org/t/uibuilder-bootstrap-vue-question/32462 "2020-09-05T02:40:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [5 September 2020 02:40 UTC](https://discourse.nodered.org/t/uibuilder-bootstrap-vue-question/32462/1 "2020-09-05T02:40:54Z")

</div>

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](https://bootstrap-vue.org/docs/components/calendar#date-constraints)

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

```auto
<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

```auto
        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:

```auto
      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.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [5 September 2020 05:31 UTC](https://discourse.nodered.org/t/uibuilder-bootstrap-vue-question/32462/2 "2020-09-05T05:31:08Z")

</div>

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

The "understanding" should really be [vuejs](https://vuejs.org/v2/guide/#Declarative-Rendering) 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](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Load-Vue-components-without-a-build-step-(modern-browsers-only)) 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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 September 2020 17:04 UTC](https://discourse.nodered.org/t/uibuilder-bootstrap-vue-question/32462/3 "2020-09-05T17:04:12Z")

</div>

In your index.html:

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

```

In the index.js, inside the vue app:

```auto
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
    ....
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 November 2020 17:05 UTC](https://discourse.nodered.org/t/uibuilder-bootstrap-vue-question/32462/4 "2020-11-04T17:05:26Z")

</div>

Closed on 4 November 2020 17:05 UTC

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