Vue Bootstrap Form Datepicker b-form-datepicker 模态出现

Question

我正在使用来自https://bootstrap-vue.org/docs/components/form-datepicker 的日历组件。

我想解决这两个问题：

1. 当显示日历模式时，我希望其他背景变暗/淡出。这样，用户更容易将注意力集中在小部件和要选择的日期上。
   如何做到这一点？

2. 如果日历显示在页面中间也很好。就像一个模态菜单。 如何做到这一点？

3. 我无法真正理解文档的深色模式 https://bootstrap-vue.org/docs/components/form-datepicker#dark-mode。
   在哪里以及如何“将 dark 属性设置为 true 以启用深色背景。”？
   这听起来像是解决了我的第一个问题......

感谢您提供解决此问题的任何提示...

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/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/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/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/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>