Implement Validation for Date Picker #2165

JeevaRamanathan · 2024-10-26T14:49:45Z

Hi @FredLL-Avaiga,
Referencing issue #848, I’ve added the following specifications for date validation to handle date disabling options:

{
    disableWeekdays?: boolean;
    disableWeekends?: boolean;
    disablePastDays?: boolean;
    disableFutureDays?: boolean;
    dayOfWeek?: number; // 0-6 (0 = Monday, ..., 6 = Sunday)
    interval?: number;
    oddInterval?:boolean;
    occurence?: number;
}

The rules for disabling dates include options for disabling past days or future days, weekdays, weekends, or specific day of the month with disablePastDays, disableFutureDays,disableWeekdays, disableWeekends,dayOfWeek.

To disable alternating days:

disable_date_config_rule = {
    dayOfWeek: 3,
    interval: 2 // Disables alternate Wednesdays by default (even weeks)
}
<|{date}|date|disable_date_config={disable_date_config_rule}|>

Setting oddInterval: True will disable Wednesdays on the 1st, 3rd, and 5th weeks

To disable the nth occurrence of a specific weekday in the month:

disable_date_config_rule = {
    dayOfWeek: 1,
    occurrence: 1 // Disables the first Monday of each month
}

Could you please review this and let me know if any modifications are needed for better handling of these specifications?

Signed-off-by: JeevaRamanathan M <[email protected]>

FredLL-Avaiga · 2024-10-26T15:11:08Z

I think a dict (object) might not be the more user-friendly way for the user...
Let's call a friend : @FabienLelaquais what do you think?

FabienLelaquais · 2024-10-26T15:39:56Z

I think a dict (object) might not be the more user-friendly way for the user... Let's call a friend : @FabienLelaquais what do you think?

Actually I do think that a dict may be the only option we have.
The expressivity we want is going to need several slots that are specified or not.

However, I wouldn't hardcode the notion of weekend or workday. This varies across cultures.

My first thoughts about this would be a dict with two optional slots: one would indicate dates that must be forbidden, another would be dates that are explicitly available.
Say you want to book a table at a restaurant that opens only on Thursdays and Fridays, but closes for the Christmas season.
So you want to allow the selection of all the future Thursdays and Fridays to be selectable, except for the vacation period.

The way I see you can express this is:

date_constraints = {
   "accept": {
       "days_of_week": [3, 4]
     },
     "reject": {
       "past": True,
       "period": [ [ (2024, 12, 23), (2024, 12, 31) ] ]
      }
}

This has the issue of having days that fall in the two buckets, the a priority may be needed.

Now I like the 'occurrence' thing but we need to allow for more expressivity, again.
Like catching "U.S. presidential elections are held every four years on the first Tuesday after the first Monday in November".
That sounds tricky to me... except if you allow for an explicit list of accepted dates.

Same for 'repeat' (or 'interval'). The period (week, month, year...) needs to be expressed somehow.

JeevaRamanathan · 2024-10-26T17:01:40Z

This has the issue of having days that fall in the two buckets, the a priority may be needed.

@FabienLelaquais, for example, Wednesday and Thursday (days 3 and 4) are accepted but also fall within the rejection period. Are you referring to this as falling into two buckets and needing prioritization, or is it something different?

JeevaRamanathan · 2024-10-28T07:35:26Z

Hi @FabienLelaquais, I'd like to get your thoughts on the updated structure for date_constraints. I’ve added support for priority, weekly, monthly, yearly rules along with the after week attribute to address the cases like US election logic.

Weekly

  const date_constraints = {
    priority: "reject", //optional
    accept: {
      day_of_week: [0, 1],
    },
    reject: {
      past: true,
      period: [
        { start: "2024, 11, 23", end: "2024, 11, 30 " },
        { start: "2025, 11, 23", end: "2025, 11, 30" },
      ],
      repeat: {
        frequency: "weekly",
        occurrence: [
          {
            day_of_week: 1, // disables every monday
            interval: 1,
            odd_interval: false,
          },
          {
            day_of_week: 3,  // disables alternate wednesday
            interval: 2,
            odd_interval: false,
          },
        ],
      },
    },
  };

Monthly

const date_constraints = {
    priority: "reject",
    accept: {
      // day_of_week: [0, 1],
    },
    reject: {
      future:true,
      repeat: {
        frequency: "monthly",
        occurrence: [
          {
            day_of_week: 6, // saturday
            after: {
              week: 1, //first week is skipped
            },
            interval: 2, // specific interval for this occurrence
          },
          {
            day_of_week: 5,
            after: {
              week: 3,
            },
            interval: 3,
          },
        ],
      },
    },
  };

Yearly - This handles the yearly constraints for specific days, like the US election, where the date pattern is every 4 years on the first Tuesday after the first Monday in November using the after week property.

const date_constraints = {
    accept: {
      // day_of_week: [0, 1]
    },
    reject: {
      past: true,
      // future: false,
      period: [],
      repeat: {
        frequency: "yearly",
        occurrence: [
          {
            month: 10, // November
            day_of_week: 2, // Tuesday
            after: {
              week: 1, // After the first week
            },
            interval: 4, // Every 4 years
            start_year: 2024, // Start from the year 2024
          },
          {
            month: 6, // July 
            day_of_week: 5, // Friday
            after: {
              week: 2// After the second week
            },
            interval: 3, // Every 3 years
            start_year: 2025, // Start from the year 2025
          },
        ],
      },
    },
  };

Prolly the same repeat format can be used for accept; Here's the sample frontend workaround logic for this structure.

FredLL-Avaiga

Can you fix the failing checks ?

taipy/gui/_renderers/factory.py

Signed-off-by: JeevaRamanathan M <[email protected]>

…into issue/848

Signed-off-by: JeevaRamanathan M <[email protected]>

FredLL-Avaiga

I'd like to see a few frontend tests.
Can you add a time constraint in the rules ? (ie for example allow only to select time that are multiple of 15 minutes)

FredLL-Avaiga · 2024-11-13T09:13:16Z

frontend/taipy-gui/src/components/Taipy/DateSelector.tsx

-    analogic? :boolean;
+    analogic?: boolean;
+    disableDateConfig?: string;
+    defaultDisableDateConfig?: string;


no need for this as it is not dynamic

I would like to confirm the structure. Can I make these changes to the initial structure for the time?

{
disableWeekdays?: boolean;
disableWeekends?: boolean;
disablePastDays?: boolean;
disableFutureDays?: boolean;
dayOfWeek?: number; // 0-6 (0 = Monday, ..., 6 = Sunday)
interval?: number;
oddInterval?:boolean;
occurence?: number;
}

Or should I follow the new logic that is currently under discussion and has not been finalized after FabienLelaquais comment?

we'll wait for @FabienLelaquais 's input

FredLL-Avaiga · 2024-11-13T09:13:58Z

frontend/taipy-gui/src/components/Taipy/DateSelector.tsx

@@ -74,6 +86,8 @@ const DateSelector = (props: DateSelectorProps) => {
    const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
    const min = useDynamicProperty(props.min, props.defaultMin, undefined);
    const max = useDynamicProperty(props.max, props.defaultMax, undefined);
+    const emptyDateConfig = {} as Partial<DisableDateConfig>;
+    const disableDateConfig = useDynamicJsonProperty(props.disableDateConfig, props.defaultDisableDateConfig || "", emptyDateConfig);


no need for this as it is not dynamic, but your need to JSON parse it

FredLL-Avaiga · 2024-11-13T09:14:46Z

frontend/taipy-gui/src/components/Taipy/DateSelector.tsx

@@ -115,25 +129,76 @@ const DateSelector = (props: DateSelectorProps) => {
        }
    }, [props.date, tz, withTime, max, min]);

+
+    const getWeekNumberInMonth = (date: Date) => {


this should be defined outside the component

FredLL-Avaiga · 2024-11-13T09:15:35Z

frontend/taipy-gui/src/components/Taipy/DateSelector.tsx

+        const weekNo: number = Math.ceil(((d.getTime() - firstDayOfMonth.getTime()) / 86400000 + 1) / 7);
+        return weekNo;
+    }
+    const isDisabledDate = (date: Date) => {


useCallback

draft: datepicker validation

2b58831

Signed-off-by: JeevaRamanathan M <[email protected]>

Merge branch 'develop' into issue/848

77c271a

FredLL-Avaiga mentioned this pull request Oct 29, 2024

Feature/#1452 time jump #2180

Closed

Merge branch 'develop' into issue/848

1f6184d

FredLL-Avaiga requested changes Nov 2, 2024

View reviewed changes

taipy/gui/_renderers/factory.py Outdated Show resolved Hide resolved

JeevaRamanathan and others added 8 commits November 2, 2024 17:09

fix spellings

edc53d4

Signed-off-by: JeevaRamanathan M <[email protected]>

Merge branch 'issue/848' of https://github.com/JeevaRamanathan/taipy …

ab69471

…into issue/848

Merge branch 'develop' into issue/848

51d5880

changed dynamic_dict to dict

77105c1

Signed-off-by: JeevaRamanathan M <[email protected]>

Merge branch 'develop' into issue/848

8d3a4a2

rerun pipeline

d7ae3bb

Signed-off-by: JeevaRamanathan M <[email protected]>

Merge branch 'develop' into issue/848

8232e63

Merge branch 'develop' into issue/848

5db33ce

FredLL-Avaiga requested changes Nov 13, 2024

View reviewed changes

Merge branch 'develop' into issue/848

febf57e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Validation for Date Picker #2165

Implement Validation for Date Picker #2165

JeevaRamanathan commented Oct 26, 2024

FredLL-Avaiga commented Oct 26, 2024

FabienLelaquais commented Oct 26, 2024 •

edited

Loading

JeevaRamanathan commented Oct 26, 2024

JeevaRamanathan commented Oct 28, 2024 •

edited

Loading

FredLL-Avaiga left a comment

FredLL-Avaiga left a comment

FredLL-Avaiga Nov 13, 2024

JeevaRamanathan Nov 13, 2024

FredLL-Avaiga Nov 13, 2024

FredLL-Avaiga Nov 13, 2024

FredLL-Avaiga Nov 13, 2024

FredLL-Avaiga Nov 13, 2024

Implement Validation for Date Picker #2165

Are you sure you want to change the base?

Implement Validation for Date Picker #2165

Conversation

JeevaRamanathan commented Oct 26, 2024

FredLL-Avaiga commented Oct 26, 2024

FabienLelaquais commented Oct 26, 2024 • edited Loading

JeevaRamanathan commented Oct 26, 2024

JeevaRamanathan commented Oct 28, 2024 • edited Loading

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

FredLL-Avaiga Nov 13, 2024

Choose a reason for hiding this comment

JeevaRamanathan Nov 13, 2024

Choose a reason for hiding this comment

FredLL-Avaiga Nov 13, 2024

Choose a reason for hiding this comment

FredLL-Avaiga Nov 13, 2024

Choose a reason for hiding this comment

FredLL-Avaiga Nov 13, 2024

Choose a reason for hiding this comment

FredLL-Avaiga Nov 13, 2024

Choose a reason for hiding this comment

FabienLelaquais commented Oct 26, 2024 •

edited

Loading

JeevaRamanathan commented Oct 28, 2024 •

edited

Loading