or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdconstructor-api.mdevents.mdindex.mdinstance-methods.mdjquery-plugin.mdlocalization.md
tile.json

configuration.mddocs/

Configuration Options

Bootstrap DateRangePicker provides extensive configuration options covering date constraints, display behavior, styling, time selection, and localization.

Capabilities

Date Configuration Options

Options for controlling date ranges, limits, and initial values.

interface DateOptions {
  /** Initial start date (string in locale format or Moment object) */
  startDate?: string | moment.Moment;
  
  /** Initial end date (string in locale format or Moment object) */
  endDate?: string | moment.Moment;
  
  /** Minimum selectable date (string in locale format or Moment object) */
  minDate?: string | moment.Moment;
  
  /** Maximum selectable date (string in locale format or Moment object) */
  maxDate?: string | moment.Moment;
  
  /** Maximum allowed date range duration (Moment duration object) */
  dateLimit?: {
    days?: number;
    months?: number;
    years?: number;
  };
  
  /** Predefined date ranges shown as quick selection options */
  ranges?: {
    [label: string]: [moment.Moment, moment.Moment];
  };
}

Usage Examples:

// Date constraints
$('#daterange').daterangepicker({
  startDate: moment().subtract(7, 'days'),
  endDate: moment(),
  minDate: moment().subtract(1, 'year'),
  maxDate: moment().add(1, 'year'),
  dateLimit: { days: 30 }, // Maximum 30-day range
  ranges: {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }
});

// Single date picker for appointments
$('#appointment-date').daterangepicker({
  singleDatePicker: true,
  startDate: moment(),
  minDate: moment(), // No past dates
  maxDate: moment().add(6, 'months') // 6 months booking window
});

Display Configuration Options

Options controlling the visual appearance and positioning of the date picker.

interface DisplayOptions {
  /** Dropdown position relative to element: 'left', 'right', 'center' */
  opens?: 'left' | 'right' | 'center';
  
  /** Dropdown direction: 'up' or 'down' */
  drops?: 'up' | 'down';
  
  /** Show year/month dropdown selectors */
  showDropdowns?: boolean;
  
  /** Show week numbers in calendar */
  showWeekNumbers?: boolean;
  
  /** Show ISO week numbers instead of locale week numbers */
  showISOWeekNumbers?: boolean;
  
  /** Show "Custom Range" option in predefined ranges */
  showCustomRangeLabel?: boolean;
  
  /** Always show calendar even when predefined ranges are available */
  alwaysShowCalendars?: boolean;
  
  /** Parent element to append picker dropdown to */
  parentEl?: string | jQuery;
}

Usage Examples:

// Display positioning and features
$('#daterange').daterangepicker({
  opens: 'left', // Open dropdown to the left
  drops: 'up',   // Show dropdown above element
  showDropdowns: true, // Year/month selectors
  showWeekNumbers: true, // Show week numbers
  alwaysShowCalendars: true, // Always show calendars with ranges
  parentEl: '#calendar-container' // Append to specific container
});

// Responsive positioning
$('#mobile-daterange').daterangepicker({
  opens: 'center', // Center on mobile
  parentEl: 'body',
  showDropdowns: true // Touch-friendly dropdowns
});

Behavior Configuration Options

Options controlling the interactive behavior and user experience.

interface BehaviorOptions {
  /** Automatically apply selection without Apply button */
  autoApply?: boolean;
  
  /** Automatically update input element value when dates change */
  autoUpdateInput?: boolean;
  
  /** Link left and right calendar navigation */
  linkedCalendars?: boolean;
  
  /** Single date selection mode instead of date range */
  singleDatePicker?: boolean;
}

Usage Examples:

// Immediate application (no Apply button)
$('#daterange').daterangepicker({
  autoApply: true,
  autoUpdateInput: true, // Update input immediately
  ranges: {
    'Today': [moment(), moment()],
    'This Week': [moment().startOf('week'), moment().endOf('week')]
  }
});

// Manual control over input updates
$('#daterange').daterangepicker({
  autoApply: false,
  autoUpdateInput: false, // Don't update input automatically
}).on('apply.daterangepicker', function(ev, picker) {
  // Custom input formatting
  $(this).val(
    picker.startDate.format('MMM DD') + ' - ' + 
    picker.endDate.format('MMM DD, YYYY')
  );
});

// Single date picker
$('#birthdate').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  maxDate: moment().subtract(18, 'years') // Must be at least 18
});

Time Picker Configuration Options

Options for enabling and configuring time selection capabilities.

interface TimePickerOptions {
  /** Enable time picker */
  timePicker?: boolean;
  
  /** Use 24-hour format instead of 12-hour with AM/PM */
  timePicker24Hour?: boolean;
  
  /** Minute increment for time picker (1, 5, 10, 15, 30) */
  timePickerIncrement?: number;
  
  /** Show seconds in time picker */
  timePickerSeconds?: boolean;
}

Usage Examples:

// Full date/time picker
$('#datetime-range').daterangepicker({
  timePicker: true,
  timePicker24Hour: false, // 12-hour format with AM/PM
  timePickerIncrement: 15, // 15-minute increments
  timePickerSeconds: false,
  locale: {
    format: 'MM/DD/YYYY hh:mm A'
  }
});

// 24-hour time picker with seconds
$('#precise-datetime').daterangepicker({
  singleDatePicker: true,
  timePicker: true,
  timePicker24Hour: true,
  timePickerIncrement: 1,
  timePickerSeconds: true,
  locale: {
    format: 'YYYY-MM-DD HH:mm:ss'
  }
});

// Appointment booking (30-minute slots)
$('#appointment-time').daterangepicker({
  singleDatePicker: true,
  timePicker: true,
  timePickerIncrement: 30,
  minDate: moment(),
  locale: {
    format: 'MM/DD/YYYY hh:mm A'
  }
});

Styling Configuration Options

Options for customizing the visual appearance and CSS classes.

interface StylingOptions {
  /** CSS classes for Apply and Cancel buttons */
  buttonClasses?: string;
  
  /** CSS class for Apply button */
  applyClass?: string;
  
  /** CSS class for Cancel button */
  cancelClass?: string;
  
  /** Custom HTML template for the picker */
  template?: string | jQuery;
}

Usage Examples:

// Custom button styling
$('#daterange').daterangepicker({
  buttonClasses: 'btn btn-sm',
  applyClass: 'btn-primary',
  cancelClass: 'btn-secondary'
});

// Bootstrap 4 styling
$('#bootstrap4-daterange').daterangepicker({
  buttonClasses: 'btn btn-sm',
  applyClass: 'btn-success',
  cancelClass: 'btn-light'
});

// Custom template with additional elements
var customTemplate = 
  '<div class="daterangepicker dropdown-menu">' +
    '<div class="calendar left">' +
      '<div class="daterangepicker_input">' +
        '<input class="input-mini form-control" type="text" name="daterangepicker_start" value="" />' +
        '<i class="fa fa-calendar"></i>' +
      '</div>' +
      '<div class="calendar-table"></div>' +
    '</div>' +
    '<div class="calendar right">' +
      '<div class="daterangepicker_input">' +
        '<input class="input-mini form-control" type="text" name="daterangepicker_end" value="" />' +
        '<i class="fa fa-calendar"></i>' +
      '</div>' +
      '<div class="calendar-table"></div>' +
    '</div>' +
    '<div class="ranges">' +
      '<div class="range_inputs">' +
        '<button class="applyBtn" type="button">Apply</button>' +
        '<button class="cancelBtn" type="button">Cancel</button>' +
      '</div>' +
    '</div>' +
  '</div>';

$('#custom-template-daterange').daterangepicker({
  template: customTemplate
});

Complete Configuration Example

// Comprehensive configuration example
$('#advanced-daterange').daterangepicker({
  // Date settings
  startDate: moment().subtract(7, 'days'),
  endDate: moment(),
  minDate: moment().subtract(6, 'months'),
  maxDate: moment().add(6, 'months'),
  dateLimit: { days: 90 },
  ranges: {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  
  // Display options
  opens: 'right',
  drops: 'down',
  showDropdowns: true,
  showWeekNumbers: true,
  showCustomRangeLabel: true,
  alwaysShowCalendars: false,
  parentEl: 'body',
  
  // Behavior options
  autoApply: false,
  autoUpdateInput: true,
  linkedCalendars: true,
  singleDatePicker: false,
  
  // Time picker options
  timePicker: true,
  timePicker24Hour: false,
  timePickerIncrement: 15,
  timePickerSeconds: false,
  
  // Styling options
  buttonClasses: 'btn btn-sm',
  applyClass: 'btn-success',
  cancelClass: 'btn-default',
  
  // Localization
  locale: {
    direction: 'ltr',
    format: 'MM/DD/YYYY hh:mm A',
    separator: ' - ',
    applyLabel: 'Apply',
    cancelLabel: 'Cancel',
    weekLabel: 'W',
    customRangeLabel: 'Custom Range',
    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    firstDay: 1 // Monday
  }
}, function(start, end, label) {
  console.log('Date range selected:', start.format('YYYY-MM-DD'), 'to', end.format('YYYY-MM-DD'));
  if (label) {
    console.log('Predefined range used:', label);
  }
});