feat: add isStartDate and isEndDate

packages/hooks/README.md

@@ -124,6 +124,14 @@ Returns `true` if a date is focused, otherwise `false`.
 
 Returns `true` if a date is the first or the last date in the selected range, otherwise `false`.
 
+#### `isStartDate: (date: Date) => boolean`
+
+Returns `true` if a date is the first or the last date in the selected range, otherwise `false`.
+
+#### `isEndDate: (date: Date) => boolean`
+
+Returns `true` if a date is the first or the last date in the selected range, otherwise `false`.
+
 #### `onResetDates: () => void`
 
 Reset start and end date.

packages/hooks/lib/index.d.ts

@@ -15,6 +15,8 @@ import {
 import {
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,
@@ -43,6 +45,8 @@ export {
   CalendarDay,
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,

packages/hooks/lib/useDatepicker/index.d.ts

@@ -10,6 +10,8 @@ import {
 import {
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,
@@ -25,6 +27,8 @@ export {
   useDatepicker,
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,

packages/hooks/lib/useDatepicker/useDatepicker.d.ts

@@ -42,6 +42,8 @@ export declare function useDatepicker({
   isDateSelected: (date: Date) => boolean
   isDateHovered: (date: Date) => boolean
   isFirstOrLastSelectedDate: (date: Date) => boolean
+  isStartDate: (date: Date) => boolean
+  isEndDate: (date: Date) => boolean
   isDateBlocked: (date: Date) => boolean
   numberOfMonths: number
   isDateFocused: (date: Date) => boolean

packages/hooks/lib/useDatepicker/useDatepicker.utils.d.ts

@@ -12,6 +12,14 @@ export declare function isFirstOrLastSelectedDate(
   startDate: Date | null,
   endDate: Date | null,
 ): boolean
+export declare function isStartDate(
+  date: Date,
+  startDate: Date | null,
+): boolean
+export declare function isEndDate(
+  date: Date,
+  endDate: Date | null,
+): boolean
 interface IsDateBlockedProps {
   date: Date
   startDate: Date | null

packages/hooks/lib/useDay/useDay.d.ts

@@ -7,6 +7,8 @@ interface UseDayProps {
   isDateHovered(date: Date): boolean
   isDateBlocked(date: Date): boolean
   isFirstOrLastSelectedDate(date: Date): boolean
+  isStartDate(date: Date): boolean
+  isEndDate(date: Date): boolean
   onDateFocus(date: Date): void
   onDateSelect(date: Date): void
   onDateHover(date: Date): void
@@ -18,6 +20,8 @@ declare function useDay({
   isDateSelected,
   isDateFocused,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateHovered,
   isDateBlocked,
   onDateSelect,

packages/hooks/src/index.ts

@@ -15,6 +15,8 @@ import {
 import {
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isEndDate,
+  isStartDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,
@@ -44,6 +46,8 @@ export {
   CalendarDay,
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,

packages/hooks/src/useDatepicker/index.ts

@@ -10,6 +10,8 @@ import {
 import {
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,
@@ -26,6 +28,8 @@ export {
   useDatepicker,
   isDateSelected,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateBlocked,
   getCurrentYearMonthAndDate,
   getDateMonthAndYear,

packages/hooks/src/useDatepicker/useDatepicker.test.ts

@@ -519,6 +519,52 @@ describe('useDatepicker', () => {
     clear()
   })
 
+
+  test('should check if date is start date', () => {
+    const onDatesChange = jest.fn()
+    advanceTo(new Date(2019, 2, 27, 0, 0, 0))
+    const {result} = renderHook(() =>
+      useDatepicker({
+        startDate: new Date(2019, 3, 1, 0, 0, 0),
+        endDate: new Date(2019, 3, 3, 0, 0, 0),
+        minBookingDate: new Date(2019, 3, 1, 0, 0, 0),
+        maxBookingDate: new Date(2019, 3, 10, 0, 0, 0),
+        focusedInput: START_DATE,
+        onDatesChange: onDatesChange,
+      }),
+    )
+
+    expect(result.current.isStartDate(new Date(2019, 3, 1, 0, 0, 0))).toBe(true)
+    expect(result.current.isStartDate(new Date(2019, 3, 2, 0, 0, 0))).toBe(false)
+    expect(result.current.isStartDate(new Date(2019, 3, 3, 0, 0, 0))).toBe(false)
+    expect(result.current.isStartDate(new Date(2019, 3, 10, 0, 0, 0))).toBe(false)
+    expect(result.current.isStartDate(new Date(2019, 2, 27, 0, 0, 0))).toBe(false)
+    clear()
+  })
+
+
+  test('should check if date is end date', () => {
+    const onDatesChange = jest.fn()
+    advanceTo(new Date(2019, 3, 27, 0, 0, 0))
+    const {result} = renderHook(() =>
+      useDatepicker({
+        startDate: new Date(2019, 3, 1, 0, 0, 0),
+        endDate: new Date(2019, 3, 3, 0, 0, 0),
+        minBookingDate: new Date(2019, 3, 1, 0, 0, 0),
+        maxBookingDate: new Date(2019, 3, 10, 0, 0, 0),
+        focusedInput: START_DATE,
+        onDatesChange: onDatesChange,
+      }),
+    )
+
+    expect(result.current.isEndDate(new Date(2019, 3, 1, 0, 0, 0))).toBe(false)
+    expect(result.current.isEndDate(new Date(2019, 3, 2, 0, 0, 0))).toBe(false)
+    expect(result.current.isEndDate(new Date(2019, 3, 3, 0, 0, 0))).toBe(true)
+    expect(result.current.isEndDate(new Date(2019, 3, 10, 0, 0, 0))).toBe(false)
+    expect(result.current.isEndDate(new Date(2019, 3, 27, 0, 0, 0))).toBe(false)
+    clear()
+  })
+
   test.each([
     {
       startDate: null,

packages/hooks/src/useDatepicker/useDatepicker.ts

@@ -11,6 +11,8 @@ import {
   isDateSelected as isDateSelectedFn,
   isDateBlocked as isDateBlockedFn,
   isFirstOrLastSelectedDate as isFirstOrLastSelectedDateFn,
+  isEndDate as isEndDateFn,
+  isStartDate as isStartDateFn,
   canSelectRange,
   isDateHovered as isDateHoveredFn,
   isInUnavailableDates,
@@ -95,6 +97,10 @@ export function useDatepicker({
   const isFirstOrLastSelectedDate = (date: Date) =>
     isFirstOrLastSelectedDateFn(date, startDate, endDate)
 
+  const isStartDate = (date: Date) => isStartDateFn(date, startDate)
+
+  const isEndDate = (date: Date) => isEndDateFn(date, endDate)
+
   const isDateBlocked = (date: Date) =>
     isDateBlockedFn({
       date,
@@ -321,6 +327,8 @@ export function useDatepicker({
     isDateSelected,
     isDateHovered,
     isFirstOrLastSelectedDate,
+    isStartDate,
+    isEndDate,
     isDateBlocked,
     numberOfMonths,
     isDateFocused,

packages/hooks/src/useDatepicker/useDatepicker.utils.ts

@@ -31,6 +31,22 @@ export function isFirstOrLastSelectedDate(
   return !!((startDate && isSameDay(date, startDate)) || (endDate && isSameDay(date, endDate)))
 }
 
+export function isStartDate(
+  date: Date,
+  startDate: Date | null,
+) {
+  return !!(startDate && isSameDay(date, startDate))
+}
+
+export function isEndDate(
+  date: Date,
+  endDate: Date | null,
+) {
+  return !!(endDate && isSameDay(date, endDate))
+}
+
+
+
 interface IsDateBlockedProps {
   date: Date
   startDate: Date | null

packages/hooks/src/useDay/useDay.test.ts

@@ -47,6 +47,8 @@ test('should not execute onClick callback, because day is disabled', () => {
       isDateSelected: jest.fn(),
       isDateFocused: jest.fn(),
       isFirstOrLastSelectedDate: jest.fn(),
+      isStartDate: jest.fn(),
+      isEndDate: jest.fn(),
       isDateHovered: jest.fn(),
       isDateBlocked: () => true,
       onDateFocus: jest.fn(),

packages/hooks/src/useDay/useDay.ts

@@ -9,6 +9,8 @@ interface UseDayProps {
   isDateHovered(date: Date): boolean
   isDateBlocked(date: Date): boolean
   isFirstOrLastSelectedDate(date: Date): boolean
+  isStartDate(date: Date): boolean
+  isEndDate(date: Date): boolean
   onDateFocus(date: Date): void
   onDateSelect(date: Date): void
   onDateHover(date: Date): void
@@ -23,6 +25,8 @@ function useDay({
   isDateSelected,
   isDateFocused,
   isFirstOrLastSelectedDate,
+  isStartDate,
+  isEndDate,
   isDateHovered,
   isDateBlocked,
   onDateSelect,

packages/styled/lib/context/datepickerContext.d.ts

@@ -10,6 +10,8 @@ interface DatepickerContext {
   isDateHovered(date: Date): boolean
   isDateBlocked(date: Date): boolean
   isFirstOrLastSelectedDate(date: Date): boolean
+  isStartDate(date: Date): boolean
+  isEndDate(date: Date): boolean
   onDayRender?(date: Date): React.ReactNode
 }
 export declare const datepickerContextDefaultValue: {
@@ -20,6 +22,8 @@ export declare const datepickerContextDefaultValue: {
   isDateHovered: () => boolean
   isDateBlocked: () => boolean
   isFirstOrLastSelectedDate: () => boolean
+  isStartDate: () => boolean
+  isEndDate: () => boolean
   onDateFocus: () => void
   onDateHover: () => void
   onDateSelect: () => void

packages/styled/src/components/Datepicker/Datepicker.tsx

@@ -91,7 +91,7 @@ const StyledDatepicker = styled('div')<StyledDatepicker>`
     css`
       direction: rtl;
     `}
-  
+
   animation-name: ${opacity0To100};
   animation-duration: 0.15s;
   animation-timing-function: ease-in;
@@ -177,6 +177,8 @@ function Datepicker(
     activeMonths,
     isDateSelected,
     isFirstOrLastSelectedDate,
+    isStartDate,
+    isEndDate,
     isDateHovered,
     firstDayOfWeek,
     onDateSelect,
@@ -281,6 +283,8 @@ function Datepicker(
           isDateSelected,
           isDateHovered,
           isFirstOrLastSelectedDate,
+          isStartDate,
+          isEndDate,
           onDateFocus,
           focusedDate,
           onDateSelect,