Join the Team Forms community

D
Dan
Offline, last seen 3 weeks ago
Joined September 4, 2024

Trying to use a tag component with a default calculated value to list all of the months between a start and end date. IE; Start 02/01/2025, END 05/31/2025, Returns 2025-Feb, 2025-Mar, 2025-Apr, 2025-May. JSON & calculated value JavaScript below. Any ideas on what I am doing wrong?



JavaScript
const getDateRange = (startQuota, endQuota) => {
  if (moment(startQuota, 'MM-DD-YYYY').isSame(moment(endQuota, 'MM-DD-YYYY'), 'day'))
    return [endQuota];
  let date = startQuota;
  const dates = [date];
  do {
    date = moment(date).add(1, 'day');
    dates.push(date.format('YYYY-MM'));
  } while (moment(date).isBefore(endQuota));
  return dates;
};


JSON
{
  "title": "Quota",
  "theme": "primary",
  "breadcrumbClickable": true,
  "buttonSettings": {
    "previous": true,
    "cancel": false,
    "next": true
  },
  "navigateOnEnter": false,
  "saveOnEnter": false,
  "scrollToTop": false,
  "collapsible": false,
  "hiddenInPdf": false,
  "key": "page4",
  "permissions": [
    {
      "user": {},
      "permissionLevel": ""
    }
  ],
  "type": "panel",
  "label": "Page 2",
  "components": [
    {
      "html": "<p style=\"text-align:center;\"><span class=\"text-big\"><strong>QUOTA DETAILS</strong></span></p>",
      "label": "Content",
      "refreshOnChange": false,
      "hiddenInPdf": false,
      "key": "content3",
      "permissions": [
        {
          "user": {},
          "permissionLevel": ""
        }
      ],
      "type": "content",
      "input": false,
      "tableView": false,
      "skipRemoveConfirm": true,
      "pdfVisibility": "visible"
    },
    {
      "hiddenInPdf": false,
      "key": "well4",
      "permissions": [
        {
          "user": {},
          "permissionLevel": ""
        }
      ],
      "type": "well",
      "input": false,
      "tableView": false,
      "label": "",
      "components": [
        {
          "label": "Columns",
          "columns": [
            {
              "components": [
                {
                  "label": "Start Date",
                  "format": "MM-dd-yyyy",
                  "hiddenInPdf": false,
                  "tableView": false,
                  "datePicker": {
                    "disableWeekends": false,
                    "disableWeekdays": false
                  },
                  "enableTime": false,
                  "timePicker": {
                    "showMeridian": false
                  },
                  "validate": {
                    "customMessage": "Please select the 1st of the month.",
                    "custom": "//const date = moment(data.startQuota);\r\n//const isFirstDayOfMonth = date.isSame(date.clone().startOf('month'), 'day');\r\n//valid = isFirstDayOfMonth\r\n\r\n//const date = moment(data.startQuota);\r\n//const isFirstDayOfMonth = date.isSame(date.clone().startOf('month'), 'day');\r\n//const goal = data.quotaGoal\r\n\r\n//if( data.quotaGoal.toString.length === 0){valid}\r\n//else { valid = isFirstDayOfMonth }\r\n\r\n\r\nif (data.quotaGoal > 0) {\r\n    const date = moment(data.startQuota);\r\n    const isFirstDayOfMonth = date.isSame(date.clone().startOf('month'), 'day');\r\n    valid = isFirstDayOfMonth\r\n} \r\n"
                  },
                  "enableMinDateInput": false,
                  "enableMaxDateInput": false,
                  "key": "startQuota",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "datetime",
                  "input": true,
                  "widget": {
                    "type": "calendar",
                    "displayInTimezone": "viewer",
                    "locale": "en",
                    "useLocaleSettings": false,
                    "allowInput": true,
                    "mode": "single",
                    "enableTime": false,
                    "noCalendar": false,
                    "format": "MM-dd-yyyy",
                    "hourIncrement": 1,
                    "minuteIncrement": 1,
                    "time_24hr": true,
                    "minDate": null,
                    "disableWeekends": false,
                    "disableWeekdays": false,
                    "maxDate": null
                  },
                  "skipRemoveConfirm": true,
                  "pdfVisibility": "visible"
                }
              ],
              "width": 6,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "size": "md",
              "currentWidth": 6
            },
            {
              "components": [
                {
                  "label": "End Date",
                  "format": "MM-dd-yyyy",
                  "hiddenInPdf": false,
                  "tableView": false,
                  "datePicker": {
                    "disableWeekends": false,
                    "disableWeekdays": false
                  },
                  "enableTime": false,
                  "timePicker": {
                    "showMeridian": false
                  },
                  "validate": {
                    "customMessage": "Must be both after the start date and the last day of a given month",
                    "custom": " if (moment(data.startQuota).valueOf() > 0) {\r\n        let _startdate = moment(data.startQuota);\r\n        let _enddate = moment(data.endQuota);\r\n        let _duration = _enddate > _startdate\r\n        const enddate = moment(data.endQuota);\r\n        const isLastDayOfMonth = enddate.isSame(enddate.clone().endOf('month'), 'day');\r\n       \r\n        valid = isLastDayOfMonth && _duration\r\n    \r\n    }\r\n"
                  },
                  "enableMinDateInput": false,
                  "enableMaxDateInput": false,
                  "key": "endQuota",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "datetime",
                  "input": true,
                  "widget": {
                    "type": "calendar",
                    "displayInTimezone": "viewer",
                    "locale": "en",
                    "useLocaleSettings": false,
                    "allowInput": true,
                    "mode": "single",
                    "enableTime": false,
                    "noCalendar": false,
                    "format": "MM-dd-yyyy",
                    "hourIncrement": 1,
                    "minuteIncrement": 1,
                    "time_24hr": true,
                    "minDate": null,
                    "disableWeekends": false,
                    "disableWeekdays": false,
                    "maxDate": null
                  },
                  "skipRemoveConfirm": true,
                  "pdfVisibility": "visible"
                }
              ],
              "width": 6,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "size": "md",
              "currentWidth": 6
            }
          ],
          "hiddenInPdf": false,
          "key": "columns5",
          "permissions": [
            {
              "user": {},
              "permissionLevel": ""
            }
          ],
          "type": "columns",
          "input": false,
          "tableView": false,
          "skipRemoveConfirm": true,
          "pdfVisibility": "visible"
        },
        {
          "label": "Columns",
          "columns": [
            {
              "components": [
                {
                  "label": "Goal",
                  "applyMaskOn": "change",
                  "hiddenInPdf": false,
                  "mask": false,
                  "tableView": false,
                  "delimiter": true,
                  "requireDecimal": false,
                  "inputFormat": "plain",
                  "truncateMultipleSpaces": false,
                  "validate": {
                    "min": 1
                  },
                  "key": "quotaGoal",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "number",
                  "input": true,
                  "skipRemoveConfirm": true,
                  "pdfVisibility": "visible"
                }
              ],
              "width": 3,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "size": "md",
              "currentWidth": 3
            },
            {
              "components": [
                {
                  "label": "Goal Unit",
                  "widget": "choicesjs",
                  "hiddenInPdf": false,
                  "tableView": true,
                  "data": {
                    "values": [
                      {
                        "label": "Cases",
                        "value": "option1"
                      },
                      {
                        "label": "Cases (9L)",
                        "value": "9LCases"
                      },
                      {
                        "label": "Bottles",
                        "value": "bottles"
                      }
                    ],
                    "label": "Drop Down List"
                  },
                  "key": "dropDownList2",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "select",
                  "input": true,
                  "skipRemoveConfirm": true,
                  "pdfVisibility": "visible"
                }
              ],
              "width": 3,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "size": "md",
              "currentWidth": 3
            },
            {
              "components": [
                {
                  "label": "Goal Type",
                  "widget": "choicesjs",
                  "hiddenInPdf": false,
                  "tableView": true,
                  "data": {
                    "values": [
                      {
                        "label": "Volume",
                        "value": "volumeQuota"
                      },
                      {
                        "label": "Accounts Sold",
                        "value": "percentQuota"
                      },
                      {
                        "label": "PODs",
                        "value": "podQuota"
                      },
                      {
                        "label": "New Volume",
                        "value": "nvolumeQuota"
                      },
                      {
                        "label": "New Accounts",
                        "value": "naccountQuota"
                      },
                      {
                        "label": "New PODs",
                        "value": "npodQuota"
                      }
                    ],
                    "label": "Drop Down List"
                  },
                  "key": "goalType2",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "select",
                  "input": true,
                  "skipRemoveConfirm": true,
                  "pdfVisibility": "visible"
                }
              ],
              "size": "md",
              "width": 3,
              "currentWidth": 3
            },
            {
              "components": [
                {
                  "label": "Unsold Since",
                  "format": "MM-dd-yyyy",
                  "hiddenInPdf": false,
                  "tableView": false,
                  "datePicker": {
                    "disableWeekends": false,
                    "disableWeekdays": false
                  },
                  "enableTime": false,
                  "timePicker": {
                    "showMeridian": false
                  },
                  "enableMinDateInput": false,
                  "enableMaxDateInput": false,
                  "key": "startDate8",
                  "permissions": [
                    {
                      "user": {},
                      "permissionLevel": ""
                    }
                  ],
                  "type": "datetime",
                  "input": true,
                  "widget": {
                    "type": "calendar",
                    "displayInTimezone": "viewer",
                    "locale": "en",
                    "useLocaleSettings": false,
                    "allowInput": true,
                    "mode": "single",
                    "enableTime": false,
                    "noCalendar": false,
                    "format": "MM-dd-yyyy",
                    "hourIncrement": 1,
                    "minuteIncrement": 1,
                    "time_24hr": true,
                    "minDate": null,
                    "disableWeekends": false,
                    "disableWeekdays": false,
                    "maxDate": null
                  },
                  "skipRemoveConfirm": true,
                  "pdfVisibility": "visible"
                }
              ],
              "size": "md",
              "width": 3,
              "currentWidth": 3
            }
          ],
          "hiddenInPdf": false,
          "key": "columns6",
          "permissions": [
            {
              "user": {},
              "permissionLevel": ""
            }
          ],
          "type": "columns",
          "input": false,
          "tableView": false,
          "skipRemoveConfirm": true,
          "pdfVisibility": "visible"
        },
        {
          "label": "Quota Details",
          "applyMaskOn": "change",
          "autoExpand": false,
          "hiddenInPdf": false,
          "tableView": true,
          "case": "uppercase",
          "truncateMultipleSpaces": true,
          "key": "quotaDetails2",
          "permissions": [
            {
              "user": {},
              "permissionLevel": ""
            }
          ],
          "type": "textarea",
          "input": true,
          "skipRemoveConfirm": true,
          "pdfVisibility": "visible"
        },
        {
          "label": "Tags",
          "pdfVisibility": "visible",
          "tableView": false,
          "clearOnHide": false,
          "customDefaultValue": "const getDateRange = (startQuota, endQuota) => {\r\n  if (moment(startQuota, 'YYYY-MM-DD').isSame(moment(endQuota, 'YYYY-MM-DD'), 'day'))\r\n    return [endQuota];\r\n  let date = startQuota;\r\n  const dates = [date];\r\n  do {\r\n    date = moment(date).add(1, 'day');\r\n    dates.push(date.format('YYYY-MM-DD'));\r\n  } while (moment(date).isBefore(endQuota));\r\n  return dates;\r\n};",
          "calculateValue": "const getDateRange = (startQuota, endQuota) => {\r\n  if (moment(startQuota, 'MM-DD-YYYY').isSame(moment(endQuota, 'MM-DD-YYYY'), 'day'))\r\n    return [endQuota];\r\n  let date = startQuota;\r\n  const dates = [date];\r\n  do {\r\n    date = moment(date).add(1, 'day');\r\n    dates.push(date.format('YYYY-MM'));\r\n  } while (moment(date).isBefore(endQuota));\r\n  return dates;\r\n};",
          "key": "tags",
          "permissions": [
            {
              "user": {},
              "permissionLevel": ""
            }
          ],
          "type": "tags",
          "input": true,
          "skipRemoveConfirm": true
        }
      ],
      "skipRemoveConfirm": true,
      "pdfVisibility": "visible"
    },
    {
      "label": "PDF Page Break",
      "permissions": [
        {
          "user": {},
          "permissionLevel": ""
        }
      ],
      "type": "pdfPageBreak",
      "input": false,
      "key": "pdfPageBreak1",
      "tableView": false,
      "skipRemoveConfirm": true
    }
  ],
  "input": false,
  "tableView": false,
  "skipRemoveConfirm": true,
  "pdfVisibility": "visible"
}
2 comments
E
D

In this use case, there is a start date, end date, and a goaled number value (must be greater than 0). if the goal value (quotaGoal) is left blank, no validation is needed. if the goal is >0, then the start date (startQuota) must be set to the 1st of the month selected by the user and the end date (endQuota) must be set to the last day of the month.


I have come up with the below validation statements to handle the 1st/last day of the month, but am stuck on how to connect them with value the goaled number field.


Start Date must be 1st of month

JavaScript
const date = moment(data.startQuota);
const isFirstDayOfMonth = date.isSame(date.clone().startOf('month'), 'day');
valid = isFirstDayOfMonth

End Date must be last date of month

JavaScript
const date = moment(data.endQuota);
const isLastDayOfMonth = date.isSame(date.clone().endOf('month'), 'day');
valid = isLastDayOfMonth


Thanks for any help!


2 comments
E
D