react-advance-jalaali-datepicker2
Version:
Jalaali React Date Picker developed with love by Alireza Kasaaian
329 lines (300 loc) • 12.3 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "./YearSpan"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("./YearSpan"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.YearSpan);
global.Years = mod.exports;
}
})(this, function (exports, _react, _YearSpan) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react2 = _interopRequireDefault(_react);
var _YearSpan2 = _interopRequireDefault(_YearSpan);
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");
}
}
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
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;
}
var mapObj = {
1: "۱",
2: "۲",
3: "۳",
4: "۴",
5: "۵",
6: "۶",
7: "۷",
8: "۸",
9: "۹",
0: "۰"
};
var Years = function (_React$Component) {
_inherits(Years, _React$Component);
function Years(props) {
_classCallCheck(this, Years);
var _this = _possibleConstructorReturn(this, (Years.__proto__ || Object.getPrototypeOf(Years)).call(this, props));
_this.renderYearRange = function (year) {
return year + '-' + (year + 9);
};
_this.navigateYear = function (year) {
_this.setState({ navYear: year });
};
_this.yearPickerToggle = function () {
var yearPickerView = _this.state.yearPickerView;
_this.setState({ yearPickerView: !yearPickerView });
};
_this.yearSelected = function (year, prop) {
if (prop.includes('D')) return;
if (prop.includes('O') || prop.includes('N')) {
_this.setState({ navYear: year });
}
_this.yearChanged(year);
};
_this.yearChanged = _this.yearChanged.bind(_this);
_this.state = {
currentYear: _this.props.year,
navYear: _this.props.year,
error: "",
yearPickerView: false,
startDate: -Infinity,
endDate: Infinity
};
return _this;
}
_createClass(Years, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextprops) {
this.setState({ year: nextprops.year });
}
}, {
key: "yearChanged",
value: function yearChanged(year) {
var changeEvent = this.props.changeEvent;
/*this.setState({currentYear: year.value});
this.setState({error: ""});*/
if (!!changeEvent) changeEvent(parseInt(year));
}
}, {
key: "renderYearPickerHeader",
value: function renderYearPickerHeader(year) {
var _this2 = this;
return _react2.default.createElement(
"thead",
null,
_react2.default.createElement(
"tr",
null,
_react2.default.createElement(
"th",
{ className: "next", onClick: function onClick() {
_this2.navigateYear(year + 10);
} },
_react2.default.createElement(
"i",
{ className: "fas fa-angle-right" },
" "
)
),
_react2.default.createElement(
"th",
{ colSpan: "5", className: "switch" },
this.renderYearRange(year)
),
_react2.default.createElement(
"th",
{ className: "prev", onClick: function onClick() {
_this2.navigateYear(year - 10);
} },
_react2.default.createElement(
"i",
{ className: "fas fa-angle-left" },
" "
)
)
)
);
}
}, {
key: "renderYearPickerContent",
value: function renderYearPickerContent(year) {
return _react2.default.createElement(
"tbody",
null,
_react2.default.createElement(
"tr",
null,
_react2.default.createElement(
"td",
{ colSpan: "7" },
this.renderYears(year)
)
)
);
}
}, {
key: "renderYearPickerFooter",
value: function renderYearPickerFooter() {
return _react2.default.createElement(
"tfoot",
null,
_react2.default.createElement(
"tr",
null,
_react2.default.createElement("td", { colSpan: "7", className: "today" })
)
);
}
}, {
key: "renderYearPanel",
value: function renderYearPanel() {
var navYear = this.state.navYear;
var year = void 0;
year = parseInt(navYear / 10, 10) * 10;
/*let {year} = this.state;
let result = [];
for (let i = begin; months.length >= i; i++) {
if (selectedMonth == i)
result.push(
<div key={i} className="month-items selected">
<p>{months[i - 1]}</p>
</div>
);
else
result.push(
<div
key={i}
className="month-items"
onClick={e => this.monthClicked(i, e)}
>
<p>{months[i - 1]}</p>
</div>
);
}
return result;*/
return _react2.default.createElement(
"div",
{ className: "datepicker-years" },
_react2.default.createElement(
"table",
{ className: "table-condensed" },
this.renderYearPickerHeader(year),
this.renderYearPickerContent(year),
this.renderYearPickerFooter()
)
);
}
}, {
key: "renderYears",
value: function renderYears(year) {
var _state = this.state,
startDate = _state.startDate,
endDate = _state.endDate;
var currentYear = this.state.currentYear;
var startYear = startDate !== -Infinity ? startDate.getUTCFullYear() : -Infinity;
var endYear = endDate !== Infinity ? endDate.getUTCFullYear() : Infinity;
year -= 1;
var html = [];
var isOld = false,
isNew = false,
active = false,
disabled = false;
for (var i = -1; i < 11; i++) {
isOld = false;
isNew = false;
active = false;
disabled = false;
if (i === -1) isOld = true;
if (i === 10) isNew = true;
if (currentYear === year) active = true;
if (year < startYear || year > endYear) disabled = true;
var prop = (isOld ? 'O' : '') + (isNew ? 'N' : '') + (active ? 'A' : '') + (disabled ? 'D' : '');
html.push(_react2.default.createElement(
_YearSpan2.default,
{
year: year,
prop: prop,
onClick: this.yearSelected,
className: "year \n " + (isOld ? 'old' : '') + " \n " + (isNew ? 'new' : '') + " \n " + (active ? 'active' : '') + " \n " + (disabled ? 'disabled' : '')
},
year
));
year += 1;
}
return html;
}
}, {
key: "render",
value: function render() {
var _state2 = this.state,
currentYear = _state2.currentYear,
yearPickerView = _state2.yearPickerView;
var yearString = currentYear.toString().replace(/1|2|3|4|5|6|7|8|9|0/gi, function (e) {
return mapObj[e];
});
return _react2.default.createElement(
"div",
{ className: "print-month" },
_react2.default.createElement(
"span",
{ onClick: this.yearPickerToggle },
yearString
),
yearPickerView && _react2.default.createElement(
"div",
{ className: "yearPicker" },
this.renderYearPanel()
)
);
}
}]);
return Years;
}(_react2.default.Component);
exports.default = Years;
});