Skip to content

applyDatePicker(cElem)¶

The applyDatePicker(cElem) function is an essential utility within Merciglobal Cloud ERP that attaches an interactive, user-friendly date picker to a given HTML element. It enhances UX for forms and calendar interfaces where date selection is required.

Purpose¶

To streamline and standardize date input fields across all Merciglobal Cloud ERP modules, ensuring consistency and ease-of-use for end users and internal developers.

Function Signature¶

applyDatePicker(cElem)

Parameters¶

Parameter Type Description
cElem HTMLElement The container or input element to which the date picker will be applied.

Usage¶

const inputField = document.querySelector('#startDate');
applyDatePicker(inputField);

Once this is executed, the input field becomes a date input field with calendar UI, integrated according to Merciglobal's UI standards.

Features¶

  • Supports multiple date formats (customizable based on locale).
  • Integrates with Merciglobal form validation APIs.
  • Lightweight and dependency-free implementation.
  • Auto-adjusts positioning based on screen layout.
  • Keyboard accessible for enhanced usability.

Best Practices¶

  • Always validate the selected date using Merciglobal validation hooks.
  • Avoid initializing date pickers in hidden DOM elements.
  • Use consistent format settings across all modules for uniformity.

Ideal For¶

  • Sales module – setting delivery or invoice dates
  • Inventory – receiving and stock entry dates
  • HR – employee date of birth or joining
  • Projects – start and end date entries
  • applyDateRangePicker(startElem, endElem)
  • formatDate(date, formatString)
  • validateDateInput(inputElem)

Internal Notes for Merci Developers¶

  • The default date format is YYYY-MM-DD, configurable via globalSettings.dateFormat.
  • Ensure that timezone discrepancies are managed using moment.js fallback internally.
  • Hook into onDateSelect event for post-selection workflows.

📞 Need Help?¶

Contact the Merciglobal ERP Support Team for custom date picker integration, configuration, or debugging assistance.

"Empower your forms with intuitive date selections – one calendar at a time."

Merciglobal Cloud ERP – Streamlining business operations with powerful UI utilities.