Vue Bootstrap 表单Datepicker b-form-datepicker模式的出现。

Question

我使用的是来自 https:/bootstrap-vue.orgdocscomponentsform-datepicker。.

我想实现这两个问题。

1. 当日历模式被显示时，我希望其他的背景能够变暗。这样，用户更容易获得精神上的关注，以小组件和日期选择。如何实现这个目标？

2. 如果能将日历显示在页面的中间，那就更好了。就像模态菜单一样，如何实现？

3. 我无法真正理解文档中的内容。黑暗模式 https:/bootstrap-vue.orgdocscomponentsform-datepicker#dark-mode。. 哪里和如何"设置 黝黑 榰 真正 以启用深色背景。"? 这听起来像是在解决我的第一个问题... This could sound like solving my first question...

谢谢任何关于解决这个问题的提示... ...

Answer 1

一个可能的解决方案是不使用 b-form-datepicker 而改用 b-calendar它允许你把日期选择窗口放在你想要的地方。

在这种情况下，我们可以使用 b-modal 它的功能是在屏幕上居中，并且默认有一个背景，而不需要任何额外的工作。

这也允许你自定义日期选择器的 "输入 "部分，以任何你想要的，因为它不是直接连接到日历。

new Vue({
  el: '#app',
  data() {
    return {
      value: null,
      modalId: 'date-picker-modal',
      dateContext: {}
    }
  },
  watch: {
    /* Close the modal when the date changes */
    value(newVal, oldVal) {
      if(newVal !== oldVal) {
        this.$bvModal.hide(this.modalId)
      }
    }
  }
})

.cursor-pointer {
  cursor: pointer;
}

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue-icons.js"></script>

<div id="app" class="p-4">
  <!-- Try to imitate the default datepicker look -->
  <b-input-group v-b-modal="modalId">
    <template #prepend>
      <b-button variant="transparent" class="border border-right-0">
        <b-icon icon="calendar"></b-icon>
      </b-button>
    </template>
    <label class="form-control border-left-0 cursor-pointer">
      {{ dateContext.selectedFormatted }}
    </label>
  </b-input-group>
  
  <b-modal :id="modalId" centered hide-header hide-footer no-fade static content-class="w-auto mx-auto">
    <b-calendar v-model="value" @context="ctx => dateContext = ctx"></b-calendar>
  </b-modal>
</div>