Как выделить даты в vue-flatpickr-component? - PullRequest
Новая
       22

Как выделить даты в vue-flatpickr-component?

0 голосов
/ 14 марта 2019

Я хотел бы предложить решение этой проблемы. Я использовал хук 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';
            }


        }
...