{{ btn }}
<date-picker :highlight="highlight" />
methods: {
highlight(formatted, dateMoment, checkingFor) {
let attributes = {'title': 'Today is ' + formatted};
if (checkingFor === 'day' && formatted === '1397/12/28'){
attributes['class'] = 'highlighted-1';
attributes['title'] = 'جشن چهارشنبه سوری';
}
if (checkingFor === 'day' && formatted === '1397/12/29'){
attributes['class'] = 'highlighted-2';
attributes['title'] = 'روز ملی شدن صنعت نفت';
}
return attributes;
}
}
.highlighted-1 {
> span { color: #EF6C00 !important; }
.{{ $prefix }}day-effect {
background-color: #f9e1be !important;
border: solid 1px #EF6C00;
}
}
.highlighted-2 {
color: #E91E63;
.{{ $prefix }}day-effect { background-color: #E91E63 !important; }
}
<date-picker type="year" :highlight="highlight" />
methods: {
highlight(formatted, dateMoment, checkingFor) {
if (checkingFor === 'year' && formatted === '1396') return {
'style': {'color': 'red !important'},
'class': 'highlighted',
'data-info': '1396',
};
return {}
}
}
<date-picker type="month" :highlight="highlight" />
methods: {
highlight(formatted, dateMoment, checkingFor) {
if (formatted === '05') return {
'style': {'color': 'red !important'},
'class': 'highlighted',
};
return {}
}
}
<date-picker type="time" :highlight="highlight" />
methods: {
highlight(formatted, dateMoment, checkingFor) {
if (dateMoment.hour() === dateMoment.minutes()) return {
'style': {'color': '#00BCD4 !important'}
};
return {}
}
}
<date-picker type="datetime" :highlight="highlight" />
methods: {
highlightDatetime(formatted, dateMoment, checkingFor) {
if (checkingFor === 'time' && dateMoment.format('HH:mm') === '22:00')
return {'style': {'color': '#ff9800 !important'}};
else if (checkingFor === 'day' && dateMoment.jDate() === 5)
return {'class': 'highlighted-1'};
return {}
}
}