The jQuery-based daterangepicker utility provides flexible interval selection capabilities. Implementing production-ready behaviors—such as fitlering available dates by API results, preventing selection on empty slots, localizing UI elements, and accurately capturing Unix timestamps—requires targeted configuration overrides.

Required Assets

Include the following core dependencies before initialization:

<link rel="stylesheet" href="assets/daterangepicker.css">
<script src="lib/moment.min.js"></script>
<script src="lib/daterangepicker.js"></script>

Setup and State Management

The plugin natively handles string values for HTML inputs, which means server-compatible epoch values must be calculated manually. The following implemantation demonstrates boundary initialization, dynamic styling callbacks, and localized controls:

const pickerTarget = $('.reservation-dates');

// Establish default window boundaries (start of today to end of today)
const todayBase = Math.floor(Date.now() / 1000);
let activeStartTs = todayBase;
let activeEndTs   = todayBase + 86399;

// Simulated dataset containing only valid selectable days
const permittedDays = ['2024-05-12', '2024-05-18', '2024-06-01'];

pickerTarget.daterangepicker({
  showDropdowns: true,
  timePicker: true,
  maxDate: moment(),
  
  // Cell-level rendering and interaction control
  isCustomDate: function(currentDate) {
    const dayString = currentDate.format('YYYY-MM-DD');
    if (permittedDays.indexOf(dayString) !== -1) {
      return 'active-slot'; // Applies custom highlight class
    }
    return false; // Blocks user interaction on unlisted dates
  },

  // Cross-language interface mapping
  locale: {
    format: 'YYYY/MM/DD HH:mm',
    separator: ' → ',
    applyLabel: 'Confirm',
    cancelLabel: 'Reset',
    fromLabel: 'Start',
    toLabel: 'End',
    weekLabel: 'W',
    customRangeLabel: 'Select Period',
    daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    monthNames: [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ]
  }
}, function(startDate, endDate, relativeLabel) {
  // Persist normalized timestamps to component state
  activeStartTs = startDate.unix();
  activeEndTs   = endDate.unix();
});

Integration Guidelines

• Availability Filtering: The isCustomDate hook executes per calendar cell. Returinng a CSS class name renders the specified visual state, while returning false injects the .disabled class and intercepts click events.
• Epoch Conversion: Extract seconds since the Unix epoch by invoking .unix() on the Moment instances passed into the secondary callback. This guarantees timezone-agnostic payloads for REST APIs.
• Styling Continuity: Define the .active-slot selector in your cascade stylesheet to override default hover/selection palettes. Combining this with disabled states creates a clear reservation matrix.