Fix datepicker year (#154)

* add next year

* fix datepicker year

* fix storybook

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@cadolabs/sphere-ui",
- "version": "5.1.0",
+ "version": "5.1.1",
  "main": "dist/index.js",
  "license": "MIT",
  "repository": "https://github.com/Cado-Labs/sphere-ui",

src/components/DatePicker/index.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react"
 import { Calendar } from "primereact/calendar"
 import { locale as primeLocale } from "primereact/api"
 
-import { getPartsOfTime, filterTooltipOptions, pickDataAttributes } from "../../utils"
+import { getYearRange, filterTooltipOptions, pickDataAttributes } from "../../utils"
 
 import { withRange } from "./withRange"
 import { MONTHS, START_DATE } from "./constants"
@@ -65,7 +65,7 @@ export const DatePicker = React.forwardRef(({
  onChange,
  dateFormat,
  placeholder,
- yearRange: getYearRange(),
+ yearRange: yearRange || getYearRange({ startCalendarDate, startRangeOfYears }),
  locale: primeLocale().locale,
  disabled,
  monthNavigator,
@@ -114,13 +114,6 @@ export const DatePicker = React.forwardRef(({
  setViewDate(e.value)
  }
 
- const getYearRange = () => {
- const { year } = getPartsOfTime()
- const startYear = startCalendarDate ? startCalendarDate.getFullYear() : startRangeOfYears
-
- return yearRange || `${startYear}:${year}`
- }
-
  const renderDateRangePicker = () => {
  const RangePicker = useMemo(() => withRange(Calendar), [])
 

src/components/DateTimePicker/index.js

@@ -1,7 +1,7 @@
 import React from "react"
 import { Calendar } from "primereact/calendar"
 
-import { getPartsOfTime, filterTooltipOptions, pickDataAttributes } from "../../utils"
+import { getYearRange, filterTooltipOptions, pickDataAttributes } from "../../utils"
 
 import { START_DATE } from "../DatePicker/constants"
 
@@ -55,13 +55,6 @@ export const DateTimePicker = React.forwardRef(({
  onVisibleChange,
  ...props
 }, ref) => {
- const getYearRange = () => {
- const { year } = getPartsOfTime()
- const startYear = startCalendarDate ? startCalendarDate.getFullYear() : startRangeOfYears
-
- return yearRange || `${startYear}:${year}`
- }
-
  const renderFooter = () => {
  if (!showUTC || !value) return null
 
@@ -135,7 +128,7 @@ export const DateTimePicker = React.forwardRef(({
  showTime
  monthNavigator={monthNavigator}
  yearNavigator={yearNavigator}
- yearRange={getYearRange()}
+ yearRange={yearRange || getYearRange({ startCalendarDate, startRangeOfYears })}
  footerTemplate={renderFooter}
  tooltip={tooltip}
  tooltipOptions={filteredTooltipOptions}

src/utils/getDate.js → src/utils/date.js

@@ -6,6 +6,14 @@ const getPartsOfTime = () => {
  return { month: currentMonth, day: currentDay, year: currentYear }
 }
 
+const getYearRange = ({ startCalendarDate, startRangeOfYears }) => {
+ const startYear = startCalendarDate ? startCalendarDate.getFullYear() : startRangeOfYears
+ const endYear = getPartsOfTime().year + 1
+
+ return `${startYear}:${endYear}`
+}
+
 export {
  getPartsOfTime,
+ getYearRange,
 }

src/utils/index.js

@@ -1,4 +1,4 @@
-export { getPartsOfTime } from "./getDate"
+export { getPartsOfTime, getYearRange } from "./date"
 export { filterTooltipOptions } from "./filterTooltipOptions"
 export { filterOptions } from "./filterOptions"
 export { pickDataAttributes } from "./pickDataAttributes"

storybook/stories/form/DatePicker/datePicker.js

@@ -15,9 +15,8 @@ function DatePickerExample () {
  const minDate = new Date()
 
  const month = new Date().getMonth()
- const nextMonth = (month === 11) ? 0 : month + 1
  const maxDate = new Date()
- maxDate.setMonth(nextMonth)
+ maxDate.setMonth(maxDate.getMonth() + 1)
 
  const minDate2 = new Date()
  minDate2.setYear(minDate2.getFullYear() - 1)

storybook/stories/form/DateTimePicker/dateTimePicker.js

@@ -16,9 +16,8 @@ function DateTimePickerExample () {
  const minDate = new Date()
 
  const month = new Date().getMonth()
- const nextMonth = (month === 11) ? 0 : month + 1
  const maxDate = new Date()
- maxDate.setMonth(nextMonth)
+ maxDate.setMonth(maxDate.getMonth() + 1)
 
  const onChange = event => {
  const target = event.target