0

我无法让 bootstrap-daterangepicker 在我的 vue 组件中工作。

我通过 npm 安装了这个包：

npm i bootstrap-daterangepicker

我跑了npm run dev

我在转译后验证了该包包含在我的 app.js 文件中。

这是我的 Vue 组件：

<template>
    <div class="input-group mb-3">
        <input type="text" class="form-control shawCalRanges">
        <div class="input-group-append">
            <span class="input-group-text">
                <span class="ti-calendar"></span>
            </span>
        </div>
    </div>
</template>

<script>
  import moment from 'moment';
  console.log(moment().format('HH:mm'));
  import daterangepicker from 'bootstrap-daterangepicker';

  $('.shawCalRanges').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        alwaysShowCalendars: true,
    });


export default {
  name: 'date-range-picker',
  data() {
    return {
    }
  },
}

</script>

我可以从那一刻起在控制台中看到时间，但是当我加载页面时，日期选择器只是一个样式化的输入框。控制台中没有错误消息或任何表明存在问题的信息。

问题：

  1. 如何bootstrap-daterangepicker在我的 vue 组件中工作？
  2. 我假设这不是构建 vue 组件的正确方法。你会怎么处理这个？即使用日期选择器加载 vue 文件。将其粘贴在脚本标签中是否合适？我是 vue 新手，主要是 jquery 背景，所以这对我来说有点陌生。
4

0 回答 0