react-date-range-calendar
Version:
date range picker calendar React component
619 lines (578 loc) • 18.3 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = undefined;
var _templateObject = _taggedTemplateLiteralLoose(["\n font-size: 30px;\n padding: 0 9px 3px 10px;\n width: 8%;\n margin-left: 2%;\n &:hover {\n color: white;\n background: rgb(22, 36, 39);\n cursor: pointer;\n }\n"], ["\n font-size: 30px;\n padding: 0 9px 3px 10px;\n width: 8%;\n margin-left: 2%;\n &:hover {\n color: white;\n background: rgb(22, 36, 39);\n cursor: pointer;\n }\n"]),
_templateObject2 = _taggedTemplateLiteralLoose(["\n font-size: 30px;\n padding: 0 8px 3px 11px;\n width: 8%;\n margin-left: 2px;\n &:hover {\n color: white;\n background: rgb(22, 36, 39);\n cursor: pointer;\n }\n"], ["\n font-size: 30px;\n padding: 0 8px 3px 11px;\n width: 8%;\n margin-left: 2px;\n &:hover {\n color: white;\n background: rgb(22, 36, 39);\n cursor: pointer;\n }\n"]),
_templateObject3 = _taggedTemplateLiteralLoose(["\n padding-top: 14px;\n padding-left: 30%;\n width: 90%;\n"], ["\n padding-top: 14px;\n padding-left: 30%;\n width: 90%;\n"]),
_templateObject4 = _taggedTemplateLiteralLoose(["\n padding-top: 14px;\n padding-left: 38%;\n width: 90%;\n"], ["\n padding-top: 14px;\n padding-left: 38%;\n width: 90%;\n"]),
_templateObject5 = _taggedTemplateLiteralLoose(["\n max-height: 70px;\n background: white;\n"], ["\n max-height: 70px;\n background: white;\n"]),
_templateObject6 = _taggedTemplateLiteralLoose(["\n max-height: 70px;\n padding-right: 5px;\n margin-right: 4px;\n background: white;\n"], ["\n max-height: 70px;\n padding-right: 5px;\n margin-right: 4px;\n background: white;\n"]),
_templateObject7 = _taggedTemplateLiteralLoose(["\n color: rgb(128, 124, 148);\n"], ["\n color: rgb(128, 124, 148);\n"]),
_templateObject8 = _taggedTemplateLiteralLoose(["\n \t*{\n \tborder: none !important;\n \t}\n .card {\n background: white !important;\n background-color: white !important;\n }\n .right{\n margin-left:0px; padding-left:0px;\n }\n .hide {\n display: none;\n }\n\n .__cal__{\n max-width: 400px;\n min-width: 400px;\n }\n \n \t", " \n\n"], ["\n \t*{\n \tborder: none !important;\n \t}\n .card {\n background: white !important;\n background-color: white !important;\n }\n .right{\n margin-left:0px; padding-left:0px;\n }\n .hide {\n display: none;\n }\n\n .__cal__{\n max-width: 400px;\n min-width: 400px;\n }\n \n \t", " \n\n"]),
_templateObject9 = _taggedTemplateLiteralLoose(["\n ", "\n "], ["\n ", "\n "]);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
require("bootstrap/dist/css/bootstrap.min.css");
var _scripts = require("./scripts.js");
var _scripts2 = _interopRequireDefault(_scripts);
var _styledComponents = require("styled-components");
var _styledComponents2 = _interopRequireDefault(_styledComponents);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
// import "bootstrap/dist/js/bootstrap.bundle.min.js";
// default data
var YearOptions = _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
"option",
{ value: "1990" },
"1990"
),
_react2.default.createElement(
"option",
{ value: "1991" },
"1991"
),
_react2.default.createElement(
"option",
{ value: "1992" },
"1992"
),
_react2.default.createElement(
"option",
{ value: "1993" },
"1993"
),
_react2.default.createElement(
"option",
{ value: "1994" },
"1994"
),
_react2.default.createElement(
"option",
{ value: "1995" },
"1995"
),
_react2.default.createElement(
"option",
{ value: "1996" },
"1996"
),
_react2.default.createElement(
"option",
{ value: "1997" },
"1997"
),
_react2.default.createElement(
"option",
{ value: "1998" },
"1998"
),
_react2.default.createElement(
"option",
{ value: "1999" },
"1999"
),
_react2.default.createElement(
"option",
{ value: "2000" },
"2000"
),
_react2.default.createElement(
"option",
{ value: "2001" },
"2001"
),
_react2.default.createElement(
"option",
{ value: "2002" },
"2002"
),
_react2.default.createElement(
"option",
{ value: "2003" },
"2003"
),
_react2.default.createElement(
"option",
{ value: "2004" },
"2004"
),
_react2.default.createElement(
"option",
{ value: "2005" },
"2005"
),
_react2.default.createElement(
"option",
{ value: "2006" },
"2006"
),
_react2.default.createElement(
"option",
{ value: "2007" },
"2007"
),
_react2.default.createElement(
"option",
{ value: "2008" },
"2008"
),
_react2.default.createElement(
"option",
{ value: "2009" },
"2009"
),
_react2.default.createElement(
"option",
{ value: "2010" },
"2010"
),
_react2.default.createElement(
"option",
{ value: "2011" },
"2011"
),
_react2.default.createElement(
"option",
{ value: "2012" },
"2012"
),
_react2.default.createElement(
"option",
{ value: "2013" },
"2013"
),
_react2.default.createElement(
"option",
{ value: "2014" },
"2014"
),
_react2.default.createElement(
"option",
{ value: "2015" },
"2015"
),
_react2.default.createElement(
"option",
{ value: "2016" },
"2016"
),
_react2.default.createElement(
"option",
{ value: "2017" },
"2017"
),
_react2.default.createElement(
"option",
{ value: "2018" },
"2018"
),
_react2.default.createElement(
"option",
{ value: "2019" },
"2019"
),
_react2.default.createElement(
"option",
{ value: "2020" },
"2020"
),
_react2.default.createElement(
"option",
{ value: "2021" },
"2021"
),
_react2.default.createElement(
"option",
{ value: "2022" },
"2022"
),
_react2.default.createElement(
"option",
{ value: "2023" },
"2023"
),
_react2.default.createElement(
"option",
{ value: "2024" },
"2024"
),
_react2.default.createElement(
"option",
{ value: "2025" },
"2025"
),
_react2.default.createElement(
"option",
{ value: "2026" },
"2026"
),
_react2.default.createElement(
"option",
{ value: "2027" },
"2027"
),
_react2.default.createElement(
"option",
{ value: "2028" },
"2028"
),
_react2.default.createElement(
"option",
{ value: "2029" },
"2029"
),
_react2.default.createElement(
"option",
{ value: "2030" },
"2030"
)
);
var monthOptions = _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
"option",
{ value: "0" },
"Jan"
),
_react2.default.createElement(
"option",
{ value: "1" },
"Feb"
),
_react2.default.createElement(
"option",
{ value: "2" },
"Mar"
),
_react2.default.createElement(
"option",
{ value: "3" },
"Apr"
),
_react2.default.createElement(
"option",
{ value: "4" },
"May"
),
_react2.default.createElement(
"option",
{ value: "5" },
"Jun"
),
_react2.default.createElement(
"option",
{ value: "6" },
"Jul"
),
_react2.default.createElement(
"option",
{ value: "7" },
"Aug"
),
_react2.default.createElement(
"option",
{ value: "8" },
"Sep"
),
_react2.default.createElement(
"option",
{ value: "9" },
"Oct"
),
_react2.default.createElement(
"option",
{ value: "10" },
"Nov"
),
_react2.default.createElement(
"option",
{ value: "11" },
"Dec"
)
);
// styling
var LeftArrowBtn = _styledComponents2.default.span(_templateObject);
var RightArrowBtn = _styledComponents2.default.span(_templateObject2);
var LeftMonthYear = _styledComponents2.default.span(_templateObject3);
var RightMonthYear = _styledComponents2.default.span(_templateObject4);
var LeftCalHeader = _styledComponents2.default.div(_templateObject5);
var RightCalHeader = _styledComponents2.default.div(_templateObject6);
var Th = _styledComponents2.default.th(_templateObject7);
var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject8, function (props) {
return props.globalCss;
});
var _default = function (_Component) {
_inherits(_default, _Component);
function _default() {
_classCallCheck(this, _default);
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
}
_default.prototype.componentWillMount = function componentWillMount() {
LeftArrowBtn = (0, _styledComponents2.default)(LeftArrowBtn)(_templateObject9, this.props.leftArrowCss);
RightArrowBtn = (0, _styledComponents2.default)(LeftArrowBtn)(_templateObject9, this.props.rightArrowCss);
LeftMonthYear = (0, _styledComponents2.default)(LeftMonthYear)(_templateObject9, this.props.leftMonthYearCss);
RightMonthYear = (0, _styledComponents2.default)(RightMonthYear)(_templateObject9, this.props.rightMonthYearCss);
LeftCalHeader = (0, _styledComponents2.default)(LeftCalHeader)(_templateObject9, this.props.leftCalHeaderCss);
RightCalHeader = (0, _styledComponents2.default)(RightCalHeader)(_templateObject9, this.props.rightCalHeaderCss);
Th = (0, _styledComponents2.default)(Th)(_templateObject9, this.props.thCss);
};
_default.prototype.componentDidMount = function componentDidMount() {
(0, _scripts2.default)(this.props);
};
_default.prototype.componentWillUnmount = function componentWillUnmount() {
(0, _scripts.resetItToDefaultState)();
};
_default.prototype.render = function render() {
return _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
"div",
{ className: "row", style: { maxWidth: "100%" } },
_react2.default.createElement(
"div",
{ className: "col-lg-5 __cal__ card left" },
_react2.default.createElement(
LeftCalHeader,
{ className: "card-header row" },
_react2.default.createElement(
LeftArrowBtn,
{ onClick: _scripts.moveToPrevious },
"\u2039"
),
_react2.default.createElement(LeftMonthYear, { id: "monthAndYear1" })
),
_react2.default.createElement(
"table",
{ className: "table" },
_react2.default.createElement(
"thead",
null,
_react2.default.createElement(
"tr",
null,
_react2.default.createElement(
Th,
null,
"Su"
),
_react2.default.createElement(
Th,
{ style: { maxWidth: "50px", width: "50px" } },
"Mo"
),
_react2.default.createElement(
Th,
null,
"Tu"
),
_react2.default.createElement(
Th,
null,
"We"
),
_react2.default.createElement(
Th,
null,
"Th"
),
_react2.default.createElement(
Th,
null,
"Fr"
),
_react2.default.createElement(
Th,
null,
"Sa"
)
)
),
_react2.default.createElement("tbody", { id: "calendar-left-body" })
),
_react2.default.createElement(
"div",
{ className: "form-inline hide" },
_react2.default.createElement(
"button",
{
className: "btn btn-outline-primary col-sm-6",
id: "previous",
onClick: this.previous
},
"Previous"
),
_react2.default.createElement(
"button",
{
className: "btn btn-outline-primary col-sm-6",
id: "next",
onClick: this.next
},
"Next"
)
),
_react2.default.createElement("br", null),
_react2.default.createElement(
"form",
{ className: "form-inline hide" },
_react2.default.createElement(
"label",
{ className: "lead mr-2 ml-2", htmlFor: "month" },
"Jump To:",
" "
),
_react2.default.createElement(
"select",
{
className: "form-control col-sm-4",
name: "month1",
id: "month1",
onChange: this.jump
},
monthOptions
),
_react2.default.createElement("label", { htmlFor: "year" }),
_react2.default.createElement(
"select",
{
className: "form-control col-sm-4",
name: "year1",
id: "year1",
onChange: this.jump
},
YearOptions
)
)
),
_react2.default.createElement(
"div",
{ className: "col-lg-5 card __cal__ right ml-2 ml-xs-2" },
_react2.default.createElement(
RightCalHeader,
{ className: "card-header row" },
_react2.default.createElement(RightMonthYear, { id: "monthAndYear2" }),
_react2.default.createElement(
RightArrowBtn,
{ onClick: _scripts.moveToNext },
"\u203A"
)
),
_react2.default.createElement(
"table",
{ className: "table " },
_react2.default.createElement(
"thead",
null,
_react2.default.createElement(
"tr",
null,
_react2.default.createElement(
Th,
null,
"Su"
),
_react2.default.createElement(
Th,
null,
"Mo"
),
_react2.default.createElement(
Th,
null,
"Tu"
),
_react2.default.createElement(
Th,
null,
"We"
),
_react2.default.createElement(
Th,
null,
"Th"
),
_react2.default.createElement(
Th,
null,
"Fr"
),
_react2.default.createElement(
Th,
null,
"Sa"
)
)
),
_react2.default.createElement("tbody", { id: "calendar-right-body" })
),
_react2.default.createElement(
"div",
{ className: "form-inline hide" },
_react2.default.createElement(
"button",
{
className: "btn btn-outline-primary col-sm-6",
id: "previous2",
onClick: this.previousSec
},
"Previous"
),
_react2.default.createElement(
"button",
{
className: "btn btn-outline-primary col-sm-6",
id: "next2",
onClick: this.nextSec
},
"Next"
)
),
_react2.default.createElement("br", null),
_react2.default.createElement(
"form",
{ className: "form-inline hide" },
_react2.default.createElement(
"label",
{ className: "lead mr-2 ml-2", htmlFor: "month" },
"Jump To:",
" "
),
_react2.default.createElement(
"select",
{
className: "form-control col-sm-4",
name: "month",
id: "month2",
onChange: this.jump
},
monthOptions
),
_react2.default.createElement("label", { htmlFor: "year" }),
_react2.default.createElement(
"select",
{
className: "form-control col-sm-4",
name: "year1",
id: "year2",
onChange: this.jump
},
YearOptions
)
)
)
),
_react2.default.createElement(GlobalStyle, { globalCss: this.props.globalCss })
);
};
return _default;
}(_react.Component);
exports.default = _default;
module.exports = exports["default"];