vue-paper-dashboard 에 eonasdan-bootstrap-datetimepicker (boot starp4 버전)사용하기

eonasdan-bootstrap-datetimepicker 

http://eonasdan.github.io/bootstrap-datetimepicker/  (데모 사이트)

은 데이터 picker 에서 오픈소스로 사용하기 좋은 라이브러리 입니다. 

원래 Jquery 라이브러리 이지만 vue js로 랩핑 ? 해준 라이브러리가 있습니다. 

https://github.com/ankurk91/vue-bootstrap-datetimepicker 

에서 제공 하고 있습니다. 

1.npm install jquery --save 

2.npm install moment --save 

3.npm install bootstrap --save

4.npm install eonasdan-bootstrap-datetimepicker --save 

5.npm install vue-bootstrap-datetimepicker  --save

6.npm i --save @fortawesome/fontawesome-free

을 설치하면 사용이 가능합니다. 

그리고 

webpack 의 build 의  

webpack.dev.conf.js 

webpack.prod.conf.js 

두파일에 

plugins: [

new webpack.DefinePlugin({

'process.env': config.dev.env

}),

new webpack.ProvidePlugin({

Vue: ['vue/dist/vue.esm.js', 'default'],

jQuery: 'jquery',

'window.jQuery': 'jquery',

$: 'jquery',

moment: 'moment',

}),

    new webpack.ProvidePlugin({

      Vue: ['vue/dist/vue.esm.js', 'default'],

      jQuery: 'jquery',

      'window.jQuery': 'jquery',

      $: 'jquery',

      moment: 'moment',

    }),

부분을 추가해 줍니다 .

그리고 컴포넌트 부분에서 

<script>

import 'bootstrap'

import datePicker from 'vue-bootstrap-datetimepicker'

import 'bootstrap/dist/css/bootstrap.min.css'

import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';

export default {

data:function(){

return {

search_start_date_time : '',

config: {

format: 'YYYY-MM-DD',

    useCurrent: true,

keepOpen:true,

locale: 'ko' //한국어 패치

},components: {

datePicker

},methods :{

   showthis(e){

console.log("show = " + e);

}

}

그리고 main.js 에 가줍니다.

import Vue from 'vue'

import App from './App'

import router from './router'

import '@fortawesome/fontawesome-free/css/all.min.css'

Vue.config.productionTip = false

jQuery.extend(true, jQuery.fn.datetimepicker.defaults, {

icons: {

time: 'far fa-clock',

date: 'far fa-calendar',

up: 'fas fa-arrow-up',

down: 'fas fa-arrow-down',

previous: 'fas fa-chevron-left',

next: 'fas fa-chevron-right',

today: 'fas fa-calendar-check',

clear: 'far fa-trash-alt',

close: 'far fa-times-circle'

}

});

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

위와 같이 jQuery 와 fortawesome css 추가해 줍니다.

<template>

<div class="form-group">

<div class='col-md-4 nopadding' >

<div class="input-group date">

<span class = "input-group-addon">시작</span>

<date-picker v-model="search_start_date_time" @dp-show="showthis" :wrap="true" :config="config"></date-picker>

<div class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</div>

</div>

</div>

</div>

</template>

(아래 내용은 모두 vue-paper-dashboard  템플릿을 사용했을때 이야기 입니다.  )

그리고 중요한것이 

vue-paper-dashboard 을 사용할때 

<style>

.dropdown-menu {

opacity: 1;

filter: alpha(opacity=100);

visibility: visible;

}

</style>

을 추가해 줍니다 .

이부분이 스타일을 안해주면 기본 스타일이 지정된것 때문에 드롭 다운 캘린더가 보이지 않습니다. 

하지만  npm run dev가 아닌 npm run build 를 했을때  

달력이 다시 안보이는 현상이 나옵니다. 

조금 무식 하지만 

src\assets\sass\paper\_dropdwon.scss 

을 주석 처리 해주었습니다. 

// .dropdown-menu {

// background-color: $pale-bg;

// border: 0 none;

// border-radius: $border-radius-extreme;

// display: block;

// margin-top: 10px;

// padding: 0px;

// position: absolute;

// visibility: hidden;

// z-index: 9000;

// @include opacity(0);

// @include box-shadow($dropdown-shadow);

// // the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file

// .open & {

// @include opacity(1);

// visibility: visible;

// }

// .divider {

// background-color: $medium-pale-bg;

// margin: 0px;

// }

// .dropdown-header {

// color: $dark-gray;

// font-size: $font-size-small;

// padding: $padding-dropdown-vertical $padding-dropdown-horizontal;

// }

// // the style for the dropdown menu that appears under select, it is different from the default one

// .select & {

// border-radius: $border-radius-bottom;

// @include box-shadow(none);

// @include transform-origin($select-coordinates);

// @include transform-scale(1);

// @include transition($fast-transition-time, $transition-linear);

// margin-top: -20px;

// }

// .select.open & {

// margin-top: -1px;

// }

// > li > a {

// color: $font-color;

// font-size: $font-size-base;

// padding: $padding-dropdown-vertical $padding-dropdown-horizontal;

// @include transition-none();

// img {

// margin-top: -3px;

// }

// }

// > li > a:focus {

// outline: 0 !important;

// }

// .btn-group.select & {

// min-width: 100%;

// }

// > li:first-child > a {

// border-top-left-radius: $border-radius-extreme;

// border-top-right-radius: $border-radius-extreme;

// }

// > li:last-child > a {

// border-bottom-left-radius: $border-radius-extreme;

// border-bottom-right-radius: $border-radius-extreme;

// }

// .select & > li:first-child > a {

// border-radius: 0;

// border-bottom: 0 none;

// }

// > li > a:hover,

// > li > a:focus {

// background-color: $default-color;

// color: $fill-font-color;

// opacity: 1;

// text-decoration: none;

// }

// &.dropdown-primary > li > a:hover,

// &.dropdown-primary > li > a:focus {

// background-color: $primary-color;

// }

// &.dropdown-info > li > a:hover,

// &.dropdown-info > li > a:focus {

// background-color: $info-color;

// }

// &.dropdown-success > li > a:hover,

// &.dropdown-success > li > a:focus {

// background-color: $success-color;

// }

// &.dropdown-warning > li > a:hover,

// &.dropdown-warning > li > a:focus {

// background-color: $warning-color;

// }

// &.dropdown-danger > li > a:hover,

// &.dropdown-danger > li > a:focus {

// background-color: $danger-color;

// }

// }

//fix bug for the select items in btn-group

.btn-group.select {

overflow: hidden;

}

.btn-group.select.open {

overflow: visible;

}