Canvas Support

Help Datepicker Spanish

2 replies · opened Mar 5, 2021

CcarlosacheMar 5, 2021

Hello good night, I have been looking at comments about changing the calendar to Spanish (datepicker), I already looked at the help links and I have not been able to do it.

Put the codes of this link https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html and it did not work for me

Also download and follow this instruction and I did not succeed:

  1. Download 1.3.1 here - http://eternicode.github.io/bootstrap-datepicker/

  2. Add “datepicker3.css” from zip file to your CSS folder and include CSS file in <head> tag

  3. Add “bootstrap-datepicker.js” from zip file to your JS folder and include JS file in <head> tag

  4. Give a class to the input element you want to show the datepicker when clicked… .i.e. "Bs-datepicker"

  5. Place the following code on the page with datepicker input:

<script> $ (function () {$ (’. bs-datepicker’). datepicker ();}); </script>

I am using the demo-hostel.html

Can you help me please?

SSemicolon WebSTAFFMar 6, 2021

Hello,

Please follow these instructions:

  1. Create a New File in the js/components Folder with the name datepicker.es.js and then add the following code inside it:
    [ch_pre type="js"]$.fn.datepicker.dates['es'] = {
    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", /* Leverages same syntax as 'format' */
    weekStart: 0
    };[/ch_pre]

  2. Translate the texts above according to your needs in Spanish.

  3. Add the following line of code in the HTML File just after the js/components/datepicker.js JS Linking at the bottom:
    [ch_pre]<script src="js/components/datepicker.es.js"></script>[/ch_pre]

  4. Find the following code in the HTML File:
    [ch_pre type="js"]$(function() {
    $('.travel-date-group').datepicker({
    autoclose: true,
    startDate: "today"

    });
    });[/ch_pre]

and replace it with:
[ch_pre type="js"]$(function() {
$('.travel-date-group').datepicker({
autoclose: true,
startDate: "today",
language: 'es',
});
});[/ch_pre]

This should definitely work fine. Hope this Helps!

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

CcarlosacheMar 6, 2021

Thanks its works, regards!!

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