react-date-range-calendar
Version:
date range picker calendar React component
646 lines (476 loc) • 22.3 kB
JavaScript
;
exports.__esModule = true;
exports.default = initiate;
exports.next = next;
exports.nextSec = nextSec;
exports.resetItToDefaultState = resetItToDefaultState;
exports.previous = previous;
exports.previousSec = previousSec;
exports.moveToPrevious = moveToPrevious;
exports.moveToNext = moveToNext;
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
var _momentRange = require('moment-range');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var moment = (0, _momentRange.extendMoment)(_moment2.default);
var obj = {
startDate: null,
endDate: null,
isEndDateNotFinalized: true,
leftCalendar: {
calendar: {
"0": {
"0": "2019-03-03",
"1": "2019-03-04"
},
"1": {
"0": "2019-03-04",
"1": "2019-03-04"
}
}
},
rightCalendar: {
calendar: {
"0": {
"0": "2019-03-03",
"1": "2019-03-04"
},
"1": {
"0": "2019-03-04",
"1": "2019-03-04"
}
}
}
};
var dateChangeHandler = false;
var anyDateChangeHandler = false;
var tdCssObj = false;
var onHoverTdCssObj = false;
var inRangedTdCssObj = false;
var currentDateTdCssObj = false;
var startDateTdCssObj = false;
var endDateTdCssObj = false;
var disabledDatesTdCssObj = false;
var selected_values = {};
var today = new Date();
var actualCurrentDay = new Date();
var disabledDates = [];
var disablePrevDates = false;
var currentMonth1 = today.getMonth();
var currentMonth2 = today.getMonth();
var currentYear1 = today.getFullYear();
var currentYear2 = today.getFullYear();
var selectYear1 = document.getElementById("year1");
var selectYear2 = document.getElementById("year2");
var selectMonth1 = document.getElementById("month1");
var selectMonth2 = document.getElementById("month2");
var cancelMouseOut = false;
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var monthAndYear1 = document.getElementById("monthAndYear1");
var monthAndYear2 = document.getElementById("monthAndYear2");
function initiate(props) {
selectYear1 = document.getElementById("year1");
selectYear2 = document.getElementById("year2");
selectMonth1 = document.getElementById("month1");
selectMonth2 = document.getElementById("month2");
monthAndYear1 = document.getElementById("monthAndYear1");
monthAndYear2 = document.getElementById("monthAndYear2");
if (props && props.onSelect && typeof props.onSelect === 'function') dateChangeHandler = props.onSelect;
if (props && props.onChange && typeof props.onSelect === 'function') anyDateChangeHandler = props.onChange;
if (props && props.selectedRange && Array.isArray(props.selectedRange) && props.selectedRange.length > 1) {
selected_values['startDate'] = props.selectedRange[0];
selected_values['endDate'] = props.selectedRange[1];
}
if (selected_values['startDate']) {
today = new Date(selected_values['startDate']);
// here we are forcing our calendar to open according the start date not by current date
currentYear1 = currentYear2 = today.getFullYear();
currentMonth1 = currentMonth2 = today.getMonth();
}
if (props && props.disabledDates && typeof props.disabledDates === 'function') {
if (Array.isArray(props.disabledDates())) disabledDates = props.disabledDates();else throw new Error("prop, disabledDates method should return just array data type e.g. ['YYYY-MM-DD','YYYY-MM-DD']");
}
if (props && props.disablePrevDates) {
disablePrevDates = props.disablePrevDates;
}
// from here props starts related to styling
if (props && props.tdCssObj && props.tdCssObj instanceof Object) {
tdCssObj = props.tdCssObj;
}
if (props && props.onHoverTdCssObj && props.onHoverTdCssObj instanceof Object) {
onHoverTdCssObj = props.onHoverTdCssObj;
}
if (props && props.inRangedTdCssObj && props.inRangedTdCssObj instanceof Object) {
inRangedTdCssObj = props.inRangedTdCssObj;
}
if (props && props.currentDateTdCssObj && props.currentDateTdCssObj instanceof Object) {
currentDateTdCssObj = props.currentDateTdCssObj;
}
if (props && props.startDateTdCssObj && props.startDateTdCssObj instanceof Object) {
startDateTdCssObj = props.startDateTdCssObj;
}
if (props && props.endDateTdCssObj && props.endDateTdCssObj instanceof Object) {
endDateTdCssObj = props.endDateTdCssObj;
}
showCalendar(currentMonth1, currentYear1);
showSecondCalendar();
selectValuesOnCalendar();
}
function next() {
currentYear1 = currentMonth1 === 11 ? currentYear1 + 1 : currentYear1;
currentMonth1 = (currentMonth1 + 1) % 12;
showCalendar(currentMonth1, currentYear1);
}
function nextSec() {
currentYear2 = currentMonth2 === 11 ? currentYear2 + 1 : currentYear2;
currentMonth2 = (currentMonth2 + 1) % 12;
showCalendar(currentMonth2, currentYear2, "calendar-right-body", monthAndYear2);
}
function resetItToDefaultState() {
previousSec();
}
function showSecondCalendar() {
currentYear2 = currentMonth2 === 11 ? currentYear2 + 1 : currentYear2;
currentMonth2 = (currentMonth2 + 1) % 12;
showCalendar(currentMonth2, currentYear2, "calendar-right-body", monthAndYear2);
}
function previous() {
currentYear1 = currentMonth1 === 0 ? currentYear1 - 1 : currentYear1;
currentMonth1 = currentMonth1 === 0 ? 11 : currentMonth1 - 1;
showCalendar(currentMonth1, currentYear1, "calendar-left-body", monthAndYear1);
}
function previousSec() {
currentYear2 = currentMonth2 === 0 ? currentYear2 - 1 : currentYear2;
currentMonth2 = currentMonth2 === 0 ? 11 : currentMonth2 - 1;
showCalendar(currentMonth2, currentYear2, "calendar-right-body", monthAndYear2);
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth1.value);
showCalendar(currentMonth, currentYear);
}
function moveToPrevious() {
previous();
previousSec();
selectValuesOnCalendar();
}
function moveToNext() {
next();
nextSec();
selectValuesOnCalendar();
}
var getDaysRange = function getDaysRange(startDate, endDate) {
if (startDate && endDate) {
var arr = [];
var range = moment.range(startDate, endDate);
for (var _iterator = range.by('days'), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var day = _ref;
day = day.format('YYYY-MM-DD');
if (disabledDates.indexOf(day) > 0) ;else arr.push(day);
}
return arr;
}
return undefined;
};
function disableIt(condition, cell) {
var registerEvents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
cell.classList.remove('disabled');
cell.classList.remove('not-available');
if (condition) {
cell.classList.add('disabled');
cell.classList.add('not-available');
registerEvents = false;
}
// don't register any event on it.....
return registerEvents;
}
function showCalendar(month, year) {
var tableId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "calendar-left-body";
var monthAndYear1 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document.getElementById("monthAndYear1");
var firstDay = new Date(year, month).getDay();
var daysInMonth = 32 - new Date(year, month, 32).getDate();
var tbl = document.getElementById(tableId); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
// filing data about month and in the page via DOM.
if (tableId === 'calendar-left-body') {
monthAndYear1.innerHTML = months[month] + ", " + year;
selectYear1.value = year;
selectMonth1.value = month;
} else if (tableId === 'calendar-right-body') {
selectYear2.value = year;
selectMonth2.value = month;
monthAndYear2.innerHTML = months[month] + ", " + year;
}
// creating all cells
var date = 1;
for (var i = 0; i < 6; i++) {
// creates a table row
var row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (var j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
var cell = document.createElement("td");
var cellText = document.createTextNode("");
cell.appendChild(cellText);
cell.classList.add('td-not');
row.appendChild(cell);
} else if (date > daysInMonth) {
break;
} else {
var _cell = document.createElement("td");
var _cellText = document.createTextNode(date);
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {}
// cell.classList.add("current");
// color today's date
_cell.classList.remove('current');
_cell.appendChild(_cellText);
row.appendChild(_cell);
// adding date values in global object....
if (typeof obj.leftCalendar.calendar[i] === 'undefined') obj.leftCalendar.calendar[i] = {};
if (typeof obj.rightCalendar.calendar[i] === 'undefined') obj.rightCalendar.calendar[i] = {};
var thatDay = void 0;
if (tableId === 'calendar-left-body') {
thatDay = obj.leftCalendar.calendar[i][j] = moment(currentYear1 + '-' + (currentMonth1 + 1) + '-' + date, 'YYYY-MM-DD');
if (moment(actualCurrentDay).isSame(obj.leftCalendar.calendar[i][j], 'day')) _cell.classList.add('current');
} else {
thatDay = obj.rightCalendar.calendar[i][j] = moment(currentYear2 + '-' + (currentMonth2 + 1) + '-' + date, 'YYYY-MM-DD');
if (moment(actualCurrentDay, 'YYYY-MM-DD').isSame(obj.rightCalendar.calendar[i][j], 'day')) _cell.classList.add('current');
}
var registerEvents = true;
if (disablePrevDates && moment(actualCurrentDay, 'YYYY-MM-DD').isAfter(thatDay, 'day')) {
disabledDates.push(thatDay.format('YYYY-MM-DD'));
}
if (disabledDates && Array.isArray(disabledDates) && disabledDates.length > 0) {
for (var _iterator2 = disabledDates, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
var _ref2;
if (_isArray2) {
if (_i2 >= _iterator2.length) break;
_ref2 = _iterator2[_i2++];
} else {
_i2 = _iterator2.next();
if (_i2.done) break;
_ref2 = _i2.value;
}
var disabledDate = _ref2;
registerEvents = disableIt(moment(disabledDate, 'YYYY-MM-DD')._isValid && thatDay.isSame(moment(disabledDate, 'YYYY-MM-DD'), 'day'), _cell);
if (registerEvents === false) break;
}
}if (registerEvents) {
_cell.dataset.title = 'r' + i + 'c' + j;
_cell.style.textAlign = 'center';
// mouseover event listener
_cell.addEventListener('mouseover', function (e) {
e.target.classList.add('active');
onHoverAfterStartDate(e);
applyStyling();
});
// called here to put styling default color of actual current date...
applyStyling();
// mouseout event listener
var mouseout = function mouseout(e) {
e.target.classList.remove('active');
applyStyling();
};
_cell.addEventListener('mouseout', mouseout);
// click event listener
_cell.addEventListener('click', function (e) {
document.querySelectorAll('.active').forEach(function (elem) {
elem.classList.remove('active');
});
if (!obj.startDate || obj.startDate && obj.endDate || obj.startDate && !obj.endDate && getDateFromTarget(e.target).isBefore(obj.startDate)) {
// removing previous selected start and end date....
document.querySelectorAll('.start-date').forEach(function (elem) {
elem.classList.remove('start-date');
});
document.querySelectorAll('.end-date').forEach(function (elem) {
elem.classList.remove('end-date');
});
e.target.classList.add('start-date');
e.target.classList.add('active');
obj.startDate = getDateFromTarget(e.target);
selected_values['startDate'] = obj.startDate.format('YYYY-MM-DD');
obj.endDate = null;
selected_values['endDate'] = null;
obj.isEndDateNotFinalized = true;
if (anyDateChangeHandler) anyDateChangeHandler(obj.startDate.format('YYYY-MM-DD'));
onHoverAfterStartDate(e);
} else if (obj.startDate && !obj.endDate && getDateFromTarget(e.target).isAfter(obj.startDate) || getDateFromTarget(e.target).isSame(obj.startDate, 'day')) {
document.querySelectorAll('.end-date').forEach(function (elem) {
elem.classList.remove('end-date');
});
e.target.classList.add('end-date');
e.target.classList.add('active');
obj.endDate = getDateFromTarget(e.target);
selected_values['endDate'] = obj.endDate.format('YYYY-MM-DD');
obj.isEndDateNotFinalized = false;
if (dateChangeHandler) dateChangeHandler(obj.startDate.format('YYYY-MM-DD'), obj.endDate.format('YYYY-MM-DD'), getDaysRange(obj.startDate, obj.endDate));
// e.target.removeEventListener('mouseout',mouseout)
if (anyDateChangeHandler) anyDateChangeHandler(obj.endDate.format('YYYY-MM-DD'));
selectValuesOnCalendar();
}
applyStyling();
});
}
date++;
}
}
tbl.appendChild(row); // appending each row into calendar body.
}
}
function selectValuesOnCalendar() {
if (selected_values['startDate'] && typeof selected_values['startDate'] === 'string' && selected_values['endDate']) {
obj.startDate = moment(selected_values['startDate'], 'YYYY-MM-DD');
obj.endDate = moment(selected_values['endDate'], 'YYYY-MM-DD');
// let cameInside = false;
document.querySelectorAll('.__cal__ tbody td').forEach(function (cell) {
if (!cell.dataset.title) return;
var title = cell.dataset.title;
var row = title.substr(1, 1);
var col = title.substr(3, 1);
var cal = cell.closest('.__cal__');
var dt = cal.classList.contains('left') ? obj.leftCalendar.calendar[row][col] : obj.rightCalendar.calendar[row][col];
if (dt.isSame(moment(selected_values['startDate'], 'YYYY-MM-DD'), 'day')) {
cell.classList.add('in-range');
cell.classList.add('start-date');
} else if (dt.isSame(moment(selected_values['endDate'], 'YYYY-MM-DD'), 'day')) {
obj.endDate = moment(selected_values['endDate'], 'YYYY-MM-DD');
cell.classList.add('end-date');
cell.classList.add('in-range');
} else if (dt.isAfter(obj.startDate) && dt.isBefore(moment(selected_values['endDate'], 'YYYY-MM-DD')) || dt.isSame(moment(selected_values['endDate'], 'YYYY-MM-DD'), 'day')) {
cell.classList.add('in-range');
} else {
cell.classList.remove('in-range');
}
});
if (selected_values['startDate'] && selected_values['endDate']) {
obj.isEndDateNotFinalized = false;
applyStyling();
}
}
}
/////////////////////////////////CUSTOM METHODS///////////////////////////////--------------------
function applyStyling() {
var elem = void 0;
if (elem = document.querySelectorAll('td:not(.td-not)')) {
elem.forEach(function (e) {
e.style.color = 'black';
e.style.background = 'white';
tdCssObj && Object.entries(tdCssObj).forEach(function (_ref3) {
var key = _ref3[0],
val = _ref3[1];
e.style[key] = val;
});
});
}
if (elem = document.querySelectorAll('.active')) {
elem.forEach(function (e) {
e.style.color = 'white';
e.style.background = 'rgb(22, 36, 39)';
onHoverTdCssObj && Object.entries(onHoverTdCssObj).forEach(function (_ref4) {
var key = _ref4[0],
val = _ref4[1];
e.style[key] = val;
});
});
}
if (elem = document.querySelectorAll('.in-range')) {
elem.forEach(function (e) {
e.style.color = 'white';
e.style.background = 'rgb(128, 124, 148)';
// e.style.background = '#c4bbeb';
inRangedTdCssObj && Object.entries(inRangedTdCssObj).forEach(function (_ref5) {
var key = _ref5[0],
val = _ref5[1];
e.style[key] = val;
});
});
}
if (elem = document.querySelector('.current')) {
if (!elem.classList.contains('active')) {
elem.style.color = 'rgb(210, 6, 81)';
// elem.style.color = '#f16d9b';
currentDateTdCssObj && Object.entries(currentDateTdCssObj).forEach(function (_ref6) {
var key = _ref6[0],
val = _ref6[1];
elem.style[key] = val;
});
}
}
if (elem = document.querySelector('.start-date')) {
elem.style.color = 'white';
elem.style.background = 'rgb(22, 36, 39)';
startDateTdCssObj && Object.entries(startDateTdCssObj).forEach(function (_ref7) {
var key = _ref7[0],
val = _ref7[1];
elem.style[key] = val;
});
}
if (elem = document.querySelector('.end-date')) {
elem.style.color = 'white';
// elem.style.background='#6759a6';
elem.style.background = 'rgb(22, 36, 39)';
endDateTdCssObj && Object.entries(endDateTdCssObj).forEach(function (_ref8) {
var key = _ref8[0],
val = _ref8[1];
elem.style[key] = val;
});
}
if (elem = document.querySelectorAll('.disabled')) {
elem.forEach(function (e) {
// e.style = objec;
e.style.color = 'black';
e.style.opacity = '0.3';
e.style.textDecoration = 'line-through';
e.style.cursor = 'not-allowed';
e.style.background = 'white';
disabledDatesTdCssObj && Object.entries(disabledDatesTdCssObj).forEach(function (_ref9) {
var key = _ref9[0],
val = _ref9[1];
e.style[key] = val;
});
});
}
}
function onHoverAfterStartDate(e) {
if (e.target.classList.contains('not-available')) return;
if (obj.startDate && obj.isEndDateNotFinalized) {
var currentHovered = e.target;
var title = currentHovered.dataset.title;
var row = title.substr(1, 1);
var col = title.substr(3, 1);
var cal = currentHovered.closest('.__cal__');
var date = cal.classList.contains('left') ? obj.leftCalendar.calendar[row][col] : obj.rightCalendar.calendar[row][col];
document.querySelectorAll('.__cal__ tbody td').forEach(function (cell) {
if (!cell.dataset.title) return;
var title = cell.dataset.title;
var row = title.substr(1, 1);
var col = title.substr(3, 1);
var cal = cell.closest('.__cal__');
var dt = cal.classList.contains('left') ? obj.leftCalendar.calendar[row][col] : obj.rightCalendar.calendar[row][col];
if (dt.isAfter(obj.startDate) && dt.isBefore(date) || dt.isSame(date, 'day')) {
cell.classList.add('in-range');
} else {
cell.classList.remove('in-range');
}
});
}
}
function getDateFromTarget(eDotTarget) {
var currentTraget = eDotTarget;
var title = currentTraget.dataset.title;
var row = title.substr(1, 1);
var col = title.substr(3, 1);
var cal = currentTraget.closest('.__cal__');
var date = cal.classList.contains('left') ? obj.leftCalendar.calendar[row][col] : obj.rightCalendar.calendar[row][col];
return date;
}