From 37beb8d03eadf7b95e43fb02b255e898b72a3f03 Mon Sep 17 00:00:00 2001 From: Alireza Kasaaian Date: Tue, 20 Feb 2024 14:49:58 +0000 Subject: [PATCH] feat(new-theme): optional theme --- README.md | 10 ++- dist/DateTimePicker.js | 28 +++--- dist/Partials/Styles.js | 7 +- dist/index.js | 5 +- index.d.ts | 2 + package.json | 2 +- src/DateTimePicker.js | 15 ++-- src/Partials/Styles.js | 190 +++++++++++++++++++++++++++++++++++++++- src/index.js | 5 +- 9 files changed, 226 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 9c701a7..b363214 100644 --- a/README.md +++ b/README.md @@ -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:** @@ -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`. diff --git a/dist/DateTimePicker.js b/dist/DateTimePicker.js index 1d2203d..9f0e8e0 100644 --- a/dist/DateTimePicker.js +++ b/dist/DateTimePicker.js @@ -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", { @@ -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, @@ -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), @@ -126,13 +124,13 @@ _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"; @@ -140,7 +138,7 @@ 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")); @@ -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); }; @@ -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", { diff --git a/dist/Partials/Styles.js b/dist/Partials/Styles.js index ef5e99e..d876588 100644 --- a/dist/Partials/Styles.js +++ b/dist/Partials/Styles.js @@ -18,8 +18,11 @@ Object.defineProperty(exports, "__esModule", { value: true }); - var Styles = function Styles(nDays) { - return "\n .JDatePicker {\n width: 300px;\n min-height: 210px;\n padding: 5px;\n position: absolute;\n background: #fff;\n border-radius: 5px;\n z-index: 1;\n }\n .days-titles div {\n width: 14.28%;\n display: inline-block;\n font-size: 14px;\n font-weight: 300;\n text-align: center;\n }\n .JDatePicker .JC-months {\n position: relative;\n display: inline-block;\n width: 100%;\n }\n .JDatePicker .monthPicker {\n position: absolute;\n right: -6px;\n width: 100%;\n background: #fff;\n text-align: center;\n padding: 5px;\n border-radius: 5px;\n top: 26px;\n box-shadow: 0px 0px 7px -2px #000;\n z-index: 1;\n }\n .JDatePicker .month-items:hover, .JDatePicker .month-items.selected {\n background: aliceblue;\n color: #ccc;\n }\n .JDatePicker .month-items {\n width: 32.5%;\n float: right;\n text-align: center;\n cursor: pointer;\n padding: 4px 0px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n .JDatePicker .JC-months .prev, .JDatePicker .JC-months .next{\n float: right;\n width: 20%;\n text-align: center;\n transform: rotate(180deg);\n cursor: pointer;\n }\n\t\t\n .JDatePicker .JC-months span:first-child{\n float: right;\n width: 15%;\n }\n .JDatePicker .JC-months .holder:last-child{\n float: right;\n width: 85%;\n }\n .JDatePicker .JC-days {\n position: relative;\n display: inline-block;\n background: #f7f7f7;\n }\n .JDatePicker .JC-days .holder {\n line-height: 24px;\n }\n .JDatePicker .print-month {\n width: 60%;\n text-align: center;\n float: right;\n cursor: pointer;\n }\n .JDatePicker .day-items{\n width: 14.28%;\n float: right;\n text-align: center;\n cursor: pointer;\n //border-bottom: solid #fff 1px;\n //border-left: 1px solid #fff;\n }\n .JDatePicker .day-items:hover, .JDatePicker .day-items.selected {\n background: #fff;\n }\n .JDatePicker .JDheader .right, .JDatePicker .JDheader .left {\n display: inline-block;\n width: 50%;\n }\n .JDatePicker .JDheader select {\n width: 94%;\n border: none;\n border-bottom: 1px solid;\n padding: 0 20%;\n }\n .JDatePicker .JDheader .left{\n text-align: center;\n }\n .JDatePicker .JDheader .right .number {\n width: 70%;\n direction: ltr;\n text-align: center;\n display: inline-block;\n }\n .JDatePicker .JDheader .right .number:hover {\n border: 1px solid #ccc;\n cursor: text !important;\n }\n .JDatePicker .JDheader .right input[type=\"tel\"] {\n width: 40%;\n z-index: 2;\n direction: ltr;\n text-align: center;\n display: inline-block;\n top: 8px;\n position: absolute;\n }\n .JDatePicker .JC-tooltip {\n position: absolute;\n background: #d9d9d9;\n z-index: 1;\n padding: 0px 10px;\n }\n .JDatePicker button {\n border: none;\n color: #fff;\n font-size: 16px;\n margin: 0 10px;\n width: 40px;\n height: 26px;\n border-radius: 5px;\n }\n .JDatePicker .JDsubmit{\n background: #7fc6ff;\n }\n .jdtrp > div {\n display: initial;\n margin: 0 6px;\n }\n "; + var Styles = function Styles(newThemeColor) { + if (newThemeColor) { + return "\n .JDatePicker {\n width: 320px;\n min-height: 210px;\n padding: 5px;\n position: absolute;\n background: #fff;\n z-index: 1;\n }\n .days-titles div {\n width: 14.28%;\n display: inline-block;\n font-size: 14px;\n font-weight: 300;\n text-align: center;\n }\n .JDatePicker .JC-months {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n .JDatePicker .monthPicker {\n position: absolute;\n right: -6px;\n width: 100%;\n background: #fff;\n text-align: center;\n padding: 5px;\n border-radius: 5px;\n top: 26px;\n box-shadow: 0px 0px 7px -2px #000;\n z-index: 1;\n }\n\n .days-titles {\n display: flex;\n height: 40px;\n align-items: center;\n }\n .JDatePicker .month-items:hover, .JDatePicker .month-items.selected {\n background: ".concat(newThemeColor, ";\n color: #fff;\n }\n .JDatePicker .month-items {\n width: 32.5%;\n float: right;\n text-align: center;\n cursor: pointer;\n padding: 4px 0px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n .JDatePicker .JC-months .prev, .JDatePicker .JC-months .next{\n float: right;\n width: 20%;\n text-align: center;\n transform: rotate(180deg);\n cursor: pointer;\n }\n \n .JDatePicker .JC-months span:first-child{\n float: right;\n width: 15%;\n }\n .JDatePicker .JC-months .holder:last-child{\n width: 85%;\n display: flex;\n align-items: center;\n }\n .JDatePicker .JC-days {\n display: inline-block;\n background: #fafafa;\n }\n .JDatePicker .JC-days .holder {\n line-height: 24px;\n }\n .JDatePicker .print-month {\n width: 60%;\n text-align: center;\n float: right;\n cursor: pointer;\n }\n .JDatePicker .day-items{\n box-sizing: border-box;\n width: 14.28%;\n float: right;\n text-align: center;\n cursor: pointer;\n height: 44px;\n border: 1px solid #fafafa;\n line-height: 44px;\n border-radius: 4px;\n }\n .JDatePicker .day-items:hover, .JDatePicker .day-items.selected {\n color: #fff;\n background-color: ").concat(newThemeColor, ";\n }\n .JDatePicker .JDheader .right, .JDatePicker .JDheader .left {\n display: inline-block;\n width: 50%;\n }\n .JDatePicker .JDheader select {\n width: 94%;\n border: none;\n border-bottom: 1px solid;\n padding: 0 20%;\n }\n .JDatePicker .JDheader .left{\n text-align: center;\n }\n .JDatePicker .JDheader .right .number {\n width: 50%;\n direction: ltr;\n text-align: center;\n display: inline-block;\n }\n .JDatePicker .JDheader .right .number:hover {\n border: 1px solid #ccc;\n cursor: text !important;\n }\n .JDatePicker .JC-years, .JDatePicker .JC-years > div {\n display: flex;\n padding: 8px;\n flex-direction: row;\n justify-content: space-between;\n height: 26px;\n align-items: center;\n }\n .JDatePicker .JC-years > div {\n width: 100%;\n }\n .JDatePicker .JC-years > div .right{\n display: flex;\n }\n .JDatePicker .left .JC-years .number{\n justify-content: center;\n }\n .JDatePicker .JC-years span.number {\n border-radius: 4px;\n height: 26px;\n line-height: 26px;\n direction: ltr;\n padding-top: 0px;\n border: 1px solid transparent;\n }\n .JDatePicker .JDheader .right input[type=\"tel\"] {\n width: 50%;\n text-align: center;\n border-radius: 4px;\n height: 100%;\n z-index: 2;\n }\n .JDatePicker .JC-tooltip {\n position: absolute;\n background: #d9d9d9;\n z-index: 1;\n padding: 0px 10px;\n }\n .JDatePicker .JDfooter {\n display: flex;\n justify-content: center;\n }\n .JDatePicker .JDfooter button {\n border: none;\n color: #fff;\n font-size: 16px;\n margin: 0 10px;\n width: 30%;\n height: 26px;\n border-radius: 5px;\n }\n .JDatePicker .JDsubmit{\n background: ").concat(newThemeColor, ";\n }\n .JDatePicker .JDcancel{\n background: gray;\n }\n .jdtrp > div {\n display: initial;\n margin: 0 6px;\n }\n "); + } + return "\n .JDatePicker {\n width: 300px;\n min-height: 210px;\n padding: 5px;\n position: absolute;\n background: #fff;\n border-radius: 5px;\n z-index: 1;\n }\n .days-titles div {\n width: 14.28%;\n display: inline-block;\n font-size: 14px;\n font-weight: 300;\n text-align: center;\n }\n .JDatePicker .JC-months {\n position: relative;\n display: inline-block;\n width: 100%;\n }\n .JDatePicker .monthPicker {\n position: absolute;\n right: -6px;\n width: 100%;\n background: #fff;\n text-align: center;\n padding: 5px;\n border-radius: 5px;\n top: 26px;\n box-shadow: 0px 0px 7px -2px #000;\n z-index: 1;\n }\n .JDatePicker .month-items:hover, .JDatePicker .month-items.selected {\n background: aliceblue;\n color: #ccc;\n }\n .JDatePicker .month-items {\n width: 32.5%;\n float: right;\n text-align: center;\n cursor: pointer;\n padding: 4px 0px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n .JDatePicker .JC-months .prev, .JDatePicker .JC-months .next{\n float: right;\n width: 20%;\n text-align: center;\n transform: rotate(180deg);\n cursor: pointer;\n }\n \n .JDatePicker .JC-months span:first-child{\n float: right;\n width: 15%;\n }\n .JDatePicker .JC-months .holder:last-child{\n float: right;\n width: 85%;\n }\n .JDatePicker .JC-days {\n position: relative;\n display: inline-block;\n background: #f7f7f7;\n }\n .JDatePicker .JC-days .holder {\n line-height: 24px;\n }\n .JDatePicker .print-month {\n width: 60%;\n text-align: center;\n float: right;\n cursor: pointer;\n }\n .JDatePicker .day-items{\n width: 14.28%;\n float: right;\n text-align: center;\n cursor: pointer;\n //border-bottom: solid #fff 1px;\n //border-left: 1px solid #fff;\n }\n .JDatePicker .day-items:hover, .JDatePicker .day-items.selected {\n background: #fff;\n }\n .JDatePicker .JDheader .right, .JDatePicker .JDheader .left {\n display: inline-block;\n width: 50%;\n }\n .JDatePicker .JDheader select {\n width: 94%;\n border: none;\n border-bottom: 1px solid;\n padding: 0 20%;\n }\n .JDatePicker .JDheader .left{\n text-align: center;\n }\n .JDatePicker .JDheader .right .number {\n width: 70%;\n direction: ltr;\n text-align: center;\n display: inline-block;\n }\n .JDatePicker .JDheader .right .number:hover {\n border: 1px solid #ccc;\n cursor: text !important;\n }\n .JDatePicker .JDheader .right input[type=\"tel\"] {\n width: 40%;\n z-index: 2;\n direction: ltr;\n text-align: center;\n display: inline-block;\n top: 8px;\n position: absolute;\n }\n .JDatePicker .JC-tooltip {\n position: absolute;\n background: #d9d9d9;\n z-index: 1;\n padding: 0px 10px;\n }\n .JDatePicker button {\n border: none;\n color: #fff;\n font-size: 16px;\n margin: 0 10px;\n width: 40px;\n height: 26px;\n border-radius: 5px;\n }\n .JDatePicker .JDsubmit{\n background: #7fc6ff;\n }\n .jdtrp > div {\n display: initial;\n margin: 0 6px;\n }\n "; }; exports["default"] = Styles; }); \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index a22b435..365a357 100644 --- a/dist/index.js +++ b/dist/index.js @@ -103,6 +103,7 @@ onChange = props.onChange, _props$preSelected = props.preSelected, preSelected = _props$preSelected === void 0 ? "" : _props$preSelected, + newThemeColor = props.newThemeColor, _props$format = props.format, format = _props$format === void 0 ? "jYYYY-jMM-jDD" : _props$format; var defaultSelected = preSelected.length > 1 ? (0, _momentJalaali2["default"])(preSelected, format).format("jYYYYjMMjDD") : ""; @@ -136,7 +137,7 @@ setDaysCount = _useState14[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"; @@ -144,7 +145,7 @@ style.appendChild(document.createTextNode(css)); head.appendChild(style); } - }, [selectedMonthFirstDay]); + }, []); (0, _react.useEffect)(function () { if (controlValue && preSelected !== selectedDay) { setSelectedDay(defaultSelected); diff --git a/index.d.ts b/index.d.ts index 1432bb2..0173091 100644 --- a/index.d.ts +++ b/index.d.ts @@ -11,6 +11,7 @@ export interface PickerProps { monthTitleEnable?: boolean; cancelOnBackgroundClick?: boolean; controlValue?: boolean; + newThemeColor?: string; } export interface RangePickerProps { @@ -32,6 +33,7 @@ export interface RangePickerProps { renderPointer?: boolean; pointer?: React.Component | React.FC; inputComponent?: React.Component | React.FC; + newstringColor?: Theme; } export class DatePicker extends React.Component { diff --git a/package.json b/package.json index 6939423..8a9fa1c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-advance-jalaali-datepicker", - "version": "1.5.3", + "version": "1.6", "description": "Jalaali React Date Picker developed with love by Alireza Kasaaian", "repository": { "type": "git", diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js index 35149ae..cedf13c 100644 --- a/src/DateTimePicker.js +++ b/src/DateTimePicker.js @@ -7,17 +7,11 @@ import Years from "./Partials/Years"; import TimePicker from "./Partials/TimePicker"; import Input from "./Partials/Input"; import Background from "./Partials/Background"; +import { daysInMonth } from './index' const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); moment.loadPersian([]); -const daysInMonth = (month, year) => { - if (0 < month && month < 7) return 31; - else if (6 < month && month < 12) return 30; - else if (month === 12 && moment.jIsLeapYear(year)) return 30; - else if (month === 12 && !moment.jIsLeapYear(year)) return 29; -}; - function DateTimePicker(props) { const { id, @@ -29,6 +23,7 @@ function DateTimePicker(props) { monthTitleEnable, inputComponent, preSelected = "", + newThemeColor, cancelOnBackgroundClick } = props; const [openPicker, setOpenPicker] = useState(false); @@ -42,7 +37,7 @@ function DateTimePicker(props) { useEffect(() => { if (canUseDOM && !document.getElementById("jdstyle")) { - const css = Styles(selectedMonthFirstDay); + const css = Styles(newThemeColor); const head = document.head || document.getElementsByTagName("head")[0]; const style = document.createElement("style"); @@ -51,7 +46,7 @@ function DateTimePicker(props) { style.appendChild(document.createTextNode(css)); head.appendChild(style); } - }, [selectedMonthFirstDay]); + }, []); useEffect(() => { if (props.controlValue && props.preSelected !== selectedDay) { @@ -183,7 +178,7 @@ function DateTimePicker(props) { firstDay={selectedMonthFirstDay} clickEvent={daysClicked} /> -
+
diff --git a/src/Partials/Styles.js b/src/Partials/Styles.js index 9806932..e4cb6cc 100644 --- a/src/Partials/Styles.js +++ b/src/Partials/Styles.js @@ -1,5 +1,189 @@ -let Styles = nDays => { - return ` +const Styles = newThemeColor => { + if (newThemeColor){ + return ` + .JDatePicker { + width: 320px; + min-height: 210px; + padding: 5px; + position: absolute; + background: #fff; + z-index: 1; + } + .days-titles div { + width: 14.28%; + display: inline-block; + font-size: 14px; + font-weight: 300; + text-align: center; + } + .JDatePicker .JC-months { + width: 100%; + display: flex; + justify-content: center; + } + .JDatePicker .monthPicker { + position: absolute; + right: -6px; + width: 100%; + background: #fff; + text-align: center; + padding: 5px; + border-radius: 5px; + top: 26px; + box-shadow: 0px 0px 7px -2px #000; + z-index: 1; + } + + .days-titles { + display: flex; + height: 40px; + align-items: center; + } + .JDatePicker .month-items:hover, .JDatePicker .month-items.selected { + background: ${newThemeColor}; + color: #fff; + } + .JDatePicker .month-items { + width: 32.5%; + float: right; + text-align: center; + cursor: pointer; + padding: 4px 0px; + border: 1px solid #ccc; + font-size: 14px; + } + .JDatePicker .JC-months .prev, .JDatePicker .JC-months .next{ + float: right; + width: 20%; + text-align: center; + transform: rotate(180deg); + cursor: pointer; + } + + .JDatePicker .JC-months span:first-child{ + float: right; + width: 15%; + } + .JDatePicker .JC-months .holder:last-child{ + width: 85%; + display: flex; + align-items: center; + } + .JDatePicker .JC-days { + display: inline-block; + background: #fafafa; + } + .JDatePicker .JC-days .holder { + line-height: 24px; + } + .JDatePicker .print-month { + width: 60%; + text-align: center; + float: right; + cursor: pointer; + } + .JDatePicker .day-items{ + box-sizing: border-box; + width: 14.28%; + float: right; + text-align: center; + cursor: pointer; + height: 44px; + border: 1px solid #fafafa; + line-height: 44px; + border-radius: 4px; + } + .JDatePicker .day-items:hover, .JDatePicker .day-items.selected { + color: #fff; + background-color: ${newThemeColor}; + } + .JDatePicker .JDheader .right, .JDatePicker .JDheader .left { + display: inline-block; + width: 50%; + } + .JDatePicker .JDheader select { + width: 94%; + border: none; + border-bottom: 1px solid; + padding: 0 20%; + } + .JDatePicker .JDheader .left{ + text-align: center; + } + .JDatePicker .JDheader .right .number { + width: 50%; + direction: ltr; + text-align: center; + display: inline-block; + } + .JDatePicker .JDheader .right .number:hover { + border: 1px solid #ccc; + cursor: text !important; + } + .JDatePicker .JC-years, .JDatePicker .JC-years > div { + display: flex; + padding: 8px; + flex-direction: row; + justify-content: space-between; + height: 26px; + align-items: center; + } + .JDatePicker .JC-years > div { + width: 100%; + } + .JDatePicker .JC-years > div .right{ + display: flex; + } + .JDatePicker .left .JC-years .number{ + justify-content: center; + } + .JDatePicker .JC-years span.number { + border-radius: 4px; + height: 26px; + line-height: 26px; + direction: ltr; + padding-top: 0px; + border: 1px solid transparent; + } + .JDatePicker .JDheader .right input[type="tel"] { + width: 50%; + text-align: center; + border-radius: 4px; + height: 100%; + z-index: 2; + } + .JDatePicker .JC-tooltip { + position: absolute; + background: #d9d9d9; + z-index: 1; + padding: 0px 10px; + } + .JDatePicker .JDfooter { + display: flex; + justify-content: center; + } + .JDatePicker .JDfooter button { + border: none; + color: #fff; + font-size: 16px; + margin: 0 10px; + width: 30%; + height: 26px; + border-radius: 5px; + } + .JDatePicker .JDsubmit{ + background: ${newThemeColor}; + } + .JDatePicker .JDcancel{ + background: gray; + } + .jdtrp > div { + display: initial; + margin: 0 6px; + } + `; + } + return ` .JDatePicker { width: 300px; min-height: 210px; @@ -53,7 +237,7 @@ let Styles = nDays => { transform: rotate(180deg); cursor: pointer; } - + .JDatePicker .JC-months span:first-child{ float: right; width: 15%; diff --git a/src/index.js b/src/index.js index 0076e92..391259f 100644 --- a/src/index.js +++ b/src/index.js @@ -31,6 +31,7 @@ function JDatePicker(props) { cancelOnBackgroundClick, onChange, preSelected = "", + newThemeColor, format = "jYYYY-jMM-jDD" } = props; @@ -45,7 +46,7 @@ function JDatePicker(props) { useEffect(() => { if (canUseDOM && !document.getElementById("jdstyle")) { - const css = Styles(selectedMonthFirstDay); + const css = Styles(newThemeColor); const head = document.head || document.getElementsByTagName("head")[0]; const style = document.createElement("style"); @@ -54,7 +55,7 @@ function JDatePicker(props) { style.appendChild(document.createTextNode(css)); head.appendChild(style); } - }, [selectedMonthFirstDay]); + }, []); useEffect(() => { if (controlValue && preSelected !== selectedDay) {