@cashub/ui 0.5.0 → 0.6.1

package/datetimePicker/DatePickerV2.js

@@ -15,10 +15,6 @@ var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-cl
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _DateTimePickerContext = _interopRequireDefault(require("./DateTimePickerContext"));
-
-var _datetimeFormat = _interopRequireDefault(require("../utils/format/datetimeFormat"));
-
 var _formatDate = _interopRequireDefault(require("../utils/format/formatDate"));
 
 var _useCustomPopper2 = _interopRequireDefault(require("../utils/hooks/useCustomPopper"));
@@ -27,10 +23,16 @@ var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _Input = _interopRequireDefault(require("../form/Input"));
 
+var _datetimeFormat = _interopRequireDefault(require("../utils/format/datetimeFormat"));
+
 var _Month = _interopRequireDefault(require("./accordion/Month"));
 
 var _Year = _interopRequireDefault(require("./accordion/Year"));
 
+var _DateTimePickerContext = _interopRequireDefault(require("./DateTimePickerContext"));
+
+var _GMTDate = _interopRequireDefault(require("./utils/GMTDate"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
@@ -69,12 +71,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var DatetimePickerV2 = function DatetimePickerV2(_ref) {
+var DatePickerV2 = function DatePickerV2(_ref) {
   var selected = _ref.selected,
       fixedYear = _ref.fixedYear,
       maxDate = _ref.maxDate,
       minDate = _ref.minDate,
-      onConfirm = _ref.onConfirm;
+      onConfirm = _ref.onConfirm,
+      disabled = _ref.disabled;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
@@ -84,17 +87,17 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       toggleElement = _useState2[0],
       setToggleElement = _useState2[1];
 
-  var _useState3 = (0, _react.useState)((0, _datetimeFormat.default)(selected)),
+  var _useState3 = (0, _react.useState)(selected ? (0, _datetimeFormat.default)(selected) : ''),
       _useState4 = _slicedToArray(_useState3, 2),
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
 
-  var _useState5 = (0, _react.useState)((0, _datetimeFormat.default)(selected)),
+  var _useState5 = (0, _react.useState)(selected ? (0, _datetimeFormat.default)((0, _GMTDate.default)(selected)) : (0, _datetimeFormat.default)((0, _GMTDate.default)(new Date()))),
       _useState6 = _slicedToArray(_useState5, 2),
       selectedDate = _useState6[0],
       setSelectedDate = _useState6[1];
 
-  var _useState7 = (0, _react.useState)((0, _datetimeFormat.default)(selected)),
+  var _useState7 = (0, _react.useState)(selected ? (0, _datetimeFormat.default)(selected) : ''),
       _useState8 = _slicedToArray(_useState7, 2),
       confirmDate = _useState8[0],
       setConfirmDate = _useState8[1];
@@ -175,22 +178,22 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     setAccordionCurrentDisplayType(null);
   };
 
-  var handleConfirm = function handleConfirm() {
+  var handleConfirm = (0, _react.useCallback)(function () {
+    if (!confirmDate) return;
     setSelectedDate(confirmDate);
-    onConfirm(inputValue);
+    onConfirm("".concat(inputValue, " 00:00:00"));
     setDisplayPicker(false);
     setAccordionCurrentDisplayType(null);
-  };
-
+  }, [confirmDate, inputValue, onConfirm]);
   var handleChangeDate = (0, _react.useCallback)(function (daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) {
-    var date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    var date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     var selectedYear = date.getFullYear();
     var selectedMonth = date.getMonth();
 
     if (!fixedYear) {
-      if (dayIndex < firstWeekOfMonth && selectedYear > 1) {
+      if (dayIndex < firstWeekOfMonth && selectedYear >= 1) {
         if (selectedMonth === 0) {
           date.setFullYear(selectedYear - 1);
           date.setMonth(11);
@@ -207,60 +210,82 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       }
 
       date.setDate(day);
-      date.setHours(0, 0, 0, 0);
       setSelectedDate((0, _datetimeFormat.default)(date));
       setConfirmDate((0, _datetimeFormat.default)(date));
     } else if (fixedYear) {
       if (dayIndex < firstWeekOfMonth) {
         if (selectedMonth === 0) {
           return;
-        } else {
-          date.setMonth(selectedMonth - 1);
         }
+
+        date.setMonth(selectedMonth - 1);
       } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
         if (selectedMonth === 11) {
           return;
-        } else {
-          date.setMonth(selectedMonth + 1);
         }
+
+        date.setMonth(selectedMonth + 1);
       }
 
       date.setDate(day);
-      date.setHours(0, 0, 0, 0);
       setSelectedDate((0, _datetimeFormat.default)(date));
       setConfirmDate((0, _datetimeFormat.default)(date));
     }
   }, [fixedYear, selectedDate]);
-  var handleDisabled = (0, _react.useCallback)(function (firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
-    var date = new Date(selectedDate);
+  var handleDisabled = (0, _react.useCallback)(function (firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
+    var _selectedDate$split = selectedDate.split('-'),
+        _selectedDate$split2 = _slicedToArray(_selectedDate$split, 2),
+        year = _selectedDate$split2[0],
+        month = _selectedDate$split2[1];
+
+    if (year === '0001' && month === '01' && firstWeekOfMonth >= dayIndex + 1) {
+      return true;
+    }
+
+    var myDay = day.toString();
+    if (myDay.length === 1) myDay = "0".concat(myDay);
 
-    if (firstWeekOfMonth >= dayIndex + 1) {
-      date.setMonth(date.getMonth() - 1);
-    } else if (daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1) {
-      date.setMonth(date.getMonth() + 1);
+    if (fixedYear) {
+      if (month === '01' && dayIndex + 1 <= firstWeekOfMonth) {
+        // disabled date in january
+        return dayIndex < firstWeekOfMonth;
+      } else if (month === '12' && day + firstWeekOfMonth < dayIndex + 1) {
+        // disabled date in december
+        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth ? true : false;
+      }
     }
 
-    date.setDate(day);
+    if (month === '01' && firstWeekOfMonth !== 0 && dayIndex + 1 <= firstWeekOfMonth) {
+      year = (+year - 1).toString();
+    } else if (month === '12' && lastWeekOfMonth !== 6 && day + firstWeekOfMonth < dayIndex + 1) {
+      year = (+year + 1).toString();
+    }
 
-    if (minDate && !maxDate) {
-      date.setHours(23, 59, 59, 59);
-      return (0, _datetimeFormat.default)(minDate) > (0, _datetimeFormat.default)(date);
+    month = firstWeekOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? +month + 1 : +month;
+
+    if (month === 0) {
+      month = 12;
+    } else if (month === 13) {
+      month = 1;
     }
 
-    if (maxDate && !minDate) {
-      return (0, _datetimeFormat.default)(maxDate) < (0, _datetimeFormat.default)(date);
+    if (month.toString().length === 1) month = "0".concat(month);else month = month.toString();
+    if (year.length === 1) year = "000".concat(year);
+    if (year.length === 2) year = "00".concat(year);
+    if (year.length === 3) year = "0".concat(year);
+    var compareMinDateDate = (0, _formatDate.default)((0, _datetimeFormat.default)(new Date((0, _GMTDate.default)((0, _formatDate.default)(new Date("".concat(year, "-").concat(month, "-").concat(myDay))), 'date')).setHours(23, 59, 59, 59)));
+    var compareMaxDateDate = (0, _formatDate.default)((0, _datetimeFormat.default)(new Date((0, _GMTDate.default)((0, _formatDate.default)(new Date("".concat(year, "-").concat(month, "-").concat(myDay))), 'date')).setHours(0, 0, 0, 0)));
+
+    if (minDate && !maxDate && minDate > compareMinDateDate) {
+      return true;
     }
 
-    if (minDate && maxDate) {
-      maxDate.setHours(23, 59, 59, 59);
-      date.setHours(23, 59, 59, 59);
-      return (0, _datetimeFormat.default)(minDate) > (0, _datetimeFormat.default)(date) || (0, _datetimeFormat.default)(date) > (0, _datetimeFormat.default)(maxDate);
+    if (maxDate && !minDate && maxDate < compareMaxDateDate) {
+      return true;
     }
 
-    if (fixedYear) {
-      var disabledDateInDec = new Date(selectedDate).getMonth() === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
-      var disabledDateInJan = new Date(selectedDate).getMonth() === 0 && dayIndex < firstWeekOfMonth;
-      return disabledDateInDec || disabledDateInJan ? true : false;
+    if (maxDate && minDate && (minDate > compareMinDateDate || maxDate < compareMaxDateDate)) {
+      return true;
     }
 
     return false;
@@ -272,11 +297,15 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
       if (index + 1 > firstWeekOfMonth && index < totalDays - (6 - lastWeekOfMonth)) {
         return true;
-      } else return false;
-    } else return false;
+      }
+
+      return false;
+    }
+
+    return false;
   }, [selectedDate, confirmDate]);
   var days = (0, _react.useMemo)(function () {
-    var date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    var date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
@@ -286,11 +315,11 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     date.setMonth(date.getMonth() + 1 - 1);
     date.setDate(0);
     var daysOfPrevioueMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     var firstWeekOfMonth = date.getDay();
-    date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
@@ -304,20 +333,24 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     }
 
     if (firstWeekOfMonth !== 0) {
-      for (var i = daysOfPrevioueMonthForSelectedDate; i > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; i--) {
-        days.unshift(i);
+      for (var index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+        if (date.getFullYear() === 1 && date.getMonth() === 0) {
+          days.unshift(null);
+        } else {
+          days.unshift(index);
+        }
       }
     }
 
     if (lastWeekOfMonth !== 6) {
-      for (var _i3 = 1; _i3 <= 6 - lastWeekOfMonth; _i3++) {
-        days.push(_i3);
+      for (var _index = 1; _index <= 6 - lastWeekOfMonth; _index += 1) {
+        days.push(_index);
       }
     }
 
     return days.map(function (day, index, arr) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstWeekOfMonth, daysOfMonthForSelectedDate, index, day),
+        disabled: handleDisabled(firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, index, day),
         onClick: function onClick() {
           handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
         },
@@ -334,29 +367,20 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     });
   }, []);
   (0, _react.useEffect)(function () {
-    var selectedDate = (0, _datetimeFormat.default)(selected);
-    setInputValue((0, _formatDate.default)(selectedDate));
-    setSelectedDate(selectedDate);
-    setConfirmDate(selectedDate);
+    if (!selected) return;
+    setSelectedDate((0, _datetimeFormat.default)(selected));
+    setConfirmDate((0, _datetimeFormat.default)(selected));
   }, [selected]);
   (0, _react.useEffect)(function () {
-    var _formatDate$split = (0, _formatDate.default)(confirmDate).split(' '),
-        _formatDate$split2 = _slicedToArray(_formatDate$split, 1),
-        date = _formatDate$split2[0];
-
-    setInputValue("".concat(date, " 00:00:00"));
-  }, [fixedYear, confirmDate]);
-  (0, _react.useEffect)(function () {
-    var newSelectedDate = new Date(selected);
-    newSelectedDate.setHours(0, 0, 0, 0);
-    setSelectedDate((0, _datetimeFormat.default)(newSelectedDate));
-    setConfirmDate((0, _datetimeFormat.default)(newSelectedDate));
-  }, [selected]);
+    if (!confirmDate) return;
+    setInputValue((0, _formatDate.default)(confirmDate, 'date'));
+  }, [confirmDate]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
     value: context,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
       onOutsideClick: handleConfirm,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
+        disabled: disabled,
         ref: setToggleElement,
         value: inputValue,
         onClick: handleToggle,
@@ -414,11 +438,11 @@ var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 =
 
 var Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
 
-var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: auto;\n    opacity: 1;\n  }\n"])));
+var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
 
-var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n  ", "\n  ", "\n"])), function (_ref5) {
+var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var selected = _ref5.selected;
-  return selected && "background: var(--color-hover);";
+  return selected && 'background: var(--color-hover);';
 }, function (_ref6) {
   var disabled = _ref6.disabled;
   return disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));
@@ -428,5 +452,5 @@ var ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObj
 
 var DateContent = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
 
-var _default = DatetimePickerV2;
+var _default = DatePickerV2;
 exports.default = _default;

package/datetimePicker/DatetimePicker.js

@@ -42,12 +42,12 @@ var DatetimePicker = function DatetimePicker(_ref) {
       disabled = _ref.disabled;
   var datepickerRef = (0, _react.useRef)(null);
   var datePickerProps = {
-    selected: selected ? new Date(Date.parse(selected)) : '',
-    onChange: onChange,
     dateFormat: dateFormat,
+    disabled: disabled,
+    onChange: onChange,
+    selected: selected ? new Date(Date.parse(selected)) : '',
     minDate: minDate ? new Date(Date.parse(minDate)) : '',
-    maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
-    disabled: disabled
+    maxDate: maxDate ? new Date(Date.parse(maxDate)) : ''
   };
 
   if (showTimeInput) {
@@ -71,9 +71,9 @@ var DatetimePicker = function DatetimePicker(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--color-white);\n      background: transparent;\n      border-radius: var(--border-radius-l);\n      border: var(--border-width) solid var(--border-color);\n      padding: 0 var(--spacing-s);\n      outline: none;\n\n      ", ";\n    }\n  }\n\n  .react-datepicker-popper[data-placement^='top'] {\n    padding-bottom: var(--spacing-xs);\n  }\n\n  .react-datepicker-popper[data-placement^='bottom'] {\n    padding-top: var(--spacing-xs);\n  }\n\n  .react-datepicker {\n    box-shadow: var(--box-shadow);\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    padding: var(--spacing-s);\n    font-size: var(--font-body1);\n    color: var(--color-white);\n    background: var(--color-background1);\n\n    .react-datepicker__triangle {\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n\n    .react-datepicker__header {\n      border: none;\n      padding: 0;\n      background: var(--color-background1);\n    }\n\n    .react-datepicker__current-month {\n      line-height: 36px;\n      color: var(--color-white);\n      font-size: var(--font-body1);\n      font-weight: var(--font-normal);\n    }\n\n    .react-datepicker__day-names {\n      margin: 0;\n    }\n\n    .react-datepicker__day-name,\n    .react-datepicker__day {\n      width: 36px;\n      height: 36px;\n      line-height: 36px;\n      color: var(--color-white);\n      font-weight: var(--font-normal);\n      margin: 0;\n      border-radius: 4px;\n    }\n\n    .react-datepicker__day:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__day--disabled {\n      color: var(--font-on-mute);\n      background: none !important;\n    }\n  }\n\n  .react-datepicker__month {\n    margin: 0;\n  }\n\n  .react-datepicker__navigation {\n    top: 0;\n    width: 36px;\n    height: 36px;\n    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n    border-radius: 4px;\n\n    &.react-datepicker__navigation--previous {\n      left: 0;\n    }\n\n    &.react-datepicker__navigation--next {\n      right: 0;\n    }\n\n    &:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__navigation-icon::before {\n      border-color: var(--color-white);\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n      right: -4px;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n      left: -4px;\n    }\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range,\n  .react-datepicker__month-text--selected,\n  .react-datepicker__month-text--in-selecting-range,\n  .react-datepicker__month-text--in-range,\n  .react-datepicker__quarter-text--selected,\n  .react-datepicker__quarter-text--in-selecting-range,\n  .react-datepicker__quarter-text--in-range,\n  .react-datepicker__year-text--selected,\n  .react-datepicker__year-text--in-selecting-range,\n  .react-datepicker__year-text--in-range {\n    background: var(--color-primary) !important;\n  }\n\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected {\n    background: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    margin-top: var(--spacing-s);\n    margin-left: var(--spacing-xs);\n\n    .react-datepicker-time__input input {\n      height: 36px;\n      padding: 0 var(--spacing-xs);\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      background: transparent;\n      color: var(--font-on-background);\n      outline: none;\n    }\n  }\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--color-white);\n      background: transparent;\n      border-radius: var(--border-radius-l);\n      border: var(--border-width) solid var(--border-color);\n      padding: 0 var(--spacing-s);\n      outline: none;\n\n      ", "\n    }\n  }\n\n  .react-datepicker-popper[data-placement^='top'] {\n    padding-bottom: var(--spacing-xs);\n  }\n\n  .react-datepicker-popper[data-placement^='bottom'] {\n    padding-top: var(--spacing-xs);\n  }\n\n  .react-datepicker {\n    box-shadow: var(--box-shadow);\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    padding: var(--spacing-s);\n    font-size: var(--font-body1);\n    color: var(--color-white);\n    background: var(--color-background1);\n\n    .react-datepicker__triangle {\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n\n    .react-datepicker__header {\n      border: none;\n      padding: 0;\n      background: var(--color-background1);\n    }\n\n    .react-datepicker__current-month {\n      line-height: 36px;\n      color: var(--color-white);\n      font-size: var(--font-body1);\n      font-weight: var(--font-normal);\n    }\n\n    .react-datepicker__day-names {\n      margin: 0;\n    }\n\n    .react-datepicker__day-name,\n    .react-datepicker__day {\n      width: 36px;\n      height: 36px;\n      line-height: 36px;\n      color: var(--color-white);\n      font-weight: var(--font-normal);\n      margin: 0;\n      border-radius: 4px;\n    }\n\n    .react-datepicker__day:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__day--disabled {\n      color: var(--font-on-mute);\n      background: none !important;\n    }\n  }\n\n  .react-datepicker__month {\n    margin: 0;\n  }\n\n  .react-datepicker__navigation {\n    top: 0;\n    width: 36px;\n    height: 36px;\n    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n    border-radius: 4px;\n\n    &.react-datepicker__navigation--previous {\n      left: 0;\n    }\n\n    &.react-datepicker__navigation--next {\n      right: 0;\n    }\n\n    &:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__navigation-icon::before {\n      border-color: var(--color-white);\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n      right: -4px;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n      left: -4px;\n    }\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range,\n  .react-datepicker__month-text--selected,\n  .react-datepicker__month-text--in-selecting-range,\n  .react-datepicker__month-text--in-range,\n  .react-datepicker__quarter-text--selected,\n  .react-datepicker__quarter-text--in-selecting-range,\n  .react-datepicker__quarter-text--in-range,\n  .react-datepicker__year-text--selected,\n  .react-datepicker__year-text--in-selecting-range,\n  .react-datepicker__year-text--in-range {\n    background: var(--color-primary) !important;\n  }\n\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected {\n    background: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    margin-top: var(--spacing-s);\n    margin-left: var(--spacing-xs);\n\n    .react-datepicker-time__input input {\n      height: 36px;\n      padding: 0 var(--spacing-xs);\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      background: transparent;\n      color: var(--font-on-background);\n      outline: none;\n    }\n  }\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled ? "cursor: not-allowed ; opacity: 0.5;" : '';
+  return disabled ? 'cursor: not-allowed ; opacity: 0.5;' : '';
 });
 
 var _default = DatetimePicker;

package/datetimePicker/DatetimePickerV2.js

@@ -33,6 +33,8 @@ var _Year = _interopRequireDefault(require("./accordion/Year"));
 
 var _TimePicker = _interopRequireDefault(require("./TimePicker"));
 
+var _GMTDate = _interopRequireDefault(require("./utils/GMTDate"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
@@ -87,17 +89,17 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       toggleElement = _useState2[0],
       setToggleElement = _useState2[1];
 
-  var _useState3 = (0, _react.useState)((0, _datetimeFormat.default)(selected)),
+  var _useState3 = (0, _react.useState)(selected ? (0, _datetimeFormat.default)(selected) : ''),
       _useState4 = _slicedToArray(_useState3, 2),
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
 
-  var _useState5 = (0, _react.useState)((0, _datetimeFormat.default)(selected)),
+  var _useState5 = (0, _react.useState)(selected ? (0, _datetimeFormat.default)((0, _GMTDate.default)(selected)) : (0, _datetimeFormat.default)((0, _GMTDate.default)(new Date()))),
       _useState6 = _slicedToArray(_useState5, 2),
       selectedDate = _useState6[0],
       setSelectedDate = _useState6[1];
 
-  var _useState7 = (0, _react.useState)((0, _datetimeFormat.default)(selected)),
+  var _useState7 = (0, _react.useState)(selected ? (0, _datetimeFormat.default)(selected) : ''),
       _useState8 = _slicedToArray(_useState7, 2),
       confirmDate = _useState8[0],
       setConfirmDate = _useState8[1];
@@ -113,7 +115,8 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       setContentElement = _useState12[1];
 
   var _useState13 = (0, _react.useState)(function () {
-    var date = new Date((0, _datetimeFormat.default)(selected));
+    var date = new Date((0, _datetimeFormat.default)(selected ? selected : (0, _formatDate.default)(new Date())));
+    if (!selected) date.setHours(0, 0, 0, 0);
     return "".concat(date.getHours(), ":").concat(date.getMinutes(), ":").concat(date.getSeconds());
   }),
       _useState14 = _slicedToArray(_useState13, 2),
@@ -186,22 +189,22 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     setAccordionCurrentDisplayType(null);
   };
 
-  var handleConfirm = function handleConfirm() {
+  var handleConfirm = (0, _react.useCallback)(function () {
+    if (!confirmDate) return;
     setSelectedDate(confirmDate);
     onConfirm(inputValue);
     setDisplayPicker(false);
     setAccordionCurrentDisplayType(null);
-  };
-
+  }, [confirmDate, inputValue, onConfirm]);
   var handleChangeDate = (0, _react.useCallback)(function (daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) {
-    var date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    var date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     var selectedYear = date.getFullYear();
     var selectedMonth = date.getMonth();
 
     if (!fixedYear) {
-      if (dayIndex < firstWeekOfMonth && selectedYear > 1) {
+      if (dayIndex < firstWeekOfMonth && selectedYear >= 1) {
         if (selectedMonth === 0) {
           date.setFullYear(selectedYear - 1);
           date.setMonth(11);
@@ -224,15 +227,15 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       if (dayIndex < firstWeekOfMonth) {
         if (selectedMonth === 0) {
           return;
-        } else {
-          date.setMonth(selectedMonth - 1);
         }
+
+        date.setMonth(selectedMonth - 1);
       } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
         if (selectedMonth === 11) {
           return;
-        } else {
-          date.setMonth(selectedMonth + 1);
         }
+
+        date.setMonth(selectedMonth + 1);
       }
 
       date.setDate(day);
@@ -240,36 +243,60 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       setConfirmDate((0, _datetimeFormat.default)(date));
     }
   }, [fixedYear, selectedDate]);
-  var handleDisabled = (0, _react.useCallback)(function (firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
-    var date = new Date(selectedDate);
+  var handleDisabled = (0, _react.useCallback)(function (firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
+    var _selectedDate$split = selectedDate.split('-'),
+        _selectedDate$split2 = _slicedToArray(_selectedDate$split, 2),
+        year = _selectedDate$split2[0],
+        month = _selectedDate$split2[1];
+
+    if (year === '0001' && month === '01' && firstWeekOfMonth >= dayIndex + 1) {
+      return true;
+    }
 
-    if (firstWeekOfMonth >= dayIndex + 1) {
-      date.setMonth(date.getMonth() - 1);
-    } else if (daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1) {
-      date.setMonth(date.getMonth() + 1);
+    var myDay = day.toString();
+    if (myDay.length === 1) myDay = "0".concat(myDay);
+
+    if (fixedYear) {
+      if (month === '01' && dayIndex + 1 <= firstWeekOfMonth) {
+        // disabledDateInJan
+        return dayIndex < firstWeekOfMonth;
+      } else if (month === '12' && day + firstWeekOfMonth < dayIndex + 1) {
+        // disabledDateInDec
+        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
+      }
     }
 
-    date.setDate(day);
+    if (month === '01' && firstWeekOfMonth !== 0 && dayIndex + 1 <= firstWeekOfMonth) {
+      year = (+year - 1).toString();
+    } else if (month === '12' && lastWeekOfMonth !== 6 && day + firstWeekOfMonth < dayIndex + 1) {
+      year = (+year + 1).toString();
+    }
+
+    month = firstWeekOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? +month + 1 : +month;
 
-    if (minDate && !maxDate) {
-      date.setHours(23, 59, 59, 59);
-      return (0, _datetimeFormat.default)(minDate) > (0, _datetimeFormat.default)(date);
+    if (month === 0) {
+      month = 12;
+    } else if (month === 13) {
+      month = 1;
     }
 
-    if (maxDate && !minDate) {
-      return (0, _datetimeFormat.default)(maxDate) < (0, _datetimeFormat.default)(date);
+    if (year.length === 1) year = "000".concat(year);
+    if (year.length === 2) year = "00".concat(year);
+    if (year.length === 3) year = "0".concat(year);
+    if (month.toString().length === 1) month = "0".concat(month);else month = month.toString();
+    var compareMinDateDate = (0, _formatDate.default)((0, _datetimeFormat.default)(new Date((0, _GMTDate.default)((0, _formatDate.default)(new Date("".concat(year, "-").concat(month, "-").concat(myDay))), 'date')).setHours(23, 59, 59, 59)));
+    var compareMaxDateDate = (0, _formatDate.default)((0, _datetimeFormat.default)(new Date((0, _GMTDate.default)((0, _formatDate.default)(new Date("".concat(year, "-").concat(month, "-").concat(myDay))), 'date')).setHours(0, 0, 0, 0)));
+
+    if (minDate && !maxDate && minDate > compareMinDateDate) {
+      return true;
     }
 
-    if (minDate && maxDate) {
-      maxDate.setHours(23, 59, 59, 59);
-      date.setHours(23, 59, 59, 59);
-      return (0, _datetimeFormat.default)(minDate) > (0, _datetimeFormat.default)(date) || (0, _datetimeFormat.default)(date) > (0, _datetimeFormat.default)(maxDate);
+    if (maxDate && !minDate && maxDate < compareMaxDateDate) {
+      return true;
     }
 
-    if (fixedYear) {
-      var disabledDateInDec = new Date(selectedDate).getMonth() === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
-      var disabledDateInJan = new Date(selectedDate).getMonth() === 0 && dayIndex < firstWeekOfMonth;
-      return disabledDateInDec || disabledDateInJan ? true : false;
+    if (maxDate && minDate && (minDate > compareMinDateDate || maxDate < compareMaxDateDate)) {
+      return true;
     }
 
     return false;
@@ -281,11 +308,15 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
       if (index + 1 > firstWeekOfMonth && index < totalDays - (6 - lastWeekOfMonth)) {
         return true;
-      } else return false;
-    } else return false;
+      }
+
+      return false;
+    }
+
+    return false;
   }, [selectedDate, confirmDate]);
   var days = (0, _react.useMemo)(function () {
-    var date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    var date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
@@ -295,11 +326,11 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     date.setMonth(date.getMonth() + 1 - 1);
     date.setDate(0);
     var daysOfPrevioueMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     var firstWeekOfMonth = date.getDay();
-    date = new Date(selectedDate); //先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
@@ -313,20 +344,24 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     }
 
     if (firstWeekOfMonth !== 0) {
-      for (var i = daysOfPrevioueMonthForSelectedDate; i > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; i--) {
-        days.unshift(i);
+      for (var index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+        if (date.getFullYear() === 1 && date.getMonth() === 0) {
+          days.unshift(null);
+        } else {
+          days.unshift(index);
+        }
       }
     }
 
     if (lastWeekOfMonth !== 6) {
-      for (var _i3 = 1; _i3 <= 6 - lastWeekOfMonth; _i3++) {
-        days.push(_i3);
+      for (var _index = 1; _index <= 6 - lastWeekOfMonth; _index += 1) {
+        days.push(_index);
       }
     }
 
     return days.map(function (day, index, arr) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstWeekOfMonth, daysOfMonthForSelectedDate, index, day),
+        disabled: handleDisabled(firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, index, day),
         onClick: function onClick() {
           handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
         },
@@ -343,17 +378,22 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     });
   }, []);
   (0, _react.useEffect)(function () {
-    var selectedDate = (0, _datetimeFormat.default)(selected);
-    var dateObj = new Date(selectedDate);
-    setInputValue((0, _formatDate.default)(selectedDate));
-    setSelectedDate(selectedDate);
-    setConfirmDate(selectedDate);
-    setTime("".concat(dateObj.getHours(), ":").concat(dateObj.getMinutes(), ":").concat(dateObj.getSeconds()));
+    if (!selected) return;
+    var date = (0, _datetimeFormat.default)(selected);
+
+    var _date$split = date.split('T'),
+        _date$split2 = _slicedToArray(_date$split, 2),
+        time = _date$split2[1];
+
+    setSelectedDate(date);
+    setConfirmDate(date);
+    setTime(time);
   }, [selected]);
   (0, _react.useEffect)(function () {
-    var date = (0, _formatDate.default)(confirmDate);
-    setInputValue(date);
-  }, [fixedYear, confirmDate, time]);
+    if (!confirmDate) return;
+    var date = (0, _formatDate.default)(confirmDate, 'date');
+    setInputValue("".concat(date, " ").concat(time));
+  }, [confirmDate, time]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
     value: context,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
@@ -422,9 +462,9 @@ var Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5
 
 var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
 
-var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n  ", "\n  ", "\n"])), function (_ref5) {
+var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var selected = _ref5.selected;
-  return selected && "background: var(--color-hover);";
+  return selected && 'background: var(--color-hover);';
 }, function (_ref6) {
   var disabled = _ref6.disabled;
   return disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));