Feature: Date Time Picker all system and components completed.

example/src/pages/home/index.tsx

@@ -367,12 +367,8 @@ const Home = () => {
         }}
     >
         <DateTimePicker
-            minDate={moment().subtract(2, "months").toDate()}
-            maxDate={moment().add(1, "months").toDate()}
-            // multipleSelectMinimumRequireMS={709200000}
-            // multipleSelectMinimumRequiredDayCount={3}
-            // multipleSelectMaximumMS={745200000}
-            // multipleSelectDayLimit={10}
+            minDate={moment().subtract(2, "years").toDate()}
+            maxDate={moment().add(15, "years").toDate()}
             isWorkWithRealtime={false}
             isWorkWithSeconds={true}
             isCleanEnabled={true}

siradakiler.txt

@@ -1,9 +1,3 @@
-* ay seçimi.
-* yıl seçimi.
-* hızlı filtreler.
-* özel tarih seçerek gitme.
-* rrule sistemi.
-
 -> STATE CARD
 -> Chip
 -> Sticker

src/components/dateTimePicker/index.tsx

@@ -84,7 +84,6 @@ const DateTimePicker = ({
     dayOfWeekLength = "short",
     isWorkWithSeconds = false,
     customDateTimeSheetTheme,
-    yearLengthType = "short",
     pickerType = "date-time",
     multipleSelectMaximumMS,
     icon: IconComponentProp,
@@ -949,7 +948,6 @@ const DateTimePicker = ({
             dateCalendarType={dateCalendarType}
             isShowTools={isShowDateTimeTools}
             dayOfWeekLength={dayOfWeekLength}
-            yearLengthType={yearLengthType}
             bottomSheetRef={bottomSheetRef}
             selectDateRule={selectDateRule}
             selectObject={selectObject}

src/components/dateTimePicker/type.ts

@@ -14,9 +14,6 @@ import type {
 import type {
     MonthOfYearLengthType
 } from "../monthSelector/type";
-import type {
-    YearLengthType
-} from "../yearSelector/type";
 
 export type IDateTimePickerRef = {
     setDateRange: (dateRange: DateTimePickerDateRange) => void;
@@ -162,7 +159,6 @@ interface IDateTimePickerProps {
     contentContainerStyle?: ViewStyle;
     multipleSelectMaximumMS?: number;
     multipleSelectDayLimit?: number;
-    yearLengthType?: YearLengthType;
     returnFormat?: ValidTitleFormat;
     variant?: DateTimePickerVariant;
     isShowTodayIndicator?: boolean;

src/components/dateTimeSheet/index.tsx

@@ -1,5 +1,6 @@
 import {
-    useState
+    useState,
+    useRef
 } from "react";
 import {
     TouchableOpacity,
@@ -13,10 +14,19 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme
 } from "../../core/hooks";
+import type {
+    IDateSelectorRef
+} from "../dateSelector/type";
+import type {
+    IMonthSelectorRef
+} from "../monthSelector/type";
+import type {
+    IYearSelectorRef
+} from "../yearSelector/type";
 import MonthSelector from "../monthSelector";
+import TimeSelector from "../timeSelector";
 import YearSelector from "../yearSelector";
 import DateSelector from "../dateSelector";
-import TimeSelector from "../timeSelector";
 import BottomSheet from "../bottomSheet";
 import CheckBox from "../checkBox";
 import Loading from "../loading";
@@ -42,7 +52,6 @@ const DateTimeSheet = ({
     isWorkWithSeconds,
     dateTimePickerKey,
     bottomSheetProps,
-    yearLengthType,
     bottomSheetRef,
     customLocalize,
     selectObject,
@@ -85,6 +94,10 @@ const DateTimeSheet = ({
         setDateCalendarType
     ] = useState(dateCalendarTypeProp ?? "day");
 
+    const monthCalendarRef = useRef<IMonthSelectorRef>(null);
+    const yearCalendarRef = useRef<IYearSelectorRef>(null);
+    const dayCalendarRef = useRef<IDateSelectorRef>(null);
+
     const {
         calendarChangerToolContainer: calendarChangerToolContainerDynamicStyle,
         calendarChangerToolButton: calendarChangerToolButtonDynamicStyle,
@@ -183,13 +196,13 @@ const DateTimeSheet = ({
         if(dateCalendarType === "month") {
             return <MonthSelector
                 multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
-                localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
                 setIsSheetContentReady={setIsSheetContentReady}
                 multipleSelectDayLimit={multipleSelectDayLimit}
                 monthOfYearLengthType={monthOfYearLengthType}
                 selectMultipleObject={selectMultipleObject}
                 isShowTodayIndicator={isShowTodayIndicator}
                 selectObject={selectObject}
+                ref={monthCalendarRef}
                 dateRange={dateRange}
                 maxDate={maxDate}
                 minDate={minDate}
@@ -201,14 +214,13 @@ const DateTimeSheet = ({
         if(dateCalendarType === "year") {
             return <YearSelector
                 multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
-                localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
                 setIsSheetContentReady={setIsSheetContentReady}
                 multipleSelectDayLimit={multipleSelectDayLimit}
                 selectMultipleObject={selectMultipleObject}
                 isShowTodayIndicator={isShowTodayIndicator}
-                yearLengthType={yearLengthType}
                 selectObject={selectObject}
                 dateRange={dateRange}
+                ref={yearCalendarRef}
                 maxDate={maxDate}
                 minDate={minDate}
                 variant={variant}
@@ -226,6 +238,7 @@ const DateTimeSheet = ({
             dayOfWeekLength={dayOfWeekLength}
             selectObject={selectObject}
             dateRange={dateRange}
+            ref={dayCalendarRef}
             maxDate={maxDate}
             minDate={minDate}
             variant={variant}
@@ -313,6 +326,16 @@ const DateTimeSheet = ({
                     clean();
                 }}
             /> : null}
+            <Button
+                onPress={() => {
+                    if(monthCalendarRef.current) monthCalendarRef.current.changeCurrentYear(new Date());
+                    if(yearCalendarRef.current) yearCalendarRef.current.changeCurrentView(new Date());
+                    if(dayCalendarRef.current) dayCalendarRef.current.changeCurrentMonth(new Date());
+                }}
+                title={localize("go-to-today")}
+                spreadBehaviour="free"
+                size="small"
+            />
         </View>;
     };
 

src/components/dateTimeSheet/type.ts

@@ -25,9 +25,6 @@ import type {
 import type {
     MonthOfYearLengthType
 } from "../monthSelector/type";
-import type {
-    YearLengthType
-} from "../yearSelector/type";
 
 export type DateTimeSheetDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
@@ -63,7 +60,6 @@ interface IDateTimeSheetProps {
     dateCalendarType?: DateCalendarType;
     multipleSelectMaximumMS?: number;
     multipleSelectDayLimit?: number;
-    yearLengthType?: YearLengthType;
     isShowTodayIndicator?: boolean;
     variant: DateTimePickerVariant;
     isWorkWithRealtime: boolean;

src/components/monthSelector/index.tsx

@@ -130,7 +130,7 @@ const MonthSelector = ({
     ]);
 
     useLayoutEffect(() => {
-        if(yearMonths) setIsSheetContentReady(true);
+        if(yearMonths && yearMonths.length) setIsSheetContentReady(true);
     }, [
         yearMonths
     ]);
@@ -420,10 +420,11 @@ const MonthSelector = ({
                 stylesheet.contentContainer
             ]}
         >
-            {yearMonths && yearMonths.length ? MONTH_LINES.map((mItem) => {
+            {yearMonths && yearMonths.length ? MONTH_LINES.map((mItem, mIndex) => {
                 const currentMonths = mItem.map(mI => yearMonths[mI]);
 
                 return <View
+                    key={`month-row-${mIndex}`}
                     style={[
                         stylesheet.rowContainer
                     ]}

src/components/yearSelector/index.tsx

@@ -38,11 +38,32 @@ import {
 import moment from "moment";
 import Text from "../text";
 
+const YEAR_LINES = [
+    [
+        0,
+        1,
+        2
+    ],
+    [
+        3,
+        4,
+        5
+    ],
+    [
+        6,
+        7,
+        8
+    ],
+    [
+        9,
+        10,
+        11
+    ]
+];
+
 const YearSelector = ({
     multipleSelectMinimumRequiredDayCount,
     isShowTodayIndicator = true,
-    localeBasedFirstDayOfWeek,
-    yearLengthType = "long",
     viewDate: viewDateProp,
     multipleSelectDayLimit,
     setIsSheetContentReady,
@@ -77,17 +98,16 @@ const YearSelector = ({
     ] = useState(viewDateProp ? viewDateProp : selectDate);
 
     const [
-        monthDays,
-        setMonthDays
+        years,
+        setYears
     ] = useState<Array<CalendarYear>>([]);
 
-    const allSelectedDays = useRef<Array<Date>>([]);
+    const allSelectedYears = useRef<Array<Date>>([]);
 
     const {
         nextPrevToolChevronButton: nextPrevToolChevronButtonDynamicStyle,
         nextPrevToolContainer: nextPrevToolContainerDynamicStyle,
         todayIndicator: todayIndicatorDynamicStyle,
-        dayOfWeek: dayOfWeekDynamicStyle,
         day: dayDynamicStyle
     } = useStyles({
         radiuses,
@@ -97,11 +117,11 @@ const YearSelector = ({
     });
 
     useEffect(() => {
-        const allDays = getDaysOfViewMonth({
+        const allYears = getViewYears({
             tDate: viewDate
         });
 
-        setMonthDays(allDays);
+        setYears(allYears);
     }, [
         dateRange,
         viewDate,
@@ -109,9 +129,9 @@ const YearSelector = ({
     ]);
 
     useLayoutEffect(() => {
-        if(monthDays) setIsSheetContentReady(true);
+        if(years && years.length) setIsSheetContentReady(true);
     }, [
-        monthDays
+        years
     ]);
 
     useEffect(() => {
@@ -130,42 +150,41 @@ const YearSelector = ({
         []
     );
 
-    const getDaysOfViewMonth = ({
+    const getViewYears = ({
         tDate
     }: {
         tDate: Date
     }): Array<CalendarYear> => {
-        allSelectedDays.current = [];
+        allSelectedYears.current = [];
 
         const targetDate = moment(new Date(tDate));
 
-        const startOfCalendar = targetDate.clone().startOf("month").startOf("week");
-        const endOfCalendar = targetDate.clone().endOf("month").endOf("week");
+        const startOfCalendar = targetDate.clone().subtract(5, "years").startOf("year");
 
-        const totalDays = endOfCalendar.diff(startOfCalendar, "days") + 1;
+        const totalYears = 12;
 
-        const allDays = Array.from({
-            length: totalDays
+        const allYears = Array.from({
+            length: totalYears
         }).map((_, index) => {
-            const currentDay = startOfCalendar.clone().add(index, "days");
+            const currentYear = startOfCalendar.clone().add(index, "years");
 
             let isSelected = false;
 
             if(variant === "single" && date) {
-                allSelectedDays.current = [date];
+                allSelectedYears.current = [date];
 
-                if(moment(currentDay).isSame(date, "day")) isSelected = true;
+                if(moment(currentYear).isSame(date, "year")) isSelected = true;
             } else if(variant === "range" && dateRange && dateRange.start) {
                 if(dateRange.end) {
-                    allSelectedDays.current = Array.from({
-                        length: moment(dateRange.end).diff(dateRange.start, "days") + 1
+                    allSelectedYears.current = Array.from({
+                        length: moment(dateRange.end).diff(dateRange.start, "years") + 1
                     }, (_, i) =>
-                        moment(dateRange.start).clone().add(i, "days").toDate()
+                        moment(dateRange.start).clone().add(i, "years").toDate()
                     );
 
-                    if(moment(currentDay).isBetween(dateRange.start, dateRange.end, "day", "[]")) isSelected = true;
-                } else if(moment(currentDay).isSame(dateRange.start)) {
-                    allSelectedDays.current = [dateRange.start];
+                    if(moment(currentYear).isBetween(dateRange.start, dateRange.end, "year", "[]")) isSelected = true;
+                } else if(moment(currentYear).isSame(dateRange.start, "year")) {
+                    allSelectedYears.current = [dateRange.start];
 
                     isSelected = true;
                 }
@@ -173,47 +192,47 @@ const YearSelector = ({
 
             let isDisabled = false;
 
-            if(minDate && moment(currentDay).isBefore(minDate)) {
+            if(minDate && moment(currentYear).isBefore(moment(minDate).startOf("year"))) {
                 isDisabled = true;
             }
 
-            if(maxDate && moment(currentDay).isAfter(maxDate)) {
+            if(maxDate && moment(currentYear).isAfter(moment(maxDate).endOf("year"))) {
                 isDisabled = true;
             }
 
+            const currentYearNumber = currentYear.year();
+
             return {
-                originalIndex: allSelectedDays.current.findIndex((day) => moment(currentDay).isSame(day, "day")),
-                isCurrentView: currentDay.isSame(targetDate, "month"),
-                isToday: currentDay.isSame(moment(), "day"),
-                dayOfWeek: currentDay.weekday(),
-                dayNumber: currentDay.date(),
-                date: currentDay,
+                originalIndex: allSelectedYears.current.findIndex((day) => moment(currentYear).isSame(day, "year")),
+                isToday: currentYear.isSame(moment(), "year"),
+                title: String(currentYearNumber),
+                yearNumber: currentYearNumber,
+                year: currentYearNumber,
+                date: currentYear,
                 isDisabled,
                 isSelected
             };
         });
 
-        return allDays;
+        return allYears;
     };
 
     const renderDay = ({
-        weekIndex,
-        dayIndex,
-        dayItem
+        yearIndex,
+        yearItem
     }: {
-        dayItem: CalendarYear;
-        weekIndex: number;
-        dayIndex: number;
+        yearItem: CalendarYear;
+        yearIndex: number;
     }) => {
-        const isLastItemSelected = dayItem.isSelected && dayItem.originalIndex === allSelectedDays.current.length - 1;
-        const isFirstItemSelected = dayItem.isSelected && dayItem.originalIndex === 0;
+        const isLastItemSelected = yearItem.isSelected && yearItem.originalIndex === allSelectedYears.current.length - 1;
+        const isFirstItemSelected = yearItem.isSelected && yearItem.originalIndex === 0;
 
         const selectionStyle: Array<Mutable<ViewStyle> | null> = [
-            isFirstItemSelected && allSelectedDays.current.length > 1 ? {
+            isFirstItemSelected && allSelectedYears.current.length > 1 ? {
                 borderBottomRightRadius: 0,
                 borderTopRightRadius: 0
             } : null,
-            isLastItemSelected && allSelectedDays.current.length > 1 ? {
+            isLastItemSelected && allSelectedYears.current.length > 1 ? {
                 borderBottomLeftRadius: 0,
                 borderTopLeftRadius: 0
             } : null
@@ -221,7 +240,7 @@ const YearSelector = ({
 
         let dayTitleColor: keyof NCoreUIKit.TextContentColors = "mid";
 
-        if(dayItem.isSelected && !isLastItemSelected && !isFirstItemSelected) {
+        if(yearItem.isSelected && !isLastItemSelected && !isFirstItemSelected) {
             dayTitleColor = "emphasized";
 
             selectionStyle.push({
@@ -230,34 +249,34 @@ const YearSelector = ({
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0
             });
-        } else if(dayItem.isSelected) {
+        } else if(yearItem.isSelected) {
             dayTitleColor = "onPrimary";
         }
 
-        if(!dayItem.isCurrentView || dayItem.isDisabled) {
+        if(yearItem.isDisabled) {
             dayTitleColor = "disabled";
         }
 
         return <TouchableOpacity
-            disabled={!dayItem.isCurrentView || dayItem.isDisabled}
-            key={`day-${weekIndex}-${dayIndex}`}
+            disabled={yearItem.isDisabled}
+            key={`year-${yearIndex}`}
             onPress={() => {
-                if(!dayItem.isCurrentView) {
-                    return;
-                }
-
                 if(variant === "single") {
-                    selectObject(dayItem.date.toDate());
+                    const newDate = date as Date;
+
+                    newDate.setFullYear(yearItem.date.toDate().getFullYear());
+
+                    selectObject(newDate);
                 } else if(variant === "range") {
                     if(!dateRange || !dateRange.start) {
                         selectMultipleObject({
-                            start: new Date(dayItem.date.toDate().setHours(0, 0, 0)),
+                            start: new Date(yearItem.date.toDate().setHours(0, 0, 0)),
                             end: undefined
                         });
                         return;
                     }
 
-                    if(dateRange && moment(dateRange.start).isSame(dayItem.date, "day")) {
+                    if(dateRange && moment(dateRange.start).isSame(yearItem.date, "year")) {
                         selectMultipleObject({
                             start: undefined,
                             end: undefined
@@ -266,28 +285,28 @@ const YearSelector = ({
                     }
 
                     if(dateRange && !dateRange.end) {
-                        if(multipleSelectDayLimit && moment(dayItem.date).diff(dateRange.start, "days") >= multipleSelectDayLimit) {
+                        if(multipleSelectDayLimit && moment(yearItem.date).diff(dateRange.start, "days") >= multipleSelectDayLimit) {
                             NCoreUIKitToast.open({
                                 title: localize("maximum-selection-number-of-days-limit-exceeds")
                             });
                             return;
                         }
 
-                        if(multipleSelectMinimumRequiredDayCount && moment(dayItem.date).diff(dateRange.start, "days") + 1 < multipleSelectMinimumRequiredDayCount) {
+                        if(multipleSelectMinimumRequiredDayCount && moment(yearItem.date).diff(dateRange.start, "days") + 1 < multipleSelectMinimumRequiredDayCount) {
                             NCoreUIKitToast.open({
                                 title: localize("minimum-selection-number-of-days-required-not-provided")
                             });
                             return;
                         }
 
-                        if(moment(dayItem.date).isBefore(dateRange.start)) {
+                        if(moment(yearItem.date).isBefore(dateRange.start)) {
                             selectMultipleObject({
-                                start: new Date(dayItem.date.toDate().setHours(0, 0, 0)),
+                                start: new Date(yearItem.date.toDate().setHours(0, 0, 0)),
                                 end: undefined
                             });
                         } else {
                             selectMultipleObject({
-                                end: new Date(dayItem.date.toDate().setHours(23, 59, 59)),
+                                end: new Date(yearItem.date.toDate().setHours(23, 59, 59)),
                                 start: dateRange?.start
                             });
                         }
@@ -295,7 +314,7 @@ const YearSelector = ({
                     }
 
                     selectMultipleObject({
-                        start: dayItem.date.toDate(),
+                        start: yearItem.date.toDate(),
                         end: undefined
                     });
                 }
@@ -303,15 +322,15 @@ const YearSelector = ({
             style={[
                 stylesheet.day,
                 dayDynamicStyle,
-                dayItem.isSelected ? {
+                yearItem.isSelected ? {
                     backgroundColor: colors.content.container.primary,
                     borderColor: colors.content.container.primary
                 } : null,
-                dayItem.isSelected && !isLastItemSelected && !isFirstItemSelected ? {
+                yearItem.isSelected && !isLastItemSelected && !isFirstItemSelected ? {
                     backgroundColor: colors.content.container.emphasized,
                     borderColor: colors.content.container.emphasized
                 } : null,
-                dayItem.isSelected && (dayItem.isDisabled || !dayItem.isCurrentView) ? {
+                yearItem.isSelected && (yearItem.isDisabled) ? {
                     opacity: 0.33
                 } : null,
                 ...selectionStyle
@@ -321,14 +340,14 @@ const YearSelector = ({
                 variant="labelLargeSize"
                 color={dayTitleColor}
             >
-                {dayItem.dayNumber}
+                {yearItem.title}
             </Text>
-            {isShowTodayIndicator && dayItem.isToday ? <View
+            {isShowTodayIndicator && yearItem.isToday ? <View
                 style={[
                     stylesheet.todayIndicator,
                     selectionStyle,
                     todayIndicatorDynamicStyle,
-                    dayItem.isSelected ? {
+                    yearItem.isSelected ? {
                         borderColor: colors.content.border.subtle
                     } : null
                 ]}
@@ -345,7 +364,7 @@ const YearSelector = ({
         >
             <TouchableOpacity
                 onPress={() => {
-                    const prevViewDate = moment(viewDate).clone().subtract(1, "months");
+                    const prevViewDate = moment(viewDate).clone().subtract(12, "years");
                     setViewDate(prevViewDate.toDate());
                 }}
                 style={[
@@ -361,11 +380,16 @@ const YearSelector = ({
                 variant="labelLargeSize"
                 color="high"
             >
-                {moment(viewDate).format("MMMM YYYY")}
+                {
+                    years && years.length ?
+                        `${moment(years[0]?.date.toDate()).format("YYYY")} - ${moment(years[years.length - 1]?.date.toDate()).format("YYYY")}`
+                        :
+                        null
+                }
             </Text>
             <TouchableOpacity
                 onPress={() => {
-                    const nextViewDate = moment(viewDate).clone().add(1, "months");
+                    const nextViewDate = moment(viewDate).clone().add(12, "years");
                     setViewDate(nextViewDate.toDate());
                 }}
                 style={[
@@ -380,14 +404,6 @@ const YearSelector = ({
         </View>;
     };
 
-    let weekDays = moment.weekdays(localeBasedFirstDayOfWeek ? true : false);
-
-    if(yearLengthType === "short") {
-        weekDays = moment.weekdaysShort(localeBasedFirstDayOfWeek ? true : false);
-    } else if(yearLengthType === "very-short") {
-        weekDays = moment.weekdaysMin(localeBasedFirstDayOfWeek ? true : false);
-    }
-
     return <View
         style={[
             stylesheet.container
@@ -401,34 +417,23 @@ const YearSelector = ({
                 stylesheet.contentContainer
             ]}
         >
-            {weekDays.map((weekItem, weekIndex) => {
-                const days = monthDays.filter((dayItem) => dayItem.dayOfWeek === weekIndex);
+            {years && years.length ? YEAR_LINES.map((yItem, yIndex) => {
+                const currentYears = yItem.map(yI => years[yI]);
 
                 return <View
-                    key={`day-column-${weekIndex}`}
+                    key={`year-row-${yIndex}`}
                     style={[
-                        stylesheet.columnContainer
+                        stylesheet.rowContainer
                     ]}
                 >
-                    <Text
-                        variant="labelMediumSize"
-                        numberOfLines={1}
-                        color="low"
-                        style={{
-                            ...dayOfWeekDynamicStyle
-                        }}
-                    >
-                        {weekItem}
-                    </Text>
-                    {days.map((dayItem, dayIndex) => {
+                    {currentYears.map((yearItem, yearIndex) => {
                         return renderDay({
-                            weekIndex,
-                            dayIndex,
-                            dayItem
+                            yearItem: yearItem as CalendarYear,
+                            yearIndex
                         });
                     })}
                 </View>;
-            })}
+            }) : null}
         </View>
     </View>;
 };

src/components/yearSelector/stylesheet.ts

@@ -1,10 +1,9 @@
 import {
-    type TextStyle,
     type ViewStyle,
     StyleSheet
 } from "react-native";
 import type {
-    MonthSelectorDynamicStyle
+    YearSelectorDynamicStyle
 } from "./type";
 import type {
     Mutable
@@ -16,10 +15,8 @@ const stylesheet = StyleSheet.create({
     },
     contentContainer: {
         justifyContent: "space-between",
-        flexDirection: "row",
-        alignItems: "center",
-        flexShrink: 1,
-        flex: 1
+        flexDirection: "column",
+        alignItems: "center"
     },
     columnContainer: {
         justifyContent: "center",
@@ -45,6 +42,9 @@ const stylesheet = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         flex: 1
+    },
+    rowContainer: {
+        flexDirection: "row"
     }
 });
 
@@ -53,11 +53,8 @@ export const useStyles = ({
     borders,
     spaces,
     colors
-}: MonthSelectorDynamicStyle) => {
+}: YearSelectorDynamicStyle) => {
     const styles = {
-        dayOfWeek: {
-            marginBottom: spaces.spacingMd
-        } as Mutable<TextStyle>,
         day: {
             borderBottomRightRadius: radiuses.full,
             borderBottomLeftRadius: radiuses.full,

src/components/yearSelector/type.ts

@@ -20,14 +20,14 @@ export type YearSelectorDynamicStyle = {
 };
 
 export interface CalendarYear {
-    isCurrentView: boolean;
     originalIndex: number;
     isDisabled: boolean;
     isSelected: boolean;
     date: moment.Moment;
-    dayNumber: number;
-    dayOfWeek: number;
+    yearNumber: number;
     isToday: boolean;
+    title: string;
+    year: number;
 };
 
 export type YearSelectInitialGeneratorType = {
@@ -36,17 +36,13 @@ export type YearSelectInitialGeneratorType = {
     date?: Date;
 };
 
-export type YearLengthType = "short" | "very-short" | "long";
-
 interface IYearSelectorProps {
     selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
     setIsSheetContentReady: Dispatch<SetStateAction<boolean>>;
     multipleSelectMinimumRequiredDayCount?: number;
     selectObject: (date?: Date) => void;
-    localeBasedFirstDayOfWeek?: boolean;
     dateRange?: DateTimePickerDateRange;
     multipleSelectDayLimit?: number;
-    yearLengthType?: YearLengthType;
     isShowTodayIndicator?: boolean;
     variant: DateTimePickerVariant;
     viewDate?: Date;

src/variants/locales/default.json

@@ -24,6 +24,7 @@
             "is-optional": "Opsiyonel",
             "select-all": "Tümünü Seç",
             "end-time": "Bitiş Zamanı",
+            "go-to-today": "Bugün",
             "monthly": "Aylık",
             "yearly": "Yıllık",
             "cancel": "İptal",
@@ -124,6 +125,7 @@
             "start-time": "Start Time",
             "select-all": "Select All",
             "is-optional": "Optional",
+            "go-to-today": "Go Today",
             "clean-all": "Clean All",
             "end-time": "End Time",
             "monthly": "Monthly",