如何在vue-flatpickr-component中突出显示日期？

Question

我想提供此问题的解决方案。我使用了onDayCreate钩子和beforeMount vue.js钩子。也许您对此有更好的解决方案？

模板：

<flat-pickr

v-model="selectedDate"
:config="config"
:events="flatPickrEventsList"
@on-day-create="listenToOnDayCreateEvent"

></flat-pickr>

还需要创建config和eventList：

data(){
        return{    
            config: {
                inline:true,
                dateFormat: 'Y-m-d'
                locale: Russian

            },
            flatPickrEventsList:['onDayCreate']
         }

然后我们突出显示日期：

beforeMount(){
        this.highlightDates = ['2019-03-01','2019-03-14','2019-02-09'];
        });
    }

最后，我们突出显示日期：

methods:{
        listenToOnDayCreateEvent(dObj, dStr, fp, dayElem) {

            // generate date string we need
            let month = dayElem.dateObj.getMonth();
            month = parseInt(month) + 1;
            let currentDate =  dayElem.dateObj.getFullYear() + '-' + ('0' + month).slice(-2) + '-' +('0' + dayElem.dateObj.getDate()).slice(-2);

            // check and highlight
            if(this.highlightDates.indexOf(currentDate) !== -1){
                dayElem.style.background = '#6ed3cf';
            }


        }