diginet-core-ui 1.4.11-beta.2 → 1.4.11-beta.3

package/components/form-control/calendar/function.js

@@ -304,11 +304,22 @@ const isActive = (day, active, className, currentZoomLevel) => {
       }
       break;
     case 2:
-      if (+moment(day).diff(active, 'years') === 0) {
-        return className;
+      {
+        const quarter = Math.floor(active.getMonth() / 3);
+        const startFullQuarter = new Date(active.getFullYear(), quarter * 3, 1);
+        if (renderNavigatorContent(day)[0] === renderNavigatorContent(startFullQuarter)[0]) {
+          return className;
+        }
+        break;
       }
-      break;
     case 3:
+      {
+        if (+moment(day).diff(active, 'years') === 0) {
+          return className;
+        }
+        break;
+      }
+    case 4:
       if (renderNavigatorContent(day)[1] === Math.floor(renderNavigatorContent(active)[1] / 10) * 10) {
         return className;
       }
@@ -371,16 +382,26 @@ const isAfterLimit = (max, time) => {
  */
 const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max, currentZoomLevel) => {
   time = new Date(time);
-  const firstDay = new Date(new Date(time).setDate(1)),
-    lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0),
-    prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0),
-    today = new Date().setHours(0, 0, 0, 0),
-    lastDate = lastDay.getDate(),
-    prevDate = prevDay.getDate(),
-    firstYear = Math.floor(time.getFullYear() / 10) * 10,
-    firstDecade = Math.floor(time.getFullYear() / 100) * 100,
-    rowCount = currentZoomLevel !== 0 ? 3 : 6,
-    colCount = currentZoomLevel !== 0 ? 4 : 7;
+  const firstDay = new Date(new Date(time).setDate(1));
+  const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
+  const prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0);
+  const today = new Date().setHours(0, 0, 0, 0);
+  const lastDate = lastDay.getDate();
+  const prevDate = prevDay.getDate();
+  const firstYear = Math.floor(time.getFullYear() / 10) * 10;
+  const firstDecade = Math.floor(time.getFullYear() / 100) * 100;
+  const rowCountMap = new Map([[0, 6],
+  // day
+  [2, 1] // quarter
+  ]);
+
+  const colCountMap = new Map([[0, 7],
+  // day
+  [2, 4] // quarter
+  ]);
+
+  const rowCount = rowCountMap.get(currentZoomLevel) || 3;
+  const colCount = colCountMap.get(currentZoomLevel) || 4;
   let active = Array.isArray(activeValue) ? new Date(activeValue[0]) : new Date(activeValue);
   let tableBody = [],
     tableRaw = [],
@@ -388,7 +409,12 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
     weekDateFirst = getDateOfWeek(firstDay),
     weekDateLast = getDateOfWeek(lastDay);
   const tableDataPush = (key, dataTime, text, customClass) => {
-    const currentTime = new Date(new Date().getFullYear(), currentZoomLevel === 1 ? new Date().getMonth() : dataTime.getMonth(), 1);
+    const currentMonthIndexMap = new Map([[1, new Date().getMonth()],
+    //month
+    [2, 3 * (Math.floor((new Date().getMonth() + 3) / 3) - 1)] //quarter
+    ]);
+
+    const currentTime = new Date(new Date().getFullYear(), currentMonthIndexMap.get(currentZoomLevel) || dataTime.getMonth(), 1);
     tableData.push(jsx("td", {
       key: key,
       "data-time": Date.parse(dataTime),
@@ -410,6 +436,16 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }
       break;
     case 2:
+      /**
+       * quarter of this year
+       */
+      for (let i = 0; i < 4; i++) {
+        const quarter = i + 1;
+        const firstDateOfQuarter = new Date(time.getFullYear(), i * 3, 1);
+        tableDataPush(`this_quarter-${quarter}`, firstDateOfQuarter, `Q${quarter}`);
+      }
+      break;
+    case 3:
       {
         /**
          * year before this decade
@@ -430,7 +466,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         tableDataPush(`next_decade-${firstYear + 10}`, nextDecadeFirstYear, firstYear + 10, 'next_month');
       }
       break;
-    case 3:
+    case 4:
       {
         /**
          * decade before this century
@@ -590,44 +626,46 @@ const renderHeader = (className, currentZoomLevel) => {
  * @param {Number} currentZoomLevel
  * @returns navigator
  */
-const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn, currentZoomLevel = 0) => jsx("div", {
-  className: className.navigator.navigator
-}, jsx("div", {
-  className: className.navigator.around
-}, !currentZoomLevel && jsx(ButtonIcon, {
-  ...buttonIconProps(className.icon),
-  name: 'ArrowDoubleLeft',
-  onClick: dbLeftFn,
-  ref: refs.doubleLeft
-}), jsx(ButtonIcon, {
-  ...buttonIconProps(className.icon),
-  name: 'ArrowLeft',
-  onClick: leftFn,
-  ref: refs.left
-})), jsx("div", {
-  className: className.navigator.center
-}, jsx(Button, {
-  css: [borderRadius(20), parseWidth('100%'), pd(0)],
-  size: 'tiny',
-  onClick: fn
-}, jsx(Typography, {
-  color: 'primary',
-  type: 'h3',
-  ref: refs.content,
-  format: ['lowercase']
-}))), jsx("div", {
-  className: className.navigator.around
-}, jsx(ButtonIcon, {
-  ...buttonIconProps(className.icon),
-  name: 'ArrowRight',
-  onClick: rightFn,
-  ref: refs.right
-}), !currentZoomLevel && jsx(ButtonIcon, {
-  ...buttonIconProps(className.icon),
-  name: 'ArrowDoubleRight',
-  onClick: dbRightFn,
-  ref: refs.doubleRight
-})));
+const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn, currentZoomLevel = 0) => {
+  return jsx("div", {
+    className: className.navigator.navigator
+  }, jsx("div", {
+    className: className.navigator.around
+  }, !currentZoomLevel && jsx(ButtonIcon, {
+    ...buttonIconProps(className.icon),
+    name: 'ArrowDoubleLeft',
+    onClick: dbLeftFn,
+    ref: refs.doubleLeft
+  }), jsx(ButtonIcon, {
+    ...buttonIconProps(className.icon),
+    name: 'ArrowLeft',
+    onClick: leftFn,
+    ref: refs.left
+  })), jsx("div", {
+    className: className.navigator.center
+  }, jsx(Button, {
+    css: [borderRadius(20), parseWidth('100%'), pd(0)],
+    size: 'tiny',
+    onClick: fn
+  }, jsx(Typography, {
+    color: 'primary',
+    type: 'h3',
+    ref: refs.content,
+    format: ['lowercase']
+  }))), jsx("div", {
+    className: className.navigator.around
+  }, jsx(ButtonIcon, {
+    ...buttonIconProps(className.icon),
+    name: 'ArrowRight',
+    onClick: rightFn,
+    ref: refs.right
+  }), !currentZoomLevel && jsx(ButtonIcon, {
+    ...buttonIconProps(className.icon),
+    name: 'ArrowDoubleRight',
+    onClick: dbRightFn,
+    ref: refs.doubleRight
+  })));
+};
 /**
  *
  * @param {Date} time
@@ -651,8 +689,8 @@ const onUpdateNavigator = (time, refs, min, max, currentZoomLevel = 0) => {
   const el = refs.content.current;
   const vl = renderNavigatorContent(time);
   const year = locale.get() === 'vi' ? ` ${getGlobal(['year'])} ` : '';
-  const firstValue = new Map([[0, `${vl[0]} ${year} ${vl[1]}`], [1, vl[1]], [2, Math.floor(vl[1] / 10) * 10], [3, Math.floor(vl[1] / 100) * 100]]);
-  const lastValue = new Map([[2, Math.floor(vl[1] / 10) * 10 + 9], [3, Math.floor(vl[1] / 100) * 100 + 99]]);
+  const firstValue = new Map([[0, `${vl[0]} ${year} ${vl[1]}`], [1, vl[1]], [2, vl[1]], [3, Math.floor(vl[1] / 10) * 10], [4, Math.floor(vl[1] / 100) * 100]]);
+  const lastValue = new Map([[3, Math.floor(vl[1] / 10) * 10 + 9], [4, Math.floor(vl[1] / 100) * 100 + 99]]);
   if (el) {
     el.innerHTML = `${firstValue.get(currentZoomLevel)} ${lastValue.get(currentZoomLevel) ? `- ${lastValue.get(currentZoomLevel)}` : ``}`;
   }

package/components/form-control/calendar/index.js

@@ -58,7 +58,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const navigatorValue = useRef(null);
   const [, setActiveValue] = useState(Date.now());
   const [, setNavigatorValue] = useState(Date.now());
-  const zoomLevel = new Map([['day', 0], ['month', 1], ['year', 2], ['decade', 3]]);
+  const zoomLevel = new Map([['day', 0], ['month', 1], ['quarter', 2], ['year', 3], ['decade', 4]]);
   const maxZoomLevel = (_zoomLevel$get = zoomLevel.get(`${maxZoom}`)) !== null && _zoomLevel$get !== void 0 ? _zoomLevel$get : 3;
   const minZoomLevel = (_zoomLevel$get2 = zoomLevel.get(`${minZoom}`)) !== null && _zoomLevel$get2 !== void 0 ? _zoomLevel$get2 : 0;
   const [currentZoomLevel, setCurrentZoomLevel] = useState(minZoomLevel);
@@ -107,7 +107,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const zoomOut = () => {
     if (isZoomOutAble) {
-      const zoomOutLevel = currentZoomLevel + 1;
+      let zoomOutLevel = currentZoomLevel + 1;
+      if (zoomOutLevel === 2 && minZoom !== 'quarter') zoomOutLevel++; // skip quarter
       setCurrentZoomLevel(zoomOutLevel);
       return;
     }
@@ -118,7 +119,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const timeStamp = Number(node.dataset.time);
       const objNewDate = new Date(timeStamp);
       activeValue.current = objNewDate;
-      const zoomInLevel = currentZoomLevel - 1;
+      let zoomInLevel = currentZoomLevel - 1;
+      if (zoomInLevel === 2 && minZoom !== 'quarter') zoomInLevel--; // skip quarter
       setCurrentZoomLevel(zoomInLevel);
     }
     return;
@@ -161,13 +163,13 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const setPrevMonth = e => {
     let time = null;
     switch (currentZoomLevel) {
-      case 1:
+      case (1, 2):
         time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]); // set year = current year - 1
         break;
-      case 2:
+      case 3:
         time = new Date(getCurrentTime()[2] - 10, getCurrentTime()[1]); // set year = current year - 10
         break;
-      case 3:
+      case 4:
         time = new Date(getCurrentTime()[2] - 100, getCurrentTime()[1]); // set year = current year - 100
         break;
       default:
@@ -183,13 +185,13 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const setNextMonth = e => {
     let time = null;
     switch (currentZoomLevel) {
-      case 1:
+      case (1, 2):
         time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]); // set year = current year + 1
         break;
-      case 2:
+      case 3:
         time = new Date(getCurrentTime()[2] + 10, getCurrentTime()[1]); // set year = current year + 10
         break;
-      case 3:
+      case 4:
         time = new Date(getCurrentTime()[2] + 100, getCurrentTime()[1]); // set year = current year + 100
         break;
       default:
@@ -289,7 +291,7 @@ Calendar.propTypes = {
   /** the minimum date that can be selected within the UI component. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
   /** Min zoom level of DatePicker */
-  minZoom: PropTypes.oneOf(['day', 'month', 'year']),
+  minZoom: PropTypes.oneOf(['day', 'month', 'quarter', 'year']),
   /** Max zoom level of DatePicker */
   maxZoom: PropTypes.oneOf(['day', 'month', 'year', 'decade']),
   /** a callback function when click on a day of calendar */

package/components/form-control/date-picker/index.js

@@ -21,6 +21,8 @@ const cancelText = getGlobal(['cancel']);
 const formatValue = (value, format, utc = false) => {
   return moment(value).format(format, utc);
 };
+const viDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'Q-YYYY'], ['month', 'MM-YYYY']]);
+const pickerReturnFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY-Q'], ['month', 'YYYY-MM']]);
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   actionIconAt,
@@ -52,8 +54,10 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
-  var _placeholder, _ipRef$current, _ipRef$current2;
+  var _ref, _pickerReturnFormat$g, _placeholder, _ipRef$current, _ipRef$current2;
   if (!reference) reference = useRef(null);
+  displayFormat = (_ref = locale.get() === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) !== null && _ref !== void 0 ? _ref : displayFormat;
+  returnFormat = (_pickerReturnFormat$g = pickerReturnFormat.get(minZoom)) !== null && _pickerReturnFormat$g !== void 0 ? _pickerReturnFormat$g : returnFormat;
   placeholder = (_placeholder = placeholder) !== null && _placeholder !== void 0 ? _placeholder : displayFormat;
   const [id] = useState(randomString(6, {
     allowSymbol: false
@@ -606,7 +610,7 @@ DatePicker.propTypes = {
   /** View type of the form control. */
   viewType: PropTypes.oneOf(['outlined', 'underlined']),
   /** Min zoom level of DatePicker */
-  minZoom: PropTypes.oneOf(['day', 'month', 'year']),
+  minZoom: PropTypes.oneOf(['day', 'month', 'quarter', 'year']),
   /** Max zoom level of DatePicker */
   maxZoom: PropTypes.oneOf(['day', 'month', 'year', 'decade'])
 };

package/components/form-control/dropdown/index.js

@@ -346,10 +346,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     }
   // };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (typeof text !== 'string') text = text.toString();
@@ -361,10 +361,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -1809,9 +1809,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Style inline of dropdown items. */
@@ -1820,14 +1820,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1861,8 +1861,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
   /** Callback fired when key down input */
@@ -1873,21 +1873,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1914,19 +1914,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 

package/components/form-control/password-input/index.js

@@ -217,10 +217,10 @@ PasswordInput.propTypes = {
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
   /** Style inline of component. */
   style: PropTypes.object,
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** The value of the input element, required for a controlled component. */

package/components/form-control/text-input/index.js

@@ -216,10 +216,10 @@ TextInput.propTypes = {
   style: PropTypes.object,
   /** Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). */
   type: PropTypes.oneOf(['inform', 'edit', 'text', 'number', 'password']),
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** The value of the input element, required for a controlled component. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.11-beta.2",
+  "version": "1.4.11-beta.3",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/utils/date.js

@@ -5,7 +5,7 @@ const localeName = language === 'en' ? 'en-US' : 'vi-VN';
 const units = ['year', 'month', 'day', 'hour', 'minute', 'second', 'millisecond'];
 
 /**
- * 
+ *
  * @param {Date|String|Array} value is a date time
  * @param {String} format the input date format
  * @param {Boolean} setNow return current time if true
@@ -144,7 +144,7 @@ export const formatDate = (value, formatOutput = 'DD/MM/YYYY', utc = false) => {
       // 2 - day of week
       E: day + 1,
       // 3
-      Q: Math.ceil((month + 1) / 3),
+      Q: `Q${Math.ceil((month + 1) / 3)}`,
       // 1
 
       // Hour + Minute + second
@@ -272,7 +272,7 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
       const decimalOfMonth = decimalTotal / (endDayOfMonth * 86400000);
       result = result[0] * 12 + result[1] + decimalOfMonth;
       if (unit.toLowerCase() === 'years') {
-        result = result / 12;
+        result = Math.ceil(result / 12);
       }
     } else {
       const getValueOfUnit = (week = 1) => {
@@ -339,7 +339,7 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
   };
 
   /**
-   * 
+   *
    * @param {Date|String|Number|Array} compareDate date to calculate moment, undefined will compare with now
    * @param {String|Array} unit year|month|day|hour|minute|second|millisecond, allow undefined
    * @param {Boolean|Number} floating allow odd numbers
@@ -371,7 +371,7 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     num = (+num).toFixed(floating ? typeof floating === 'number' ? floating : 2 : 0);
     try {
       return new Intl.RelativeTimeFormat(language, {
-        numeric: "auto"
+        numeric: 'auto'
       }).format(-num, unit);
     } catch (e) {
       return e.message;