时间戳

首页 > 解决方案 > bootstrap-vue 如何在 b-dropdown 中包含 b-form-datepicker

vue.js - bootstrap-vue 如何在 b-dropdown 中包含 b-form-datepicker

问题描述

我正在构建一个下拉菜单日期选择器，并希望允许用户输入日期范围或可以选择预定日期范围。

有没有办法将 b-form-datepicker 包含在 b-dropdown 中？当我尝试打开日期选择器时，下拉菜单关闭。我试过阻止默认关闭操作，但这样做，我不能使用日期选择器。任何帮助或方向将不胜感激！

下面是一个简单的例子，展示了我想要做什么。

new Vue({
  el: '#app',
  data() {
    return {
      startDate: null,
      endDate: null
    }
  },
  methods: {
    registerThisClick() {
      console.log("this is clicked")
    }
  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-dropdown id="dropdown-divider" text="Dropdown with divider" menu-class="w-100" class="w-100" >
    <template v-slot:default>
      <b-dropdown-item>3 months</b-dropdown-item>
      <b-dropdown-item>6 months</b-dropdown-item>
      <b-row>
        <b-col cols="12" class="my-2" >
        Start
            <b-form-datepicker
                id="datepicker-dateformat1"
                :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                locale="en"
                v-model="startDate"
                @click="registerThisClick"
             ></b-form-datepicker>
        </b-col>
        <b-col>
        End
            <b-form-datepicker
                id="datepicker-dateformat2"
                :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                locale="en"
                v-model="endDate"
                @click="registerThisClick"
             ></b-form-datepicker>
        </b-col>
      </b-row>

    </template>
  </b-dropdown>
</div>

标签： vue.jsbootstrap-vue

解决方案

尝试@hide在您的下拉列表中使用以禁用正常单击/关闭并创建一个新按钮来触发关闭下拉列表。

鉴于没有很多开箱即用的支持，您可能需要考虑使用模态或其他一些 BV 组件。

在此处输入图像描述 模板：

<template>
  <div id="app">
    <div> {{ startDate }} </div>
    <div> {{ endDate }} </div>
    <div> {{ isCloseable }} </div>
    <b-dropdown id="dropdown-divider" ref='dropdown' text="Dropdown with divider" menu-class="w-100" class="w-100" @hide='handleHide($event)' @hidden='isCloseable=false'>
      <template v-slot:default>
        <b-dropdown-item>3 months</b-dropdown-item>
        <b-dropdown-item>6 months</b-dropdown-item>
        <b-row>
          <b-col cols="12" class="my-2" >
          Start
              <b-form-datepicker
                  id="datepicker-dateformat1"
                  ref="date1"
                  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                  locale="en"
                  v-model="startDate"
               ></b-form-datepicker>
          </b-col>
          <b-col>
          End
              <b-form-datepicker
                  id="datepicker-dateformat2"
                  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                  locale="en"
                  v-model="endDate"
               ></b-form-datepicker>
          </b-col>
        </b-row>
        <b-dropdown-item @click='closeMe()'>Close me</b-dropdown-item>

      </template>
    </b-dropdown>
  </div>

</template>

脚本：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';


@Component({
  components: {

  },
})

export default class HelloWorld extends Vue {
  startDate = null
  endDate = null
  isCloseable = false;

  handleHide(bvEvent) {
    if (!this.isCloseable) {
      bvEvent.preventDefault();  
    } else {
      this.$refs.dropdown.hide();
    }
  }

  closeMe() {
    this.isCloseable = true;
    this.$refs.dropdown.hide();
  }

}
</script>

推荐阅读