Skip to content

Commit

Permalink
Merge pull request #60 from A-Kasaaian/feat/new-optional-theme
Browse files Browse the repository at this point in the history 
feat(new-theme): optional theme
  • Loading branch information
@A-Kasaaian
A-Kasaaian authored Feb 20, 2024
2 parents 43453f2 + 37beb8d commit e726f32
Show file tree
Hide file tree
Showing 9 changed files with 226 additions and 38 deletions.
10 changes: 6 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,13 @@ Each type has its' own options.
| id | string | Adds id attribute to the input elment |
| preSelected | string | Previously selected date, it should be formatted exactly the same as the format option |
| customClass | string | To add "className" to the datepicker |
| inputTextAlign | string | Texte align of the date input. default "right" |
| inputTextAlign | string | Text align of the date input. default "right" |
| containerClass | string | To add "className" to the datepicker input container |
| monthTitleEnable | boolean | To add a title before month controller row |
| inputComponent | JSX element | To add customized input field to your datepicker |
| cancelOnBackgroundClick | boolean | To add background, which closes the datepicker on click event. It's customizable with class name "JDBackground" |
| controlValue | boolean | By stting to true, It will make preselected value control the input value |
| controlValue | boolean | By setting to true, It will make preselected value control the input value |
| newThemeColor | string | Set the new theme colorto render new theme with the provided color. Otherwise, render the default simple theme and customize it yourself |

**DateRangePicker:**

Expand All @@ -114,15 +115,16 @@ Each type has its' own options.
| onChangeStart, onChangeEnd | function | On change call of inputs (required) |
| idStart, idEnd | string | Add id attributes to the input elments |
| customClassStart, customClassEnd | string | To add class name to start and end dattepickers |
| inputTextAlign | string | Texte align of the date input. default "right" |
| inputTextAlign | string | Text align of the date input. default "right" |
| containerClass | string | To add "className" to the datepicker input container |
| monthTitleEnable | boolean | to add a title before month controller row |
| inputComponent | JSX element | To add customized input field to your datepicker |
| preSelectedStart | string | Previously selected date, it should be formatted exactly the same as the format option |
| cancelOnBackgroundClick | boolean | To add background, which closes the datepicker on click event. It's customizable with class name "JDBackground" |
| controlValue | boolean | By stting to true, It will make preselected value control the input value |
| controlValue | boolean | By setting to true, It will make preselected value control the input value |
| renderPointer | boolean | Shows the pointer to the end of range, if enabled. default: true
| pointer | JSX element | Renders the passed pointer element instead of the default one
| newThemeColor | string | Set the new theme colorto render new theme with the provided color. Otherwise, render the default simple theme and customize it yourself |

### Current date
You can use `current-date` class to style today. In the calendar you can find today has additional class of `current-date`.
Expand Down
28 changes: 14 additions & 14 deletions dist/DateTimePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "moment-jalaali", "./Partials/Days", "./Partials/Months", "./Partials/Styles", "./Partials/Years", "./Partials/TimePicker", "./Partials/Input", "./Partials/Background"], factory);
define(["exports", "react", "moment-jalaali", "./Partials/Days", "./Partials/Months", "./Partials/Styles", "./Partials/Years", "./Partials/TimePicker", "./Partials/Input", "./Partials/Background", "./index"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("moment-jalaali"), require("./Partials/Days"), require("./Partials/Months"), require("./Partials/Styles"), require("./Partials/Years"), require("./Partials/TimePicker"), require("./Partials/Input"), require("./Partials/Background"));
factory(exports, require("react"), require("moment-jalaali"), require("./Partials/Days"), require("./Partials/Months"), require("./Partials/Styles"), require("./Partials/Years"), require("./Partials/TimePicker"), require("./Partials/Input"), require("./Partials/Background"), require("./index"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.react, global.momentJalaali, global.Days, global.Months, global.Styles, global.Years, global.TimePicker, global.Input, global.Background);
factory(mod.exports, global.react, global.momentJalaali, global.Days, global.Months, global.Styles, global.Years, global.TimePicker, global.Input, global.Background, global.index);
global.undefined = mod.exports;
}
})(void 0, function (exports, _react, _momentJalaali, _Days, _Months, _Styles, _Years, _TimePicker, _Input, _Background) {
})(void 0, function (exports, _react, _momentJalaali, _Days, _Months, _Styles, _Years, _TimePicker, _Input, _Background, _index) {
"use strict";

Object.defineProperty(exports, "__esModule", {
Expand Down Expand Up @@ -83,9 +83,6 @@
}
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
_momentJalaali2["default"].loadPersian([]);
var daysInMonth = function daysInMonth(month, year) {
if (0 < month && month < 7) return 31;else if (6 < month && month < 12) return 30;else if (month === 12 && _momentJalaali2["default"].jIsLeapYear(year)) return 30;else if (month === 12 && !_momentJalaali2["default"].jIsLeapYear(year)) return 29;
};
function DateTimePicker(props) {
var id = props.id,
placeholder = props.placeholder,
Expand All @@ -97,6 +94,7 @@
inputComponent = props.inputComponent,
_props$preSelected = props.preSelected,
preSelected = _props$preSelected === void 0 ? "" : _props$preSelected,
newThemeColor = props.newThemeColor,
cancelOnBackgroundClick = props.cancelOnBackgroundClick;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
Expand Down Expand Up @@ -126,21 +124,21 @@
_useState14 = _slicedToArray(_useState13, 2),
inputValue = _useState14[0],
setInputValue = _useState14[1];
var _useState15 = (0, _react.useState)(daysInMonth((0, _momentJalaali2["default"])().format("jMM"), (0, _momentJalaali2["default"])().format("jYYYY"))),
var _useState15 = (0, _react.useState)((0, _index.daysInMonth)((0, _momentJalaali2["default"])().format("jMM"), (0, _momentJalaali2["default"])().format("jYYYY"))),
_useState16 = _slicedToArray(_useState15, 2),
daysCount = _useState16[0],
setDaysCount = _useState16[1];
(0, _react.useEffect)(function () {
if (canUseDOM && !document.getElementById("jdstyle")) {
var css = (0, _Styles2["default"])(selectedMonthFirstDay);
var css = (0, _Styles2["default"])(newThemeColor);
var head = document.head || document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.type = "text/css";
style.id = "jdstyle";
style.appendChild(document.createTextNode(css));
head.appendChild(style);
}
}, [selectedMonthFirstDay]);
}, []);
(0, _react.useEffect)(function () {
if (props.controlValue && props.preSelected !== selectedDay) {
setSelectedDay((0, _momentJalaali2["default"])(preSelected, props.format).format("jYYYYjMMjDD"));
Expand All @@ -164,15 +162,15 @@
var year = selectedYear;
if (month === 0) {
setCurrentMonth(12);
setDaysCount(daysInMonth(12, year - 1));
setDaysCount((0, _index.daysInMonth)(12, year - 1));
setSelectedYear(year - 1);
} else if (month === 13) {
setCurrentMonth(1);
setDaysCount(daysInMonth(1, year + 1));
setDaysCount((0, _index.daysInMonth)(1, year + 1));
setSelectedYear(year + 1);
} else {
setCurrentMonth(month);
setDaysCount(daysInMonth(month, year));
setDaysCount((0, _index.daysInMonth)(month, year));
}
firstDayOfMonth(month === 0 ? 12 : month === 13 ? 1 : month, month === 0 ? year - 1 : month === 13 ? year + 1 : year);
};
Expand Down Expand Up @@ -258,7 +256,9 @@
daysCount: daysCount,
firstDay: selectedMonthFirstDay,
clickEvent: daysClicked
}), /*#__PURE__*/_react2["default"].createElement("div", null, /*#__PURE__*/_react2["default"].createElement("button", {
}), /*#__PURE__*/_react2["default"].createElement("div", {
className: "JDfooter"
}, /*#__PURE__*/_react2["default"].createElement("button", {
onClick: submitHandler,
className: "JDsubmit"
}, "\u062A\u0627\u06CC\u06CC\u062F"), /*#__PURE__*/_react2["default"].createElement("button", {
Expand Down
Loading

0 comments on commit e726f32

Please sign in to comment.