Multilingual Date Picker

Hi,
I'm rather new to web dev and I'm writin a multilingual site using sub directories: en/ fr/ es/, etc.
On the contact form I need to have a date range picker. I read in the tickets that this item cannot be translated at the moment. Too bad :(
So I try to use 2 date pickers but although I read the ticlet http://support.semicolonweb.com/forums/topic/date-picker-in-spanish/ I can't get it to work.

I have creates a locale.js file:

// $.fn.datepicker.dates['en'] = {
//   days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
//   daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
//   daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
//   months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
//   monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
//   today: "Today",
//   clear: "Clear",
//   format: "mm/dd/yyyy",
//   titleFormat: "MM yyyy",
//   weekStart: 0
// };

$.fn.datepicker.dates['fr'] = {
  days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
  daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
  daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
  months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
  monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
  today: "Aujourd'hui",
  monthsTitle: "Mois",
  clear: "Effacer",
  weekStart: 1,
  format: "dd/mm/yyyy"
};

// !function(a){a.fn.datepicker.dates.es={
//   days:["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"],
//   daysShort:["Dom","Lun","Mar","Mié","Jue","Vie","Sáb"],
//   daysMin:["Do","Lu","Ma","Mi","Ju","Vi","Sa"],
//   months:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
//   monthsShort:["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],
//   today:"Hoy",
//   monthsTitle:"Meses",
//   clear:"Borrar",
//   weekStart:1,
//   format:"dd/mm/yyyy"
// }}(jQuery);

In the html code:
head:

<link rel="stylesheet" href="../assets/css/components/daterangepicker.css" type="text/css"/>

body / form:

										<div class="col-md-4 bottommargin-sm">
											<label for="date-from">Date d'arrivée</label>
											<div class="input-group">
												<!-- <input type="date" id="date-from" value="" name="date-from" class="form-control" placeholder="jj/mm/aaaa"> -->
												<input type="text" id="date-from" value="" name="date-from" class="form-control text-left component-datepicker today" placeholder="jj/mm/aaaa">
												<div class="input-group-append">
													<div class="input-group-text"><i class="icon-calendar2"></i></div>
												</div>
											</div>
										</div>										

										<div class="col-md-4 bottommargin-sm">
											<label for="date-to">Date de départ</label>
											<div class="input-group">
												<input type="text" id="date-to" value="" name="date-to" class="form-control text-left component-datepicker today" placeholder="jj/mm/aaaa">
												<div class="input-group-append">
													<div class="input-group-text"><i class="icon-calendar2"></i></div>
												</div>
											</div>
										</div>

And finally:

<!-- Footer Scripts
	============================================= -->

	<!-- Date picker JS -->
	<script src="../assets/js/components/datepicker.js"></script>
	<script src="../assets/js/locales/locales.js"></script>

	<!-- date script -->
	<script>

		$(function() {

			$('.component-datepicker.default').datepicker({
				autoclose: true,
				startDate: "today",
				format:'dd/mm/yyyy',
				language: 'fr'				
			});

			$('.component-datepicker.today').datepicker({
				autoclose: true,
				startDate: "today",
				todayHighlight: true
			});
tec.

I guess i am missing something...