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

localization.mddocs/

Localization

Bootstrap DateRangePicker provides comprehensive localization support for international applications with customizable date formats, labels, calendar layouts, and text direction.

Capabilities

Locale Configuration Interface

Complete interface for customizing all localizable aspects of the date picker.

interface LocaleOptions {
  /** Text direction: 'ltr' (left-to-right) or 'rtl' (right-to-left) */
  direction?: 'ltr' | 'rtl';
  
  /** Date format string using Moment.js format tokens */
  format?: string;
  
  /** Separator between start and end dates in display */
  separator?: string;
  
  /** Text for Apply button */
  applyLabel?: string;
  
  /** Text for Cancel button */
  cancelLabel?: string;
  
  /** Text for week number column header */
  weekLabel?: string;
  
  /** Text for Custom Range option in predefined ranges */
  customRangeLabel?: string;
  
  /** Array of abbreviated day names starting with Sunday */
  daysOfWeek?: string[];
  
  /** Array of abbreviated month names starting with January */
  monthNames?: string[];
  
  /** First day of week (0 = Sunday, 1 = Monday, etc.) */
  firstDay?: number;
}

Default Locale Values

The default locale configuration uses Moment.js locale data.

// Default locale configuration
var defaultLocale = {
  direction: 'ltr',
  format: moment.localeData().longDateFormat('L'), // Moment.js locale date format
  separator: ' - ',
  applyLabel: 'Apply',
  cancelLabel: 'Cancel',
  weekLabel: 'W',
  customRangeLabel: 'Custom Range',
  daysOfWeek: moment.weekdaysMin(), // ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
  monthNames: moment.monthsShort(), // ['Jan', 'Feb', 'Mar', ...]
  firstDay: moment.localeData().firstDayOfWeek() // Usually 0 (Sunday) or 1 (Monday)
};

Basic Localization Usage

Simple locale customization for common international requirements.

// Spanish localization
$('#daterange').daterangepicker({
  locale: {
    format: 'DD/MM/YYYY',
    separator: ' - ',
    applyLabel: 'Aplicar',
    cancelLabel: 'Cancelar',
    weekLabel: 'S',
    customRangeLabel: 'Rango Personalizado',
    daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
                 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    firstDay: 1 // Monday
  }
});

// French localization
$('#daterange').daterangepicker({
  locale: {
    format: 'DD/MM/YYYY',
    separator: ' au ',
    applyLabel: 'Appliquer',
    cancelLabel: 'Annuler',
    weekLabel: 'S',
    customRangeLabel: 'Période personnalisée',
    daysOfWeek: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
                 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    firstDay: 1 // Monday
  }
});

// German localization
$('#daterange').daterangepicker({
  locale: {
    format: 'DD.MM.YYYY',
    separator: ' bis ',
    applyLabel: 'Anwenden',
    cancelLabel: 'Abbrechen',
    weekLabel: 'W',
    customRangeLabel: 'Benutzerdefiniert',
    daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
                 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
    firstDay: 1 // Monday
  }
});

Date Format Customization

Extensive date format options using Moment.js format tokens.

// Common date format patterns
var formatExamples = {
  'MM/DD/YYYY': '12/25/2023',        // US format
  'DD/MM/YYYY': '25/12/2023',        // European format
  'YYYY-MM-DD': '2023-12-25',        // ISO format
  'DD.MM.YYYY': '25.12.2023',        // German format
  'DD MMM YYYY': '25 Dec 2023',       // Abbreviated month
  'MMMM DD, YYYY': 'December 25, 2023', // Full month
  'DD/MM/YY': '25/12/23',            // Short year
  'ddd, MMM DD': 'Mon, Dec 25'       // Day of week with date
};

Usage Examples:

// ISO date format for APIs
$('#api-daterange').daterangepicker({
  locale: {
    format: 'YYYY-MM-DD'
  }
}, function(start, end, label) {
  // Dates are already in API-friendly format
  console.log('API date range:', start.format('YYYY-MM-DD'), 'to', end.format('YYYY-MM-DD'));
});

// User-friendly display format
$('#display-daterange').daterangepicker({
  autoUpdateInput: false,
  locale: {
    format: 'MMM DD, YYYY'
  }
}).on('apply.daterangepicker', function(ev, picker) {
  // Custom display format
  $(this).val(picker.startDate.format('MMM DD, YYYY') + ' - ' + picker.endDate.format('MMM DD, YYYY'));
});

// Date and time format
$('#datetime-range').daterangepicker({
  timePicker: true,
  timePicker24Hour: false,
  locale: {
    format: 'MM/DD/YYYY hh:mm A'
  }
});

// 24-hour time format
$('#datetime-24h').daterangepicker({
  timePicker: true,
  timePicker24Hour: true,
  locale: {
    format: 'DD/MM/YYYY HH:mm'
  }
});

Right-to-Left (RTL) Language Support

Complete RTL language support for Arabic, Hebrew, and other RTL languages.

// Arabic localization with RTL support
$('#daterange').daterangepicker({
  locale: {
    direction: 'rtl',
    format: 'DD/MM/YYYY',
    separator: ' إلى ',
    applyLabel: 'تطبيق',
    cancelLabel: 'إلغاء',
    weekLabel: 'أ',
    customRangeLabel: 'نطاق مخصص',
    daysOfWeek: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
    monthNames: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
    firstDay: 6 // Saturday in some Arabic countries
  }
});

// Hebrew localization
$('#daterange').daterangepicker({
  locale: {
    direction: 'rtl',
    format: 'DD/MM/YYYY',
    separator: ' עד ',
    applyLabel: 'החל',
    cancelLabel: 'ביטול',
    weekLabel: 'ש',
    customRangeLabel: 'טווח מותאם אישית',
    daysOfWeek: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
    monthNames: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני',
                 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
    firstDay: 0 // Sunday
  }
});

Advanced Localization Patterns

Dynamic Locale Switching:

var locales = {
  en: {
    format: 'MM/DD/YYYY',
    separator: ' - ',
    applyLabel: 'Apply',
    cancelLabel: 'Cancel',
    weekLabel: 'W',
    customRangeLabel: 'Custom Range',
    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    firstDay: 0
  },
  es: {
    format: 'DD/MM/YYYY',
    separator: ' - ',
    applyLabel: 'Aplicar',
    cancelLabel: 'Cancelar',
    weekLabel: 'S',
    customRangeLabel: 'Rango Personalizado',
    daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
    monthNames: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    firstDay: 1
  }
};

function switchLocale(lang) {
  var picker = $('#daterange').data('daterangepicker');
  if (picker) {
    picker.locale = locales[lang];
    picker.updateView();
  }
}

// Language switcher
$('#lang-select').change(function() {
  switchLocale($(this).val());
});

Moment.js Locale Integration:

// Set Moment.js locale first
moment.locale('fr');

// DateRangePicker will use Moment's locale data as defaults
$('#daterange').daterangepicker({
  locale: {
    // Override specific properties while keeping Moment.js defaults for others
    separator: ' au ',
    customRangeLabel: 'Période personnalisée'
  }
});

// Multiple locale support
function initializeDateRangePicker(locale) {
  moment.locale(locale);
  
  var customLabels = {
    en: { customRangeLabel: 'Custom Range', separator: ' - ' },
    fr: { customRangeLabel: 'Période personnalisée', separator: ' au ' },
    de: { customRangeLabel: 'Benutzerdefiniert', separator: ' bis ' },
    es: { customRangeLabel: 'Rango Personalizado', separator: ' - ' }
  };
  
  $('#daterange').daterangepicker({
    locale: $.extend({
      format: moment.localeData().longDateFormat('L'),
      daysOfWeek: moment.weekdaysMin(),
      monthNames: moment.monthsShort(),
      firstDay: moment.localeData().firstDayOfWeek()
    }, customLabels[locale])
  });
}

Unicode and Special Characters:

// Support for Unicode characters in custom range labels
$('#daterange').daterangepicker({
  locale: {
    customRangeLabel: 'Пользовательский диапазон', // Russian
    applyLabel: '应用', // Chinese
    cancelLabel: 'キャンセル', // Japanese
    separator: ' ～ ' // Japanese range separator
  }
});

// HTML entity support
$('#daterange').daterangepicker({
  locale: {
    customRangeLabel: 'Custom Range', // Non-breaking space
    separator: ' — ' // Em dash with spaces
  }
});

Localization with Predefined Ranges

Localizing predefined range labels along with the picker interface.

// Localized predefined ranges
$('#daterange').daterangepicker({
  ranges: {
    'Aujourd\'hui': [moment(), moment()],
    'Hier': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    '7 derniers jours': [moment().subtract(6, 'days'), moment()],
    '30 derniers jours': [moment().subtract(29, 'days'), moment()],
    'Ce mois': [moment().startOf('month'), moment().endOf('month')],
    'Mois dernier': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  locale: {
    format: 'DD/MM/YYYY',
    separator: ' au ',
    applyLabel: 'Appliquer',
    cancelLabel: 'Annuler',
    customRangeLabel: 'Période personnalisée',
    daysOfWeek: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
    monthNames: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
    firstDay: 1
  }
});

// Dynamic range labels based on locale
function getLocalizedRanges(locale) {
  var ranges = {
    en: {
      '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')]
    },
    es: {
      'Hoy': [moment(), moment()],
      'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
      'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
      'Este mes': [moment().startOf('month'), moment().endOf('month')],
      'Mes pasado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  };
  
  return ranges[locale] || ranges.en;
}