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?
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;
};{
"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"
}Hi @Dan ,
To automatically populate the tags component based on the startDate and endDate you could use a calculated value however I would probably use the onChange feature. Heres what I would do:
Remove any calculated value you have previously set on the tags component to avoid any conflicting logic
Update the onChange property available under the logic tab of both date components with the code below. This code will set the value of the tags component programatically. Note, you may need to adapt the code for your specific form and scenario.
// Convert the start and end dates to Moment objects
const startDate = moment(data.startDate);
const endDate = moment(data.endDate);
// Initialize an empty array to store the dates
const datesArray = [];
// Loop through each day between the start and end dates
while (startDate.isSameOrBefore(endDate)) {
// Add the current date to the array
datesArray.push(startDate.format('YYYY-MM-DD'));
// Increment the date by 1 day
startDate.add(1, 'day');
}
instance.root.getComponent('tags').setValue(datesArray)Hi @Dan ,
To automatically populate the tags component based on the startDate and endDate you could use a calculated value however I would probably use the onChange feature. Heres what I would do:
Remove any calculated value you have previously set on the tags component to avoid any conflicting logic
Update the onChange property available under the logic tab of both date components with the code below. This code will set the value of the tags component programatically. Note, you may need to adapt the code for your specific form and scenario.
// Convert the start and end dates to Moment objects
const startDate = moment(data.startDate);
const endDate = moment(data.endDate);
// Initialize an empty array to store the dates
const datesArray = [];
// Loop through each day between the start and end dates
while (startDate.isSameOrBefore(endDate)) {
// Add the current date to the array
datesArray.push(startDate.format('YYYY-MM-DD'));
// Increment the date by 1 day
startDate.add(1, 'day');
}
instance.root.getComponent('tags').setValue(datesArray)