Web Daterangepicker includes a powerful, category-based logging system built on loglevel. Enable detailed debug logs during development or troubleshoot production issues via the browser console API.

Key Features: 8 hierarchical log categories, color-coded console output, millisecond timestamps, and zero performance overhead when disabled.

Quick Start

Enable logging globally for all categories:

Enable Debug Logging 
 
 
When enabled, you'll see color-coded logs in your browser console with timestamps:
 
[14:32:15.234] [DEBUG] [DRP] Week starts on day: 0
 [14:32:15.235] [INFO] [DRP:RENDERING] Rendering calendar
 [14:32:15.240] [WARN] [DRP:VALIDATION] Date disabled
 [14:32:15.245] [ERROR] [DRP:SELECTION] Invalid date range
 
Logging Categories
 
The logger uses a hierarchical category system for granular control. Enable only the
				categories you need:
 
CategoryDescriptionUse When
DRPCore initialization and lifecycleComponent won't initialize, options not applied
DRP:RENDERINGCalendar rendering and DOM updatesCalendar not visible, dates not displaying correctly
DRP:INTERACTIONUser interactions (clicks, hovers, keyboard)Clicks not working, keyboard navigation broken
DRP:SELECTIONDate selection logicDates not selecting, range not working
DRP:NAVIGATIONMonth/year navigationNavigation buttons not working, wrong month shown
DRP:UIShow/hide calendar, positioningCalendar won't open, positioning incorrect
DRP:VALIDATIONDate validation and restrictionsDisabled dates not working, validation issues
DRP:DRAGDrag-to-adjust range functionalityDrag behavior not working in range mode
 
Configuration API
 
Control logging programmatically at application startup:
 
Enable All Logging
 
 
 
 
Disable All Logging
 
 
 
 
Set Global Log Level
 
 
 
 
Set Category-Specific Level
 
 
 
 
Tip: Use category-specific logging instead of enabling all logs. This reduces
				noise and helps you focus on the specific issue you're debugging.
 
Browser Console API
 
Control logging at runtime via the browser console - no rebuild required! This is perfect
				for debugging production issues or testing on the fly.
 
Access the API
 
 
 
 
Enable/Disable Logging
 
 
 
 
Set Log Levels
 
 
 
 
List Available Categories
 
 
 
 
Common Use Cases
 
Debug Production Issues:
 Calendar not working in production? Enable logging in the browser console to see what's happening
				without redeploying.
 
Test Changes On-The-Fly:
 Experimenting with date restrictions or validation? Enable validation logging to see how dates
				are being processed in real-time.
 
Check Component Version:
 Verify you're using the correct version of the component with window.components['web-daterangepicker'].version()
 
Explore Available Categories:
 Not sure what categories are available? Call getCategories() to see the full list.
 
Benefits
 
  • No Rebuild Required: Toggle logging instantly in production
    •  
  • Selective Debugging: Enable only the categories you need to investigate
    •  
  • Runtime Inspection: Check component version and configuration
    •  
  • Safe for Production: All logging functions are SSR-safe
    •  
  • Per-Instance Control: Each component instance respects global settings
    •  
  • Zero Code Changes: Debug issues without modifying your source code
 
Note: The browser console API is only available client-side. It won't work
				during SSR (server-side rendering).
 
Common Debugging Scenarios
 
Calendar Not Rendering
 
 
 
 
Selection Not Working
 
 
 
 
Navigation Issues
 
 
 
 
Drag Behavior Problems
 
 
 
 
Output Format
 
All log messages follow a consistent format for easy parsing and filtering in browser
				devtools:
 
[HH:MM:SS.mmm] [LEVEL] [CATEGORY] message
 
Format Breakdown:
 
  • Timestamp: 24-hour time with milliseconds for precise timing
    •  
  • Level: DEBUG, INFO, WARN, or ERROR
    •  
  • Category: Hierarchical category (e.g., DRP:RENDERING)
    •  
  • Message: The actual log content
 
Color Coding
 
LevelColorUse Case
DEBUG■ BlueDetailed diagnostic information
INFO■ GreenInformational messages about normal operation
WARN■ OrangePotential issues or unexpected states
ERROR■ RedErrors that prevent normal operation
 
Best Practices
 
1. Enable Only in Development
 
Logging has minimal overhead when disabled, but it's still best to avoid it in
				production:
 
 
 
 
2. Use Category-Specific Logging
 
Instead of enabling all logs, focus on the category you're debugging:
 
 
 
 
3. Different Levels for Different Categories
 
 
 
 
4. Configuration Warnings Are Always Visible
 
Important configuration issues are logged via console.warn or console.error and are always visible, regardless of logging
				settings:
 
  • Invalid configuration options
    •  
  • Deprecated API usage
    •  
  • Missing required attributes
 
Performance
 
Zero Overhead: When logging is disabled (the default), there is virtually
				no performance impact. Log statements are compiled away and don't affect your application's
				speed.
 
Library Size:
 
  • loglevel: ~1KB gzipped
    •  
  • loglevel-plugin-prefix: ~500B gzipped
 
Runtime Performance:
 
  • Disabled logs: <1 microsecond per log call (negligible)
    •  
  • Enabled logs: ~50-100 microseconds per log call (only in development)
    •  
  • Production builds: Tree-shaken if not imported
 
Implementation Details
 
Why loglevel?
 
  • Lightweight (~1KB) and battle-tested
    •  
  • Zero dependencies
    •  
  • Works in all browsers and Node.js
    •  
  • Supports log levels and filtering
    •  
  • Extensible via plugins
 
Logger Structure
 
 
 
 
Troubleshooting
 
Logs Not Appearing
 
  1. Check if logging is enabled: 
     
     
    2.  
  2. Check browser console filters: Make sure you haven't filtered out console
					logs in your devtools settings
    3.  
  3. Check log level: Some logs may be at INFO or WARN level. Try setting debug
					level: 
     
     
    4.  
  4. Verify component is loaded: Check that the web component is registered: 
     
     
 
Too Many Logs
 
  1. Use category-specific logging: Enable only what you need
    2.  
  2. Increase log level: Use 'info' or 'warn' instead of 'debug'
    3.  
  3. Filter in devtools: Use browser console filtering to search for specific
					messages