[vue/Nuxt] 부트스트랩 datetimepicker css 변경을 위해 debug 설정하기(bootstrap datepicker 안없어지게 하는 방법)

먼저 Vue에서 부트스트랩 datetimepicker를 못 연결하신 분들은

아래 포스팅을 먼저 확인하고 오길 바란다.

2021.06.04 - [FrontEnd/Vue.js] - [vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법

[vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법

 

부트스트랩 datepicker 디버깅 방법

 

 

🐣들어가기 전

부트스트랩의 datepicker의 경우 이미 기본 css가 있지만, 

내가 하는 프로젝트의 색상과 맞지 않아서 포인트 컬러 등을 변경을 할 일이 생길 수 있다.

 

 

부트스트랩의 해당 소스가 어떤식으로 그려지는지를 소스보기를 통해서 보고 싶은데, 

보다시피 부트스트랩 datetimepicker의 경우 클릭하면 datepicker가 사라져서 

소스보기로 소스 분석이 불가능하다.

부트스트랩 클릭 하여 소스 분석 불가

 

css를 변경하기 위해서는 각 요소가 어떤 클래스를 써야 하는지 확인할 필요가 있는데, 

이때 datepicker 설정 중 debug:true로 변경을 해주면

위의 처럼 datepicker가 어디를 클릭하든 꺼지는 이벤트가 없어진다.

 

Vue코드

<template>
    <div style="padding:50px; position:relative;">
        <date-picker v-model="date" :config="options"
        style="width:200px;"/>
    </div>
</template>
<script>
export default {
        data() {
            return {
                date: new Date(),
                options: {
                    format: 'YYYY-MM-DD',
                    debug:true, //degug속성 적용
                }
            }

        },
    }
</script>

실제화면

부트스트랩 밑 코드까지 정확히 다보이게된다.

 

이렇게 debug 속성을 true로 변경하면

내가 날짜를 클릭하는 것 외에 다른 곳을 클릭하더라도 datepicker가 사라지지 않는다