Как создать компонент календаря в Vue Js 2

Средство выбора даты и времени vue bootstrap не является стандартным пакетом и позволяет интегрировать компонент календаря в приложение vue js и одновременно позволяет вам выбирать или выбирать дату и время вместе.

Виджет календаря помогает выбрать дату и время, особенно когда вам нужно создать мероприятие, сделать заказ или что-то еще, где вам нужно спланировать будущее.

Установка пакета выбора даты и времени Vue Bootstrap

Для установки плагина vue bootstrap DateTime picker вы можете использовать данные команды, открыть свой терминал и начать установку этих пакетов.

npm install vue bootstrap
npm i vue-bootstrap-datetimepicker

После чего зарегистрируйте все пакеты глобально, обновите файл src/main.js .

import Vue from 'vue';
import App from './App.vue';
import datePicker from 'vue-bootstrap-datetimepicker';
Vue.use(datePicker);
new Vue({
  render: h => h(App)
}).$mount('#app')

Создание и регистрация компонента календаря

Организованный код с точки зрения небольших фрагментов ценен, когда дело доходит до обработки приложения большого размера, компоненты — это окончательный эликсир, помогающий нам в управлении кодом.

Аналогичным образом создайте новый компонент (components/CalendarWidget.vue) для обработки функции календаря vue.

Обновите файл src/App.vue .

<template>
  <div class="calendar-rel-pos">
    <CalendarWidget />
  </div>
</template>
<script>
import CalendarWidget from './components/CalendarWidget.vue'
export default {
  name: 'App',
  components: {
    CalendarWidget
  }
}
</script>
<style scoped>
.calendar-rel-pos {
  position: relative;
}
.container {
  max-width: 500px;
}
</style>

Создание виджета календаря в Vue

Директиву b-calendar необходимо добавить в шаблон vue, она показывает виджет календаря в приложении Vue.

Требуется свойство v-model="" для добавления механизма двусторонней привязки данных, тогда как свойство config позволяет настраивать компонент календаря.

Обновите код в файле components/CalendarWidget.vue .

<template>
  <div class="container mt-5">
    <div class="row">
      <div>
        <h2 class="mb-3 text-center">Vue Js Simple Calendar Example</h2>
        <date-picker v-model="date" :config="options"></date-picker>
      </div>
    </div>
  </div>
</template>
 
<script>
import datePicker from 'vue-bootstrap-datetimepicker';
import 'bootstrap/dist/css/bootstrap.css';
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
export default {
  data() {
    return {
      date: new Date(),
      options: {
        format: 'DD/MM/YYYY',
        useCurrent: false
      }
    }
  },
  components: {
    datePicker
  }
}
</script>

Запуск приложения

Чтобы запустить приложение vue, используйте команду npm run serve, аналогично для просмотра приложения используйте предоставленный URL-адрес, только если вы добавляете календарь в vue локально.

npm run serve

Затем перейдите на http://localhost:8080.

Заключение

Вот как мы можем добавить простой виджет календаря в vue, и мы показали вам основной и простой подход к интеграции виджета календаря в vue; вы также можете добавить средство выбора времени в vue, используя эту документацию .