Question

我正在使用MdBootsrap进行Vue.js项目。我希望有一个显示日历的图标，当您单击该图标时，您将获得datepicker来选择日期。

我该如何实现？

我看了看文档：

我已经尝试过类似的事情：

  <mdb-date-picker icon="calendar" far :options="today()"></mdb-date-pickler>

<script>
methods : {

today(){
return moment.format('YYYY-MM-DD');
}
}

我显示的是一个文本输入字段，但是在文档中，我的代码中datepicker的输入字段已更改。

我想念什么？

Answer 1

在MDB Datepicker中，始终显示输入字段，这对于组件的内部结构是必不可少的。如果要使用可点击的图标切换日期选择器，则可以尝试隐藏它：

<template>
<div class="custom-datepicker">
  <mdb-date-picker v-model="date" icon="calendar"/> 
  <p>{{date}}</p>
  </div>
</template>

<script>
  import { mdbDatePicker } from 'mdbvue';
  export default {
    components: {
      mdbDatePicker
    },
    data() {
      return {
        date: ''
      };
    }
  }
</script>

<style>

.custom-datepicker .mdb-datepicker input {
  display: none;
}

.custom-datepicker .mdb-datepicker i {
  cursor: pointer;
  position: initial;
}
</style>

您随时可以尝试在支持论坛-https://mdbootstrap.com/support/上直接写信给MDB团队。

如何创建可点击的图标，以显示带有MD引导程序的日期选择器？

1 个答案: