Multilingual Date Picker

1 reply · opened May 13, 2021

AAlimawMay 13, 2021

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:

`

  • `

body / form:

										
											Date d'arrivée
											
												 -->
												
												
													
												
											
																				

										
											Date de départ
											
												
												
													
												
											
										

And finally:


	
	
	

	
	

		$(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...

SSemicolon WebSTAFFMay 14, 2021

Hello,

We have checked out your Codes and they appear to be perfectly. However, we have noticed that there is a JS Error on your Website which might be preventing the Date Picker Language to load correctly. Also you are using too many DatePicker JS Initializations at the bottom which can be a little confusing for you and we recommending removing the one you are not using.

Additionally, check the Image attached to this reply and move the language setting from the first JS Code to the second JS Code.

This should definitely fix your issues. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard