@capaj/react-datetime
Version:
A lightweight but complete datetime picker React.js component
102 lines • 4.49 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const create_react_class_1 = __importDefault(require("create-react-class"));
const react_onclickoutside_1 = __importDefault(require("@capaj/react-onclickoutside"));
const DateTimePickerMonths = react_onclickoutside_1.default(create_react_class_1.default({
render() {
return (react_1.default.createElement("div", { className: "rdtMonths" },
react_1.default.createElement("table", { key: "a" },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", { key: "prev", className: "rdtPrev", onClick: this.props.subtractTime(1, 'years') },
react_1.default.createElement("span", null, "\u2039")),
react_1.default.createElement("th", { key: "year", className: "rdtSwitch", onClick: this.props.showView('years'), colSpan: 2, "data-value": this.props.viewDate.year() }, this.props.viewDate.year()),
react_1.default.createElement("th", { key: "next", className: "rdtNext", onClick: this.props.addTime(1, 'years') },
react_1.default.createElement("span", null, "\u203A"))))),
react_1.default.createElement("table", { key: "months" },
react_1.default.createElement("tbody", { key: "b" }, this.renderMonths()))));
},
renderMonths() {
const date = this.props.selectedDate;
const month = this.props.viewDate.month();
const year = this.props.viewDate.year();
const rows = [];
let i = 0;
let months = [];
const renderer = this.props.renderMonth || this.renderMonth;
const isValid = this.props.isValidDate || this.alwaysValidDate;
let classes;
let props;
let currentMonth;
let isDisabled;
let noOfDaysInMonth;
let daysInMonth;
let validDay;
const irrelevantDate = 1;
while (i < 12) {
classes = 'rdtMonth';
currentMonth = this.props.viewDate.clone().set({
year,
month: i,
date: irrelevantDate
});
noOfDaysInMonth = currentMonth.endOf('month').format('D');
daysInMonth = Array.from({
length: noOfDaysInMonth
}, (e, i) => i + 1);
validDay = daysInMonth.find((d) => {
const day = currentMonth.clone().set('date', d);
return isValid(day);
});
isDisabled = validDay === undefined;
if (isDisabled)
classes += ' rdtDisabled';
if (date && i === date.month() && year === date.year())
classes += ' rdtActive';
props = {
key: i,
'data-value': i,
className: classes
};
if (!isDisabled)
props.onClick =
this.props.updateOn === 'months'
? this.updateSelectedMonth
: this.props.setDate('month');
months.push(renderer(props, i, year, date && date.clone()));
if (months.length === 4) {
rows.push(react_1.default.createElement("tr", { key: `${month}_${rows.length}` }, months));
months = [];
}
i++;
}
return rows;
},
updateSelectedMonth(event) {
this.props.updateSelectedDate(event);
},
renderMonth(props, month) {
const localMoment = this.props.viewDate;
const monthStr = localMoment
.localeData()
.monthsShort(localMoment.month(month));
const strLength = 3;
const monthStrFixedLength = monthStr.substring(0, strLength);
return react_1.default.createElement("td", Object.assign({}, props), capitalize(monthStrFixedLength));
},
alwaysValidDate() {
return 1;
},
handleClickOutside() {
this.props.handleClickOutside();
}
}));
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
exports.default = DateTimePickerMonths;
//# sourceMappingURL=MonthsView.js.map