form-builder-pro 1.3.4 → 1.3.6

package/dist/index.js

@@ -4117,6 +4117,7 @@ var FIELD_TYPES = [
   { type: "email", label: "Email", icon: "Mail" },
   { type: "phone", label: "Phone", icon: "Phone" },
   { type: "date", label: "Date Picker", icon: "Calendar" },
+  { type: "datetime", label: "Date & Time", icon: "Clock" },
   { type: "select", label: "Dropdown", icon: "ListBullet" },
   { type: "checkbox", label: "Checkbox", icon: "CheckSquare" },
   { type: "radio", label: "Radio Group", icon: "CircleDot" },
@@ -4146,6 +4147,7 @@ var DEFAULT_FIELD_CONFIG = {
     }
   },
   date: { label: "Date", width: "50%", enabled: true, visible: true },
+  datetime: { label: "Date & Time", placeholder: "Select date and time", width: "50%", enabled: true, visible: true },
   select: { label: "Dropdown", options: [], width: "100%", enabled: true, visible: true, optionSource: "STATIC" },
   checkbox: { label: "Checkbox", options: [], width: "100%", enabled: true, visible: true },
   radio: { label: "Radio Group", options: [], width: "100%", enabled: true, visible: true },
@@ -4362,6 +4364,10 @@ function validationsToValidationObject(v) {
     obj.minDate = v.minDate;
   if (v.maxDate)
     obj.maxDate = v.maxDate;
+  if (v.minDateTime)
+    obj.minDateTime = v.minDateTime;
+  if (v.maxDateTime)
+    obj.maxDateTime = v.maxDateTime;
   return Object.keys(obj).length > 0 ? obj : void 0;
 }
 function validationObjectToValidations(v) {
@@ -4394,6 +4400,10 @@ function validationObjectToValidations(v) {
     validations.minDate = v.minDate;
   if (v.maxDate)
     validations.maxDate = v.maxDate;
+  if (vAny.minDateTime)
+    validations.minDateTime = vAny.minDateTime;
+  if (vAny.maxDateTime)
+    validations.maxDateTime = vAny.maxDateTime;
   return Object.keys(validations).length > 0 ? validations : void 0;
 }
 function convertValidationObjectToArray(validationObj) {
@@ -4404,7 +4414,7 @@ function convertValidationObjectToArray(validationObj) {
   }
   const rules = [];
   const obj = validationObj;
-  const hasValidationProperties = !!(obj.regex || obj.regexMessage || obj.minLength !== void 0 || obj.maxLength !== void 0 || obj.min !== void 0 || obj.max !== void 0 || obj.minSelected !== void 0 || obj.maxSelected !== void 0);
+  const hasValidationProperties = !!(obj.regex || obj.regexMessage || obj.minLength !== void 0 || obj.maxLength !== void 0 || obj.min !== void 0 || obj.max !== void 0 || obj.minSelected !== void 0 || obj.maxSelected !== void 0 || obj.minDate || obj.maxDate || obj.minDateTime || obj.maxDateTime);
   const isRequired = obj.required === true || hasValidationProperties && obj.required !== false;
   if (isRequired) {
     rules.push({ type: "required", value: true });
@@ -4434,6 +4444,18 @@ function convertValidationObjectToArray(validationObj) {
   if (obj.maxSelected !== void 0) {
     rules.push({ type: "maxSelected", value: obj.maxSelected });
   }
+  if (obj.minDate && typeof obj.minDate === "string") {
+    rules.push({ type: "minDate", value: obj.minDate });
+  }
+  if (obj.maxDate && typeof obj.maxDate === "string") {
+    rules.push({ type: "maxDate", value: obj.maxDate });
+  }
+  if (obj.minDateTime && typeof obj.minDateTime === "string") {
+    rules.push({ type: "minDateTime", value: obj.minDateTime });
+  }
+  if (obj.maxDateTime && typeof obj.maxDateTime === "string") {
+    rules.push({ type: "maxDateTime", value: obj.maxDateTime });
+  }
   return rules;
 }
 function convertSpanToWidth(span, totalColumns = 12) {
@@ -4442,6 +4464,14 @@ function convertSpanToWidth(span, totalColumns = 12) {
   const percentage = span / totalColumns * 100;
   return Math.max(10, Math.min(100, Math.round(percentage)));
 }
+var EMAIL_REGEX = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$";
+var EMAIL_REGEX_MESSAGE = "Invalid email format";
+function isEmailLikeField(field) {
+  const label = (field.label || "").toLowerCase();
+  const fieldName = (field.fieldName || field.name || "").toLowerCase();
+  const placeholder = (field.placeholder || "").toLowerCase();
+  return /email/.test(label) || /email/.test(fieldName) || /@/.test(placeholder) || /email/.test(placeholder);
+}
 function normalizeFieldType(type) {
   if (!type)
     return "text";
@@ -4455,12 +4485,17 @@ function normalizeFieldType(type) {
     return "binary_choice";
   if (str === "REPEATER" || normalized === "repeater")
     return "repeater";
+  if (str === "DATETIME" || normalized === "datetime")
+    return "datetime";
   return str.toLowerCase();
 }
 function transformField(field) {
   const fieldId = field.id || field.fieldId;
   const fieldType = field.type || field.fieldType;
-  const normalizedType = normalizeFieldType(fieldType);
+  let normalizedType = normalizeFieldType(fieldType);
+  if (normalizedType === "text" && isEmailLikeField(field)) {
+    normalizedType = "email";
+  }
   const transformed = {
     id: fieldId,
     type: normalizedType,
@@ -4539,6 +4574,10 @@ function transformField(field) {
           validationObj.minDate = rule.value;
         } else if (rule.type === "maxDate" && typeof rule.value === "string") {
           validationObj.maxDate = rule.value;
+        } else if (rule.type === "minDateTime" && typeof rule.value === "string") {
+          validationObj.minDateTime = rule.value;
+        } else if (rule.type === "maxDateTime" && typeof rule.value === "string") {
+          validationObj.maxDateTime = rule.value;
         }
       });
       transformed.validation = validationObj;
@@ -4667,6 +4706,8 @@ function transformField(field) {
     transformed.repeatItemLabel = field.repeatItemLabel;
   if (field.repeatIncrementEnabled !== void 0)
     transformed.repeatIncrementEnabled = field.repeatIncrementEnabled;
+  if (field.dateConstraints !== void 0)
+    transformed.dateConstraints = field.dateConstraints;
   if (field.css !== void 0)
     transformed.css = field.css;
   if (field.optionsSource !== void 0)
@@ -4772,6 +4813,10 @@ function convertValidationArrayToObject(validation) {
       obj.minDate = rule.value;
     } else if (rule.type === "maxDate" && typeof rule.value === "string") {
       obj.maxDate = rule.value;
+    } else if (rule.type === "minDateTime" && typeof rule.value === "string") {
+      obj.minDateTime = rule.value;
+    } else if (rule.type === "maxDateTime" && typeof rule.value === "string") {
+      obj.maxDateTime = rule.value;
     }
   });
   return Object.keys(obj).length > 0 ? obj : void 0;
@@ -4783,9 +4828,19 @@ function convertWidthToSpan(width, totalColumns = 12) {
   return Math.max(1, Math.min(12, Math.round(widthNum / 100 * totalColumns)));
 }
 function fieldToPayload(field) {
+  let outputType = field.type;
+  let outputValidations = field.validations ? { ...field.validations } : void 0;
+  if (field.type === "text" && isEmailLikeField(field)) {
+    outputType = "email";
+    outputValidations = field.validations ? { ...field.validations } : {};
+    if (!outputValidations.pattern) {
+      outputValidations.pattern = EMAIL_REGEX;
+      outputValidations.customErrorMessages = { ...outputValidations.customErrorMessages, pattern: EMAIL_REGEX_MESSAGE };
+    }
+  }
   const payload = {
     id: field.id,
-    type: field.type,
+    type: outputType,
     label: field.label,
     name: field.fieldName || field.id,
     // Model key for binding (API / host app)
@@ -4810,17 +4865,18 @@ function fieldToPayload(field) {
       span: 12
     };
   }
-  if (field.validations) {
-    let validations = { ...field.validations };
+  const validationsToUse = outputValidations ?? field.validations;
+  if (validationsToUse) {
+    let validations = { ...validationsToUse };
     if (validations.validationType === "age") {
       validations = { ...validations, validationType: "custom" };
     }
     payload.validations = validations;
-    if (field.validations.required) {
+    if (validationsToUse.required) {
       payload.required = true;
     }
   }
-  const baseValidation = field.validations ? validationsToValidationObject(field.validations) : convertValidationArrayToObject(field.validation);
+  const baseValidation = validationsToUse ? validationsToValidationObject(validationsToUse) : convertValidationArrayToObject(field.validation);
   payload.validation = baseValidation;
   const pattern = baseValidation?.regex ?? field.validations?.pattern;
   const patternMsg = baseValidation?.regexMessage ?? field.validations?.customErrorMessages?.pattern;
@@ -4880,6 +4936,11 @@ function fieldToPayload(field) {
   if ((field.type === "select" || field.type === "radio" || field.type === "checkbox") && field.options && Array.isArray(field.options)) {
     payload.options = field.options.map((opt) => ({ label: opt.label, value: opt.value }));
   }
+  if (field.dateConstraints !== void 0)
+    payload.dateConstraints = field.dateConstraints;
+  if (field.type === "datetime") {
+    payload.fieldType = "DATETIME";
+  }
   if (field.type === "binary_choice") {
     payload.fieldType = "BINARY_CHOICE";
     payload.type = "binary_choice";
@@ -5964,7 +6025,9 @@ function getValidationRules(field) {
       min: v.min,
       max: v.max,
       minDate: v.minDate,
-      maxDate: v.maxDate
+      maxDate: v.maxDate,
+      minDateTime: v.minDateTime,
+      maxDateTime: v.maxDateTime
     };
   }
   const val = field.validation;
@@ -5990,6 +6053,10 @@ function getValidationRules(field) {
         rules.minDate = r.value;
       else if (r.type === "maxDate")
         rules.maxDate = r.value;
+      else if (r.type === "minDateTime")
+        rules.minDateTime = r.value;
+      else if (r.type === "maxDateTime")
+        rules.maxDateTime = r.value;
     });
     return rules;
   }
@@ -6003,15 +6070,108 @@ function getValidationRules(field) {
     min: o.min,
     max: o.max,
     minDate: o.minDate,
-    maxDate: o.maxDate
+    maxDate: o.maxDate,
+    minDateTime: o.minDateTime,
+    maxDateTime: o.maxDateTime
   };
 }
 function isNumericTextField(field) {
   const v = field.validations;
   return !!(v?.validationType && ["postalCode", "phoneNumber", "otp"].includes(v.validationType));
 }
+function toDateString(d) {
+  return d.toISOString().split("T")[0];
+}
+function toDatetimeString(d) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function resolveDateConstraintBounds(field, allFields, formData) {
+  const constraint = field.dateConstraints;
+  if (!constraint)
+    return null;
+  const isDatetime = field.type === "datetime";
+  let constraintDate = null;
+  if (constraint.compareWith === "CURRENT_DATE") {
+    constraintDate = /* @__PURE__ */ new Date();
+    if (!isDatetime)
+      constraintDate.setHours(0, 0, 0, 0);
+  } else if (constraint.compareWith === "FIELD" && constraint.fieldName) {
+    const refField = allFields?.find(
+      (f) => f.fieldName === constraint.fieldName || f.id === constraint.fieldName
+    );
+    if (refField && formData) {
+      const key = refField.fieldName ?? refField.id;
+      const raw = formData[key];
+      if (raw)
+        constraintDate = new Date(raw);
+    }
+  }
+  if (!constraintDate || isNaN(constraintDate.getTime()))
+    return null;
+  const MS_MIN = 6e4;
+  const MS_DAY = 864e5;
+  const { operator } = constraint;
+  if (isDatetime) {
+    if (operator === "LESS_THAN")
+      return { max: toDatetimeString(new Date(constraintDate.getTime() - MS_MIN)) };
+    if (operator === "LESS_THAN_EQUAL")
+      return { max: toDatetimeString(constraintDate) };
+    if (operator === "GREATER_THAN")
+      return { min: toDatetimeString(new Date(constraintDate.getTime() + MS_MIN)) };
+    return { min: toDatetimeString(constraintDate) };
+  } else {
+    if (operator === "LESS_THAN")
+      return { max: toDateString(new Date(constraintDate.getTime() - MS_DAY)) };
+    if (operator === "LESS_THAN_EQUAL")
+      return { max: toDateString(constraintDate) };
+    if (operator === "GREATER_THAN")
+      return { min: toDateString(new Date(constraintDate.getTime() + MS_DAY)) };
+    return { min: toDateString(constraintDate) };
+  }
+}
+function validateDateConstraint(field, value, allFields, formData) {
+  const constraint = field.dateConstraints;
+  if (!constraint || !value)
+    return "";
+  const inputDate = new Date(value);
+  if (isNaN(inputDate.getTime()))
+    return "";
+  let constraintDate = null;
+  let constraintLabel = "";
+  if (constraint.compareWith === "CURRENT_DATE") {
+    constraintDate = /* @__PURE__ */ new Date();
+    if (field.type === "date")
+      constraintDate.setHours(0, 0, 0, 0);
+    constraintLabel = "today's date";
+  } else if (constraint.compareWith === "FIELD" && constraint.fieldName) {
+    const refField = allFields?.find(
+      (f) => f.fieldName === constraint.fieldName || f.id === constraint.fieldName
+    );
+    if (refField && formData) {
+      const key = refField.fieldName ?? refField.id;
+      const raw = formData[key];
+      if (raw) {
+        constraintDate = new Date(raw);
+        constraintLabel = `"${refField.label || constraint.fieldName}"`;
+      }
+    }
+  }
+  if (!constraintDate || isNaN(constraintDate.getTime()))
+    return "";
+  const { operator } = constraint;
+  if (operator === "LESS_THAN" && !(inputDate < constraintDate))
+    return `Date must be before ${constraintLabel}`;
+  if (operator === "LESS_THAN_EQUAL" && !(inputDate <= constraintDate))
+    return `Date must be on or before ${constraintLabel}`;
+  if (operator === "GREATER_THAN" && !(inputDate > constraintDate))
+    return `Date must be after ${constraintLabel}`;
+  if (operator === "GREATER_THAN_EQUAL" && !(inputDate >= constraintDate))
+    return `Date must be on or after ${constraintLabel}`;
+  return "";
+}
 var FieldRenderer = class {
-  static render(field, value, onChange, readOnly = false) {
+  static render(field, value, onChange, readOnly = false, allFields, formData) {
     const wrapper = createElement("div", { className: "w-full form-row" });
     const isEnabled = field.enabled !== false && !readOnly;
     if (field.type !== "checkbox" && field.type !== "toggle" && field.type !== "binary_choice") {
@@ -6047,7 +6207,7 @@ var FieldRenderer = class {
     const validationRules = getValidationRules(field);
     const hasPatternValidation = !!validationRules.pattern;
     const hasNumericTextValidation = isNumericTextField(field);
-    if (field.type === "date" || field.type === "email" || field.type === "number" || field.type === "text" && (hasPatternValidation || hasNumericTextValidation || validationRules.minLength !== void 0 || validationRules.maxLength !== void 0)) {
+    if (field.type === "date" || field.type === "datetime" || field.type === "email" || field.type === "number" || field.type === "text" && (hasPatternValidation || hasNumericTextValidation || validationRules.minLength !== void 0 || validationRules.maxLength !== void 0)) {
       validationMsg = createElement("div", { className: "text-xs text-red-600 dark:text-red-400 mt-1 hidden", id: `validation-${field.id}` });
     }
     const validateField = (f, value2, inputElement, msgEl) => {
@@ -6072,6 +6232,26 @@ var FieldRenderer = class {
           }
         }
       }
+      if (!errorMessage && f.type === "datetime" && value2) {
+        const inputDateTime = new Date(value2);
+        const minDt = rules.minDateTime ?? rules.minDate;
+        const maxDt = rules.maxDateTime ?? rules.maxDate;
+        if (minDt) {
+          const minDateTime = new Date(minDt);
+          if (inputDateTime < minDateTime) {
+            errorMessage = "Date & time must be after the minimum";
+          }
+        }
+        if (!errorMessage && maxDt) {
+          const maxDateTime = new Date(maxDt);
+          if (inputDateTime > maxDateTime) {
+            errorMessage = "Date & time must be before the maximum";
+          }
+        }
+      }
+      if (!errorMessage && (f.type === "date" || f.type === "datetime") && value2 && f.dateConstraints) {
+        errorMessage = validateDateConstraint(f, value2, allFields, formData);
+      }
       if (!errorMessage && (f.type === "email" || f.type === "text" || f.type === "phone") && value2 && rules.pattern) {
         try {
           if (!new RegExp(rules.pattern).test(value2)) {
@@ -6323,12 +6503,23 @@ var FieldRenderer = class {
       default:
         const rules = getValidationRules(field);
         const useNumericTextInput = field.type === "text" && isNumericTextField(field);
-        const inputType = useNumericTextInput ? "text" : field.type === "number" ? "number" : field.type;
+        const inputType = useNumericTextInput ? "text" : field.type === "number" ? "number" : field.type === "datetime" ? "datetime-local" : field.type;
         const runValidation = () => {
-          if (validationMsg && (field.type === "date" || field.type === "email" || field.type === "text" || field.type === "number")) {
+          if (validationMsg && (field.type === "date" || field.type === "datetime" || field.type === "email" || field.type === "text" || field.type === "number")) {
             validateField(field, input.value, input, validationMsg);
           }
         };
+        let minVal = field.type === "datetime" ? rules.minDateTime ?? rules.minDate : field.type === "date" ? rules.minDate : field.type === "number" && rules.min !== void 0 ? String(rules.min) : void 0;
+        let maxVal = field.type === "datetime" ? rules.maxDateTime ?? rules.maxDate : field.type === "date" ? rules.maxDate : field.type === "number" && rules.max !== void 0 ? String(rules.max) : void 0;
+        if (field.type === "date" || field.type === "datetime") {
+          const bounds = resolveDateConstraintBounds(field, allFields, formData);
+          if (bounds) {
+            if (bounds.min !== void 0)
+              minVal = bounds.min;
+            if (bounds.max !== void 0)
+              maxVal = bounds.max;
+          }
+        }
         input = createElement("input", {
           type: inputType,
           ...useNumericTextInput && { inputmode: "numeric" },
@@ -6336,8 +6527,8 @@ var FieldRenderer = class {
           placeholder: field.placeholder,
           value: value || "",
           disabled: !isEnabled,
-          min: field.type === "date" ? rules.minDate : field.type === "number" ? rules.min !== void 0 ? String(rules.min) : void 0 : void 0,
-          max: field.type === "date" ? rules.maxDate : field.type === "number" ? rules.max !== void 0 ? String(rules.max) : void 0 : void 0,
+          min: minVal,
+          max: maxVal,
           pattern: !useNumericTextInput ? rules.pattern || void 0 : void 0,
           oninput: (e) => {
             const inputEl = e.target;
@@ -6595,7 +6786,7 @@ function getValidationRulesForField(field) {
   }
   return convertValidationToArray(field.validation);
 }
-function getFieldValidationError(field, fieldValue) {
+function getFieldValidationError(field, fieldValue, allFields, formData) {
   const isRequired = field.validations?.required ?? field.required;
   if (isRequired && (!fieldValue || fieldValue === "" || Array.isArray(fieldValue) && fieldValue.length === 0)) {
     return field.validations?.customErrorMessages?.required || "This field is required";
@@ -6636,6 +6827,53 @@ function getFieldValidationError(field, fieldValue) {
       }
     }
   }
+  if (field.type === "datetime" && fieldValue) {
+    const v = field.validations;
+    const minDt = v?.minDateTime ?? v?.minDate;
+    const maxDt = v?.maxDateTime ?? v?.maxDate;
+    const inputDt = new Date(fieldValue);
+    if (minDt && inputDt < new Date(minDt)) {
+      return "Date & time must be after the minimum";
+    }
+    if (maxDt && inputDt > new Date(maxDt)) {
+      return "Date & time must be before the maximum";
+    }
+  }
+  if ((field.type === "date" || field.type === "datetime") && fieldValue && field.dateConstraints) {
+    const constraint = field.dateConstraints;
+    const inputDate = new Date(fieldValue);
+    let constraintDate = null;
+    let constraintLabel = "";
+    if (constraint.compareWith === "CURRENT_DATE") {
+      constraintDate = /* @__PURE__ */ new Date();
+      if (field.type === "date")
+        constraintDate.setHours(0, 0, 0, 0);
+      constraintLabel = "today's date";
+    } else if (constraint.compareWith === "FIELD" && constraint.fieldName && allFields && formData) {
+      const refField = allFields.find(
+        (f) => f.fieldName === constraint.fieldName || f.id === constraint.fieldName
+      );
+      if (refField) {
+        const key = refField.fieldName ?? refField.id;
+        const raw = formData[key];
+        if (raw) {
+          constraintDate = new Date(raw);
+          constraintLabel = `"${refField.label || constraint.fieldName}"`;
+        }
+      }
+    }
+    if (constraintDate && !isNaN(constraintDate.getTime())) {
+      const { operator } = constraint;
+      if (operator === "LESS_THAN" && !(inputDate < constraintDate))
+        return `Date must be before ${constraintLabel}`;
+      if (operator === "LESS_THAN_EQUAL" && !(inputDate <= constraintDate))
+        return `Date must be on or before ${constraintLabel}`;
+      if (operator === "GREATER_THAN" && !(inputDate > constraintDate))
+        return `Date must be after ${constraintLabel}`;
+      if (operator === "GREATER_THAN_EQUAL" && !(inputDate >= constraintDate))
+        return `Date must be on or after ${constraintLabel}`;
+    }
+  }
   if (field.type === "checkbox" && Array.isArray(fieldValue)) {
     const validationArray = getValidationRulesForField(field);
     const minSelectedRule = validationArray.find((v) => v.type === "minSelected");
@@ -6705,6 +6943,20 @@ function isFormulaDependency(schema, modelKey, fieldId) {
   }
   return false;
 }
+function isDateConstraintDependency(schema, modelKey, fieldId) {
+  for (const section of schema.sections) {
+    for (const field of section.fields) {
+      const c = field.dateConstraints;
+      if (c && c.compareWith === "FIELD" && c.fieldName) {
+        if (c.fieldName === modelKey)
+          return true;
+        if (fieldId && c.fieldName === fieldId)
+          return true;
+      }
+    }
+  }
+  return false;
+}
 var FormRenderer = class {
   constructor(container, schema, onSubmit, onDropdownValueChange, initialData) {
     __publicField(this, "container");
@@ -6729,6 +6981,7 @@ var FormRenderer = class {
     this.container.innerHTML = "";
     const form = createElement("form", { className: "space-y-6 md:space-y-8" });
     form.appendChild(createElement("h1", { className: "text-2xl font-semibold mb-2 text-[#3b497e] ", text: this.schema.title }));
+    const allFields = this.schema.sections.flatMap((s) => s.fields);
     this.schema.sections.forEach((section) => {
       const sectionEl = createElement("div", { className: "space-y-3 md:space-y-4 !m-0" });
       sectionEl.appendChild(createElement("h2", { className: "text-xl  font-semibold text-[#3b497e] dark:text-gray-200 border-b pb-2", text: section.title }));
@@ -6773,10 +7026,16 @@ var FormRenderer = class {
             }
             if (isFormulaDependency(this.schema, modelKey, field.id)) {
               this.render();
+              return;
+            }
+            if (isDateConstraintDependency(this.schema, modelKey, field.id)) {
+              this.render();
             }
           },
-          isFormulaField
+          isFormulaField,
           // Formula fields are read-only
+          allFields,
+          this.data
         );
         fieldWrapper.appendChild(fieldEl);
         grid.appendChild(fieldWrapper);
@@ -6800,7 +7059,7 @@ var FormRenderer = class {
           const modelKey = getModelKey(field);
           const fieldValue = this.data[modelKey];
           const fieldElement = form.querySelector(`input[id*="${field.id}"], textarea[id*="${field.id}"], select[id*="${field.id}"]`);
-          const fieldError = getFieldValidationError(field, fieldValue);
+          const fieldError = getFieldValidationError(field, fieldValue, allFields, this.data);
           const element = fieldElement ?? Array.from(form.querySelectorAll("input, textarea, select")).find((el) => {
             const wrapper = el.closest("div");
             return wrapper && wrapper.textContent?.includes(field.label);
@@ -10869,6 +11128,10 @@ var FormBuilder = class {
             obj.minDate = rule.value;
           else if (rule.type === "maxDate" && typeof rule.value === "string")
             obj.maxDate = rule.value;
+          else if (rule.type === "minDateTime" && typeof rule.value === "string")
+            obj.minDateTime = rule.value;
+          else if (rule.type === "maxDateTime" && typeof rule.value === "string")
+            obj.maxDateTime = rule.value;
         });
         return obj;
       }
@@ -10884,6 +11147,8 @@ var FormBuilder = class {
         maxSelected: o.maxSelected,
         minDate: o.minDate,
         maxDate: o.maxDate,
+        minDateTime: o.minDateTime,
+        maxDateTime: o.maxDateTime,
         customErrorMessages: o.regexMessage ? { pattern: o.regexMessage } : void 0
       };
     })();
@@ -11319,11 +11584,136 @@ var FormBuilder = class {
       }));
       validationElements.push(maxDateGroup);
     }
+    if (selectedField.type === "datetime") {
+      const minMaxDt = validationsObj;
+      const minDateTimeGroup = createElement("div", { className: "mb-3" });
+      minDateTimeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Minimum Date & Time" }));
+      minDateTimeGroup.appendChild(createElement("input", {
+        type: "datetime-local",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: minMaxDt.minDateTime || minMaxDt.minDate || "",
+        onchange: (e) => {
+          const val = e.target.value;
+          updateValidations({ minDateTime: val || void 0 });
+        }
+      }));
+      validationElements.push(minDateTimeGroup);
+      const maxDateTimeGroup = createElement("div", { className: "mb-3" });
+      maxDateTimeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Maximum Date & Time" }));
+      maxDateTimeGroup.appendChild(createElement("input", {
+        type: "datetime-local",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: minMaxDt.maxDateTime || minMaxDt.maxDate || "",
+        onchange: (e) => {
+          const val = e.target.value;
+          updateValidations({ maxDateTime: val || void 0 });
+        }
+      }));
+      validationElements.push(maxDateTimeGroup);
+    }
     if (validationElements.length > 0) {
       const validationHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Validation Rules" });
       body.appendChild(validationHeader);
       validationElements.forEach((el) => body.appendChild(el));
     }
+    if (selectedField.type === "date" || selectedField.type === "datetime") {
+      const constraintHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Date Constraint" });
+      body.appendChild(constraintHeader);
+      const getConstraint = () => {
+        const f = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f2) => f2.id === selectedField.id);
+        return f?.dateConstraints;
+      };
+      const updateConstraint = (patch) => {
+        if (patch === null) {
+          formStore.getState().updateField(selectedField.id, { dateConstraints: void 0 });
+          return;
+        }
+        const current = getConstraint() || {};
+        const next = { ...current, ...patch };
+        formStore.getState().updateField(selectedField.id, { dateConstraints: next });
+      };
+      const currentConstraint = getConstraint();
+      const operatorGroup = createElement("div", { className: "mb-3" });
+      operatorGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Operator" }));
+      const operatorSelect = createElement("select", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
+        onchange: (e) => {
+          const val = e.target.value;
+          if (!val) {
+            updateConstraint(null);
+          } else {
+            updateConstraint({ operator: val, compareWith: getConstraint()?.compareWith || "CURRENT_DATE" });
+          }
+          this.render();
+        }
+      });
+      [
+        { value: "", label: "None (no constraint)" },
+        { value: "LESS_THAN", label: "Less than (<)" },
+        { value: "LESS_THAN_EQUAL", label: "Less than or equal (\u2264)" },
+        { value: "GREATER_THAN", label: "Greater than (>)" },
+        { value: "GREATER_THAN_EQUAL", label: "Greater than or equal (\u2265)" }
+      ].forEach((opt) => {
+        const option2 = createElement("option", { value: opt.value, text: opt.label });
+        if ((currentConstraint?.operator || "") === opt.value)
+          option2.selected = true;
+        operatorSelect.appendChild(option2);
+      });
+      operatorGroup.appendChild(operatorSelect);
+      body.appendChild(operatorGroup);
+      if (currentConstraint?.operator) {
+        const compareGroup = createElement("div", { className: "mb-3" });
+        compareGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Compare With" }));
+        const compareSelect = createElement("select", {
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
+          onchange: (e) => {
+            const val = e.target.value;
+            updateConstraint({ compareWith: val, fieldName: val === "CURRENT_DATE" ? void 0 : getConstraint()?.fieldName });
+            this.render();
+          }
+        });
+        [
+          { value: "CURRENT_DATE", label: "Current date (today)" },
+          { value: "FIELD", label: "Another date/datetime field" }
+        ].forEach((opt) => {
+          const option2 = createElement("option", { value: opt.value, text: opt.label });
+          if ((currentConstraint?.compareWith || "CURRENT_DATE") === opt.value)
+            option2.selected = true;
+          compareSelect.appendChild(option2);
+        });
+        compareGroup.appendChild(compareSelect);
+        body.appendChild(compareGroup);
+        if ((currentConstraint?.compareWith || "CURRENT_DATE") === "FIELD") {
+          const otherDateFields = formStore.getState().schema.sections.flatMap((s) => s.fields).filter((f) => (f.type === "date" || f.type === "datetime") && f.id !== selectedField.id);
+          const fieldGroup = createElement("div", { className: "mb-3" });
+          fieldGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Reference Field" }));
+          if (otherDateFields.length === 0) {
+            fieldGroup.appendChild(createElement("p", {
+              className: "text-xs text-gray-400 dark:text-gray-500 italic",
+              text: "No other date or datetime fields in this form."
+            }));
+          } else {
+            const fieldSelect = createElement("select", {
+              className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
+              onchange: (e) => {
+                const val = e.target.value;
+                updateConstraint({ fieldName: val || void 0 });
+              }
+            });
+            fieldSelect.appendChild(createElement("option", { value: "", text: "\u2014 Select a field \u2014" }));
+            otherDateFields.forEach((f) => {
+              const refKey = f.fieldName || f.id;
+              const option2 = createElement("option", { value: refKey, text: `${f.label} (${f.type})` });
+              if (currentConstraint?.fieldName === refKey)
+                option2.selected = true;
+              fieldSelect.appendChild(option2);
+            });
+            fieldGroup.appendChild(fieldSelect);
+          }
+          body.appendChild(fieldGroup);
+        }
+      }
+    }
     const cssHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Styling" });
     body.appendChild(cssHeader);
     const getStyleValue = (prop) => selectedField.css?.style?.[prop] || "";