Untitled
unknown
jsx
3 years ago
1.2 kB
6
Indexable
@Component
class CalendarExample extends VueComponent {
interval: DateInterval = weekInterval
/**
* Пример реализации простой логики выбора периода
*/
handleDayClick(day: Date) {
if (this.interval.start) {
if (this.interval.end) {
this.interval.start = day
this.interval.end = null
} else {
if (isBefore(day, this.interval.start)) {
this.interval.end = this.interval.start
this.interval.start = day
} else {
this.interval.end = day
}
}
} else {
if (!this.interval.end) {
this.interval.start = day
}
}
}
isDisabled(day: Date) {
if (this.interval.start && !this.interval.end) {
return isBefore(addWeeks(this.interval.start, 1), day) || isAfter(this.interval.start, day)
}
return false
}
render() {
return (
<Calendar
renderDay={(context) => {
return (
<CalendarDay
key={context.day.toLocaleDateString()}
whenDayClick={this.handleDayClick}
context={context}
isDisabled={this.isDisabled(context.day)}
selected={this.interval}
/>
)}}
/>
)
}
}Editor is loading...