267 lines
6.7 KiB
JavaScript
267 lines
6.7 KiB
JavaScript
var Calendar, month_short, months;
|
||
months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
|
||
month_short = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
|
||
export default window.Calendar = Calendar = class Calendar extends React.Component {
|
||
constructor(props) {
|
||
var d, s, today, val, value;
|
||
super(props);
|
||
d = new Date();
|
||
today = new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
||
value = null;
|
||
|
||
if (this.props.value != null) {
|
||
val = props.value;
|
||
|
||
switch (typeof val) {
|
||
case 'string':
|
||
s = val.split('-');
|
||
value = new Date(s[0], s[1] - 1, s[2]);
|
||
break;
|
||
|
||
case 'number':
|
||
value = new Date(parseInt(val) * 1000);
|
||
}
|
||
} //c = this.props.value.split("-")
|
||
//value = new Date(c[0],c[1]-1,c[2]) # год; месяц (-1, потому что в mysql начинается с 1, а не 0; число
|
||
|
||
|
||
this.state = {
|
||
year: d.getFullYear(),
|
||
month: d.getMonth(),
|
||
date: d.getDate(),
|
||
today: today,
|
||
value: value,
|
||
opened: false
|
||
};
|
||
this.days = 0;
|
||
this.onCancel = this.onCancel.bind(this);
|
||
this.onSubmit = this.onSubmit.bind(this);
|
||
this.open = this.open.bind(this);
|
||
this.close = this.close.bind(this);
|
||
}
|
||
|
||
onCancel() {
|
||
var base;
|
||
this.close();
|
||
return typeof (base = this.props).onCancel === "function" ? base.onCancel() : void 0;
|
||
}
|
||
|
||
onSubmit() {
|
||
var base;
|
||
this.close();
|
||
return typeof (base = this.props).onSubmit === "function" ? base.onSubmit(this.state.value) : void 0;
|
||
}
|
||
|
||
open() {
|
||
return this.setState({
|
||
opened: true
|
||
});
|
||
}
|
||
|
||
close() {
|
||
return this.setState({
|
||
opened: false
|
||
});
|
||
}
|
||
|
||
prevMonth() {
|
||
var month, year;
|
||
({
|
||
month,
|
||
year
|
||
} = this.state);
|
||
month--;
|
||
|
||
if (month < 0) {
|
||
month = 11;
|
||
year--;
|
||
}
|
||
|
||
return this.setState({
|
||
month,
|
||
year
|
||
});
|
||
}
|
||
|
||
nextMonth() {
|
||
var month, year;
|
||
({
|
||
month,
|
||
year
|
||
} = this.state);
|
||
month++;
|
||
|
||
if (month > 11) {
|
||
month = 0;
|
||
year++;
|
||
}
|
||
|
||
return this.setState({
|
||
month,
|
||
year
|
||
});
|
||
}
|
||
|
||
getNextMonth(x) {
|
||
x++;
|
||
|
||
if (x > 11) {
|
||
x = 0;
|
||
}
|
||
|
||
return x;
|
||
}
|
||
|
||
getPrevMonth(x) {
|
||
x++;
|
||
|
||
if (x < 0) {
|
||
x = 11;
|
||
}
|
||
|
||
return x;
|
||
}
|
||
|
||
daysInMonth(year, month) {
|
||
return 33 - new Date(year, month, 33).getDate();
|
||
}
|
||
|
||
renderPrevNext(item) {
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
class: "td na"
|
||
}, item);
|
||
}
|
||
|
||
selectDay(year, month, day) {
|
||
return this.setState({
|
||
value: new Date(year, month, day)
|
||
}, this.onSubmit);
|
||
}
|
||
|
||
renderDate(item) {
|
||
var date, day, isSelected, isToday, month, time, value, valueDate, year;
|
||
({
|
||
year,
|
||
month,
|
||
date,
|
||
value
|
||
} = this.state);
|
||
day = new Date(year, month, item);
|
||
time = day.getTime();
|
||
valueDate = null;
|
||
|
||
if (value != null) {
|
||
valueDate = new Date(value.getFullYear(), value.getMonth(), value.getDate());
|
||
}
|
||
|
||
isToday = time === this.state.today.getTime();
|
||
isSelected = time === (valueDate != null ? valueDate.getTime() : void 0);
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
onClick: this.selectDay.bind(this, year, month, item),
|
||
class: ["td", isToday ? 'cal-today' : '', isSelected ? 'selected round' : ''].join(" ")
|
||
}, item);
|
||
}
|
||
|
||
renderWeek(item) {
|
||
var i, items, j, ref, ref1;
|
||
items = [];
|
||
|
||
for (i = j = ref = item, ref1 = item + 6; ref <= ref1 ? j <= ref1 : j >= ref1; i = ref <= ref1 ? ++j : --j) {
|
||
if (i > this.days) {
|
||
i = i - this.days;
|
||
items.push(this.renderPrevNext(i));
|
||
} else {
|
||
items.push(this.renderDate(i));
|
||
}
|
||
}
|
||
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
class: "tr"
|
||
}, items);
|
||
}
|
||
|
||
render() {
|
||
var day, days, firstMonday, i, j, month, next, opened, prev, prevDays, ref, ref1, ref2, ref3, t, weeks, year;
|
||
t = this;
|
||
({
|
||
month,
|
||
year,
|
||
opened
|
||
} = this.state);
|
||
next = this.getNextMonth(month);
|
||
prev = this.getNextMonth(month);
|
||
prevDays = this.daysInMonth(year, month - 1);
|
||
days = this.daysInMonth(year, month);
|
||
day = new Date(year, month, 1).getDay() - 1;
|
||
this.days = days;
|
||
|
||
if (day < 0) {
|
||
day = 6;
|
||
}
|
||
|
||
weeks = [];
|
||
firstMonday = 7 - day + 1;
|
||
|
||
for (i = j = ref = firstMonday, ref1 = days; j <= ref1; i = j += 7) {
|
||
weeks.push(i);
|
||
}
|
||
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
className: "f fcenter datepicker_wrap " + (opened ? "open" : "")
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "datepicker_bg",
|
||
onClick: this.onCancel
|
||
}), /*#__PURE__*/React.createElement("div", {
|
||
className: "datepicker_content"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "datepicker_title"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "icon prev pointer",
|
||
onClick: this.prevMonth.bind(this)
|
||
}), /*#__PURE__*/React.createElement("div", {
|
||
class: "ch-blue"
|
||
}, month_short[month] + " " + this.state.year), /*#__PURE__*/React.createElement("div", {
|
||
className: "icon next pointer",
|
||
onClick: this.nextMonth.bind(this)
|
||
})), /*#__PURE__*/React.createElement("div", {
|
||
class: "datepicker"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
class: "tr"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u043F\u043D"), /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u0432\u0442"), /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u0441\u0440"), /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u0447\u0442"), /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u043F\u0442"), /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u0441\u0431"), /*#__PURE__*/React.createElement("div", {
|
||
class: "th"
|
||
}, "\u0432\u0441")), /*#__PURE__*/React.createElement("div", {
|
||
class: "tr"
|
||
}, day > 0 ? function () {
|
||
var results = [];
|
||
|
||
for (var k = ref2 = prevDays - (day - 1); ref2 <= prevDays ? k <= prevDays : k >= prevDays; ref2 <= prevDays ? k++ : k--) {
|
||
results.push(k);
|
||
}
|
||
|
||
return results;
|
||
}.apply(this).map(t.renderPrevNext.bind(t)) : null, function () {
|
||
var results = [];
|
||
|
||
for (var k = 1, ref3 = 7 - day; 1 <= ref3 ? k <= ref3 : k >= ref3; 1 <= ref3 ? k++ : k--) {
|
||
results.push(k);
|
||
}
|
||
|
||
return results;
|
||
}.apply(this).map(t.renderDate.bind(t))), weeks.map(t.renderWeek.bind(t)))));
|
||
}
|
||
|
||
};
|
||
//# sourceMappingURL=calendar.js.map
|