Feature: Time base system completed.

example/src/pages/home/index.tsx

@@ -369,7 +369,12 @@ const Home = () => {
         <DateTimePicker
             minDate={moment().subtract(2, "months").toDate()}
             maxDate={moment().add(1, "months").toDate()}
+            multipleSelectMinimumRequireMS={18000000}
+            multipleSelectMinimumRequiredDayCount={3}
+            multipleSelectMaximumMS={36000000}
+            multipleSelectDayLimit={10}
             isWorkWithRealtime={false}
+            isWorkWithSeconds={true}
             isCleanEnabled={true}
             variant="range"
             initialDateRange={{

siradakiler.txt

@@ -1,10 +1,9 @@
 * saat seçim sistemi.
-    -> minTime ve maxTime işleyecez. (minDate) (maxDate)'den çekilebilir.
-    -> Time selector date yokken center çalışsın. Prop'a bağlı yaparsan iyi olur.
-    -> input blur olma durumu çözülecek. (sanki key key setliyor. 2 harf aynı anda setlenemiyor. muhtemelen debouncer bunu çözer.)
-    -> debouncer eklenecek.
+    -> validation'ın yazma işlemi bittiği anda check edip değilse geriye öyleyse okey'e yönlendirme işi.
+        Ama bu durum default yapıyı da bozmamalı.
+    -> min-max hours-minutes mantığı da eklenecek.
+    -> start end den sonra ya da end start dan önce olmayacak time için.
     -> Date değiştiğinde tarihin üzerine yazımı eklenecek.
-    -> Seconds da test edilecek.
     -> Düz date test edilecek.
 * ay seçimi.
 * yıl seçimi.

src/components/dateSelector/index.tsx

@@ -9,12 +9,12 @@ import {
 } from "react";
 import {
     TouchableOpacity,
-    View,
-    type ViewStyle
+    type ViewStyle,
+    View
 } from "react-native";
 import type {
-    CalendarDay,
-    IDateSelectorRef
+    IDateSelectorRef,
+    CalendarDay
 } from "./type";
 import type IDateSelectorProps from "./type";
 import stylesheet, {
@@ -24,7 +24,9 @@ import {
     dateSelect
 } from "./util";
 import {
-    NCoreUIKitTheme
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    NCoreUIKitToast
 } from "../../core/hooks";
 import type {
     Mutable
@@ -37,10 +39,12 @@ import moment from "moment";
 import Text from "../text";
 
 const DateSelector = ({
+    multipleSelectMinimumRequiredDayCount,
     isShowTodayIndicator = true,
     localeBasedFirstDayOfWeek,
     dayOfWeekLength = "long",
     viewDate: viewDateProp,
+    multipleSelectDayLimit,
     setIsSheetContentReady,
     selectMultipleObject,
     selectObject,
@@ -57,6 +61,10 @@ const DateSelector = ({
         colors
     } = NCoreUIKitTheme.useContext();
 
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
     const selectDate = dateSelect({
         dateRange,
         variant,
@@ -258,6 +266,20 @@ const DateSelector = ({
                     }
 
                     if(dateRange && !dateRange.end) {
+                        if(multipleSelectDayLimit && moment(dayItem.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) {
+                            NCoreUIKitToast.open({
+                                title: localize("minimum-selection-number-of-days-required-not-provided")
+                            });
+                            return;
+                        }
+
                         if(moment(dayItem.date).isBefore(dateRange.start)) {
                             selectMultipleObject({
                                 start: new Date(dayItem.date.toDate().setHours(0, 0, 0)),

src/components/dateSelector/type.ts

@@ -41,10 +41,12 @@ export type DayOfWeekLengthType = "short" | "very-short" | "long";
 interface IDateSelectorProps {
     selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
     setIsSheetContentReady: Dispatch<SetStateAction<boolean>>;
+    multipleSelectMinimumRequiredDayCount?: number;
     dayOfWeekLength?: DayOfWeekLengthType;
     selectObject: (date?: Date) => void;
     localeBasedFirstDayOfWeek?: boolean;
     dateRange?: DateTimePickerDateRange;
+    multipleSelectDayLimit?: number;
     isShowTodayIndicator?: boolean;
     variant: DateTimePickerVariant;
     viewDate?: Date;

src/components/dateTimePicker/index.tsx

@@ -13,8 +13,8 @@ import {
 import type IDateTimePickerProps from "./type";
 import type {
     DateTimePickerDateRange,
-    DateTimePickerType,
-    IDateTimePickerRef
+    IDateTimePickerRef,
+    DateTimePickerType
 } from "./type";
 import stylesheet, {
     getDateTimePickerType,
@@ -22,7 +22,8 @@ import stylesheet, {
 } from "./stylesheet";
 import {
     NCoreUIKitLocalize,
-    NCoreUIKitTheme
+    NCoreUIKitTheme,
+    NCoreUIKitToast
 } from "../../core/hooks";
 import {
     type NCoreUIKitIcon
@@ -62,9 +63,14 @@ const DateTimePickerTypeIcon: Record<Exclude<DateTimePickerType, "default">, NCo
 };
 
 const DateTimePicker = ({
+    isTimeSelectWorksWithCenterWhenTimePicker = true,
     renderLoadingIcon : LoadingIconComponentProp,
+    multipleSelectMinimumRequiredDayCount,
+    isStartDateSelectionRequired = true,
     rightIcon: RightIconComponentProp,
+    isEndDateSelectionRequired = true,
     localeBasedFirstDayOfWeek = true,
+    multipleSelectMinimumRequireMS,
     hintTextIcon: HintTextIconProp,
     spreadBehaviour = "baseline",
     customDateTimeSheetLocalize,
@@ -74,12 +80,15 @@ const DateTimePicker = ({
     isShowHintTextIcon = false,
     isWorkWithRealtime = true,
     dayOfWeekLength = "short",
+    isWorkWithSeconds = false,
     customDateTimeSheetTheme,
     pickerType = "date-time",
+    multipleSelectMaximumMS,
     icon: IconComponentProp,
     hintTextContainerStyle,
     removeSelectValidation,
     isCleanEnabled = false,
+    multipleSelectDayLimit,
     contentContainerStyle,
     subTitle = "Optional",
     isSearchable = false,
@@ -339,6 +348,38 @@ const DateTimePicker = ({
 
     const ok = () => {
         if(!isWorkWithRealtime) {
+            if(variant === "range") {
+                if(isStartDateSelectionRequired && (!tempDateRange || !tempDateRange.start)) {
+                    NCoreUIKitToast.open({
+                        title: localize("start-date-select-is-required")
+                    });
+                    return;
+                }
+
+                if(isEndDateSelectionRequired && (!tempDateRange || !tempDateRange.end)) {
+                    NCoreUIKitToast.open({
+                        title: localize("end-date-select-is-required")
+                    });
+                    return;
+                }
+
+                if(tempDateRange && tempDateRange.start && tempDateRange.end) {
+                    if(multipleSelectDayLimit && moment(tempDateRange.end).diff(tempDateRange.start, "days") >= multipleSelectDayLimit) {
+                        NCoreUIKitToast.open({
+                            title: localize("maximum-selection-number-of-days-limit-exceeds")
+                        });
+                        return;
+                    }
+
+                    if(multipleSelectMinimumRequiredDayCount && moment(tempDateRange.end).diff(tempDateRange.start, "days") + 1 < multipleSelectMinimumRequiredDayCount) {
+                        NCoreUIKitToast.open({
+                            title: localize("minimum-selection-number-of-days-required-not-provided")
+                        });
+                        return;
+                    }
+                }
+            }
+
             setDateRange(tempDateRange);
             setDateRule(tempDateRule);
             setDate(tempDate);
@@ -861,14 +902,20 @@ const DateTimePicker = ({
         {renderHintText()}
 
         <DateTimeSheet
+            isTimeSelectWorksWithCenterWhenTimePicker={isTimeSelectWorksWithCenterWhenTimePicker}
+            multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
+            multipleSelectMinimumRequireMS={multipleSelectMinimumRequireMS}
             localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
             LoadingIconComponentProp={LoadingIconComponentProp}
+            multipleSelectMaximumMS={multipleSelectMaximumMS}
+            multipleSelectDayLimit={multipleSelectDayLimit}
             dateTimePickerKey={dateTimePickerKey.current}
             customLocalize={customDateTimeSheetLocalize}
             selectMultipleObject={selectMultipleObject}
             isShowTodayIndicator={isShowTodayIndicator}
             isWorkWithRealtime={isWorkWithRealtime}
             customTheme={customDateTimeSheetTheme}
+            isWorkWithSeconds={isWorkWithSeconds}
             isShowTools={isShowDateTimeTools}
             dayOfWeekLength={dayOfWeekLength}
             selectDateRule={selectDateRule}

src/components/dateTimePicker/type.ts

@@ -148,15 +148,23 @@ interface IDateTimePickerProps {
         "onClose"
     >;
     dateRangeTitle?: (dateRange: DateTimePickerDateRange | undefined) => string;
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
+    multipleSelectMinimumRequiredDayCount?: number;
     initialDateRange?: DateTimePickerDateRange;
+    multipleSelectMinimumRequireMS?: number;
+    isStartDateSelectionRequired?: boolean;
     dayOfWeekLength?: DayOfWeekLengthType;
     pickerType?: DateTimePickerPickerType;
+    isEndDateSelectionRequired?: boolean;
     localeBasedFirstDayOfWeek?: boolean;
+    multipleSelectMaximumMS?: number;
+    multipleSelectDayLimit?: number;
     variant?: DateTimePickerVariant;
     isShowTodayIndicator?: boolean;
     titleFormat?: ValidTitleFormat;
     isShowDateTimeTools?: boolean;
     isWorkWithRealtime?: boolean;
+    isWorkWithSeconds?: boolean;
     cleanIconStyle?: ViewStyle;
     rightIconStyle?: ViewStyle;
     rightIcon?: NCoreUIKitIcon;

src/components/dateTimeSheet/index.tsx

@@ -21,13 +21,19 @@ import Button from "../button";
 import Text from "../text";
 
 const DateTimeSheet = ({
+    isTimeSelectWorksWithCenterWhenTimePicker,
+    multipleSelectMinimumRequiredDayCount,
     localeBasedFirstDayOfWeek = true,
+    multipleSelectMinimumRequireMS,
     isShowTodayIndicator = true,
     dayOfWeekLength = "short",
     LoadingIconComponentProp,
+    multipleSelectMaximumMS,
+    multipleSelectDayLimit,
     selectMultipleObject,
     isWorkWithRealtime,
     isShowTools = true,
+    isWorkWithSeconds,
     dateTimePickerKey,
     bottomSheetProps,
     bottomSheetRef,
@@ -99,8 +105,10 @@ const DateTimeSheet = ({
         >
             {
                 pickerType === "time" ? null : <DateSelector
+                    multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
                     localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
                     setIsSheetContentReady={setIsSheetContentReady}
+                    multipleSelectDayLimit={multipleSelectDayLimit}
                     selectMultipleObject={selectMultipleObject}
                     isShowTodayIndicator={isShowTodayIndicator}
                     dayOfWeekLength={dayOfWeekLength}
@@ -114,8 +122,12 @@ const DateTimeSheet = ({
             }
             {
                 pickerType === "date" ? null : <TimeSelector
+                    isTimeSelectWorksWithCenterWhenTimePicker={isTimeSelectWorksWithCenterWhenTimePicker}
+                    multipleSelectMinimumRequireMS={multipleSelectMinimumRequireMS}
+                    multipleSelectMaximumMS={multipleSelectMaximumMS}
                     setIsSheetContentReady={setIsSheetContentReady}
                     selectMultipleObject={selectMultipleObject}
+                    isWorkWithSeconds={isWorkWithSeconds}
                     selectObject={selectObject}
                     pickerType={pickerType}
                     dateRange={dateRange}

src/components/dateTimeSheet/type.ts

@@ -35,14 +35,17 @@ interface IDateTimeSheetProps {
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
     setIsLoading: Dispatch<SetStateAction<boolean>>;
     setIsActive: Dispatch<SetStateAction<boolean>>;
+    multipleSelectMinimumRequiredDayCount?: number;
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
     bottomSheetRef: Ref<IBottomSheetRef> | null;
     selectDateRule: (dateRule?: RRule) => void;
     LoadingIconComponentProp?: NCoreUIKitIcon;
+    multipleSelectMinimumRequireMS?: number;
     setDateRange: Dispatch<SetStateAction<{
         start?: Date;
         end?: Date;
@@ -51,9 +54,12 @@ interface IDateTimeSheetProps {
     pickerType: DateTimePickerPickerType;
     localeBasedFirstDayOfWeek?: boolean;
     selectObject: (date?: Date) => void;
+    multipleSelectMaximumMS?: number;
+    multipleSelectDayLimit?: number;
     isShowTodayIndicator?: boolean;
     variant: DateTimePickerVariant;
     isWorkWithRealtime: boolean;
+    isWorkWithSeconds?: boolean;
     dateTimePickerKey: string;
     bottomSheetProps?: Omit<
         IBottomSheetProps,

src/components/timeSelector/components/timeInput/index.tsx

@@ -24,6 +24,7 @@ const TimeInput: FC<TimeInputCombinedProps> = ({
     isWorkWith24HoursFormat = true,
     selectMultipleObject,
     setDateRangeValue,
+    rangeValidation,
     selectObject,
     setDateValue,
     rangeType,
@@ -88,20 +89,31 @@ const TimeInput: FC<TimeInputCombinedProps> = ({
                         resp = false;
                     }
                 }
-                console.log(0);
+
                 if(resp) {
                     if(variant === "range") {
                         const updateTime: UpdateDateRangeType = {
                             rangeType: rangeType as "start" | "end"
                         };
-                        console.log(1);
+
                         updateTime[timeType] = Number(num);
 
                         const nDRV = setDateRangeValue(updateTime);
-                        console.log(2, nDRV);
-                        if(minDate && nDRV && moment(nDRV[rangeType as "start" | "end"]).isBefore(minDate)) resp = false;
 
-                        if(maxDate && nDRV && moment(nDRV[rangeType as "start" | "end"]).isAfter(maxDate)) resp = false;
+                        if(nDRV) {
+                            const nDRVMoment = moment(nDRV[rangeType as "start" | "end"]);
+
+                            if(minDate && nDRVMoment.isBefore(minDate)) resp = false;
+
+                            if(maxDate && nDRVMoment.isAfter(maxDate)) resp = false;
+
+                            if(rangeValidation && !rangeValidation({
+                                rangeType: rangeType as "start" | "end",
+                                dateRangeValue: nDRV
+                            })) {
+                                resp = false;
+                            }
+                        }
                     } else {
                         const nDV = setDateValue({
                             [timeType]: Number(text)
@@ -112,7 +124,7 @@ const TimeInput: FC<TimeInputCombinedProps> = ({
                         if(maxDate && nDV && moment(nDV).isAfter(maxDate)) resp = false;
                     }
                 }
-                console.log(resp);
+
                 return resp;
             }}
             onChangeText={(text) => {

src/components/timeSelector/components/timeInput/type.ts

@@ -23,6 +23,11 @@ interface ITimeInputProps {
     setDateRangeValue: (props: UpdateDateRangeType) => DateTimePickerDateRange | undefined;
     selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
     setDateValue: (props: UpdateDateType) => Date | undefined;
+    rangeValidation?: (props: {
+        dateRangeValue: DateTimePickerDateRange;
+        rangeType: TimeInputRangeType;
+    }) => boolean;
+    validation?: (text: string) => boolean;
     selectObject: (date?: Date) => void;
     dateRange?: DateTimePickerDateRange;
     isWorkWith24HoursFormat: boolean;

src/components/timeSelector/index.tsx

@@ -4,6 +4,9 @@ import {
 import {
     View
 } from "react-native";
+import type {
+    TimeInputRangeType
+} from "./components/timeInput/type";
 import type ITimeSelectorProps from "./type";
 import type {
     UpdateDateRangeType,
@@ -17,14 +20,21 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme
 } from "../../core/hooks";
+import type {
+    DateTimePickerDateRange
+} from "../dateTimePicker/type";
+import moment from "moment";
 import {
     Fragment
 } from "react/jsx-runtime";
 import Text from "../text";
 
 const TimeSelector = ({
+    isTimeSelectWorksWithCenterWhenTimePicker,
+    multipleSelectMinimumRequireMS,
     isWorkWith24HoursFormat = true,
     isWorkWithSeconds = false,
+    multipleSelectMaximumMS,
     setIsSheetContentReady,
     selectMultipleObject,
     selectObject,
@@ -50,6 +60,8 @@ const TimeSelector = ({
         colonText: colonTextDynamicStyle,
         timeTitle: timeTitleDynamicStyle
     } = useStyles({
+        isTimeSelectWorksWithCenterWhenTimePicker,
+        pickerType,
         spaces
     });
 
@@ -109,6 +121,26 @@ const TimeSelector = ({
         return newDate;
     };
 
+    const rangeValidation = ({
+        dateRangeValue,
+        rangeType
+    }: {
+        dateRangeValue: DateTimePickerDateRange;
+        rangeType: TimeInputRangeType;
+    }) => {
+        if(dateRange?.start && (rangeType === "end" || dateRange.end)) {
+            if(multipleSelectMinimumRequireMS && Math.abs(moment(rangeType === "end" ? dateRangeValue[rangeType] : dateRange.end).diff(dateRange.start, "milliseconds")) > multipleSelectMinimumRequireMS) {
+                return false;
+            }
+
+            if(multipleSelectMaximumMS && Math.abs(moment(rangeType === "end" ? dateRangeValue[rangeType] : dateRange.end).diff(dateRange.start, "milliseconds")) < multipleSelectMaximumMS) {
+                return false;
+            }
+        }
+
+        return true;
+    };
+
     const renderTimeInputs = () => {
         if(variant === "range") {
             return <View
@@ -140,6 +172,7 @@ const TimeSelector = ({
                         isWorkWith24HoursFormat={isWorkWith24HoursFormat}
                         selectMultipleObject={selectMultipleObject}
                         setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
                         setDateValue={setDateValue}
                         selectObject={selectObject}
                         variant={variant}
@@ -162,6 +195,7 @@ const TimeSelector = ({
                         isWorkWith24HoursFormat={isWorkWith24HoursFormat}
                         selectMultipleObject={selectMultipleObject}
                         setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
                         setDateValue={setDateValue}
                         selectObject={selectObject}
                         timeType="minutes"
@@ -186,6 +220,7 @@ const TimeSelector = ({
                                 isWorkWith24HoursFormat={isWorkWith24HoursFormat}
                                 selectMultipleObject={selectMultipleObject}
                                 setDateRangeValue={setDateRangeValue}
+                                rangeValidation={rangeValidation}
                                 setDateValue={setDateValue}
                                 selectObject={selectObject}
                                 timeType="seconds"
@@ -217,6 +252,7 @@ const TimeSelector = ({
                         isWorkWith24HoursFormat={isWorkWith24HoursFormat}
                         selectMultipleObject={selectMultipleObject}
                         setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
                         setDateValue={setDateValue}
                         selectObject={selectObject}
                         variant={variant}
@@ -239,6 +275,7 @@ const TimeSelector = ({
                         isWorkWith24HoursFormat={isWorkWith24HoursFormat}
                         selectMultipleObject={selectMultipleObject}
                         setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
                         setDateValue={setDateValue}
                         selectObject={selectObject}
                         timeType="minutes"
@@ -263,6 +300,7 @@ const TimeSelector = ({
                                 isWorkWith24HoursFormat={isWorkWith24HoursFormat}
                                 selectMultipleObject={selectMultipleObject}
                                 setDateRangeValue={setDateRangeValue}
+                                rangeValidation={rangeValidation}
                                 setDateValue={setDateValue}
                                 selectObject={selectObject}
                                 timeType="seconds"

src/components/timeSelector/stylesheet.ts

@@ -29,6 +29,8 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
+    isTimeSelectWorksWithCenterWhenTimePicker,
+    pickerType,
     spaces
 }: TimeSelectorDynamicStyle) => {
     const styles = {
@@ -47,6 +49,11 @@ export const useStyles = ({
         } as Mutable<TextStyle>
     };
 
+    if(pickerType === "time" && isTimeSelectWorksWithCenterWhenTimePicker) {
+        styles.inputsContainer.justifyContent = "center";
+        styles.rangeContainer.justifyContent = "center";
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/timeSelector/type.ts

@@ -9,7 +9,9 @@ import type {
 } from "../dateTimePicker/type";
 
 export type TimeSelectorDynamicStyle = {
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
     spaces: NCoreUIKit.ActivePalette["spaces"];
+    pickerType: DateTimePickerPickerType;
 };
 
 export type UpdateDateType = {
@@ -28,10 +30,13 @@ export type UpdateDateRangeType = {
 interface ITimeSelectorProps {
     selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
     setIsSheetContentReady: Dispatch<SetStateAction<boolean>>;
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
+    multipleSelectMinimumRequireMS?: number;
     pickerType: DateTimePickerPickerType;
     selectObject: (date?: Date) => void;
     dateRange?: DateTimePickerDateRange;
     isWorkWith24HoursFormat?: boolean;
+    multipleSelectMaximumMS?: number;
     variant: DateTimePickerVariant;
     isWorkWithSeconds?: boolean;
     maxDate?: Date;

src/variants/locales/default.json

@@ -3,10 +3,14 @@
         "locale": "tr-TR",
         "isRTL": false,
         "translations": {
+            "minimum-selection-number-of-days-required-not-provided": "Minimum seçilmesi gereken gün sayısını karşılamıyor.",
             "selected-end-date-cannot-before-from-start-date": "Seçilen başlangıç tarihi, bitiş tarihinden sonra olamaz.",
             "selected-start-date-cannot-after-then-end-date": "Seçilen bitiş tarihi, başlangıç tarihinden önce olamaz.",
+            "maximum-selection-number-of-days-limit-exceeds": "Maksimum seçilebilen gün sınırını aşıyor.",
             "maximum-selection-limit-has-been-reached": "Maksimum seçim limitine ulaşıldı.",
             "minimum-a-item-selection-required": "Minimum 1 öğe seçimi gereklidir.",
+            "start-date-select-is-required": "Başlangıç tarihi seçimi zorunlu.",
+            "end-date-select-is-required": "Bitiş tarihi seçimi zorunlu.",
             "selected-options-with-count": "{{0}} seçim yapıldı",
             "select-any-date": "Bir tarih seçin",
             "clean-selection": "Seçimi Temizle",
@@ -94,10 +98,14 @@
         "locale": "en-US",
         "isRTL": false,
         "translations": {
+            "minimum-selection-number-of-days-required-not-provided": "It does not meet the minimum number of days required for selection.",
+            "maximum-selection-number-of-days-limit-exceeds": "It exceeds the maximum number of days that can be selected.",
             "selected-end-date-cannot-before-from-start-date": "Selected end date cannot before from start date.",
             "selected-start-date-cannot-after-then-end-date": "Selected start date cannot after then end date.",
             "maximum-selection-limit-has-been-reached": "Maximum selection limit has been reached.",
             "minimum-a-item-selection-required": "Minimum 1 item selection required.",
+            "start-date-select-is-required": "Start date select is required.",
+            "end-date-select-is-required": "End date select is required.",
             "selected-options-with-count": "{{0}} items selected",
             "select-an-option": "Select an option",
             "clean-selection": "Clean Selection",