比较日期并将 boolean 值返回到日历的逻辑

Question

I'm implementing a logic for a calendarpicker component, which has disabledDateCallback event param, which provides date, but need to apply some logic so that it can disable all dates returned from a service, provided return statement should be boolean.

<CalendarPicker 
  disabledDateCallback={(date:Date)=>{
    dateService.holidays.map((d)=>{
    return date === d
  })
}}
/>

Problem is the component need boolean, but Im not sure how to compare date and service dates n return boolean value

Answer 1

As others have noted, the following function fails to disable any of the dateService holidays

(date: Date) => {
    dateService.holidays.map((d)=> {
      return date === d
    })
 })

because the CalendarPicker 's disabledDateCallback property should be a function that returns a truthy value if the date passed to it should be disabled or a falsy value if the date should be not be disabled.

However, the function above always returns undefined , a falsy value, because it lacks a return statement.

We can begin by modifying it as follows

(date: Date) => {
    return dateService.holidays.map(d => {
      return date === d
    })
 })

but now it always returns a truthy value because Array.prototype.map transforms one array into another array by applying the specified callback to each element. Since an array is always truthy, the function will now disable all dates regardless of whether or not they match the input.

Instead, we will leverage the Array.prototype.some which takes a predicate callback and returns true if and only if at least one element in the array satisfies the predicate; otherwise it returns false .

Thus the callback we want to pass for disabledDateCallback turns out to be

(date: Date) => {
   return dateService.holidays.some(d => {
      return date === d
    })
 })

This is also highly readable and more efficient as we are using some to clearly express our intent at a high level and the some need not traverse the entire array to answer its question every as it can stop as soon as it encounters a value for which the predicate we provide returns a truthy value.

Finally, let's clean the code up a bit since it is unnecessarily verbose given that our function bodies consist of a single statement statement in which case we can remove both the block {} and the return .

(date: Date) => dateService.holidays.some(d => date === d)

Additionally, since we are passing our dateDisabledCallback inline as part of creating our <CalendarPicker> element, we can improve even things further by leveraging type inference.

<CalendarPicker 
  disabledDateCallback={date => dateService.holidays.some(d => date === d)}

It is highly desirable to allow the TypeScript type inference engine to infer the types of callback arguments, here date , for numerous reasons with type safety being the most significant. Of course this only applies to inline callbacks.