{"id":34623,"date":"2022-10-14T17:13:52","date_gmt":"2022-10-14T15:13:52","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/fix-first-day-of-the-week-formatting-and-calendar-translation-of-the-date-type-field-of-the-elementor-pro-form-widget\/"},"modified":"2023-03-30T12:10:56","modified_gmt":"2023-03-30T10:10:56","slug":"fix-first-day-of-the-week-formatting-and-calendar-translation-of-the-date-type-field-of-the-elementor-pro-form-widget","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/fix-first-day-of-the-week-formatting-and-calendar-translation-of-the-date-type-field-of-the-elementor-pro-form-widget\/","title":{"rendered":"Fix first day of the week, formatting and calendar translation of the Date type field of the Elementor Pro Form widget."},"content":{"rendered":"\n

In this topic we are going to see how to fix through JavaScript code, the problem of the calendar displayed in the date field of the Elementor Pro Form widget.<\/p>\n\n

\"Elementor<\/a><\/figure>\n
  1. The first problem arises because North American calendars continue to use Sunday as the first day of<\/strong> the week, while European calendars consider Monday as the first day.<\/li>
  2. The second problem is that in this calendar the months and days of the week are in English<\/strong>.<\/li>
  3. And the third problem is that when we select a date in the calendar it returns it in American date format Y-m-d<\/strong> (Year-month-day).<\/li><\/ol>\n

    Elementor Pro uses the JavaScript Flatpickr<\/a> library to implement a datepicker<\/strong> that facilitates the date section through a calendar, by default this library is in English, sets Sunday as the first day of the week and returns the date with amarican format. <\/p>\n\n

    What is a datepicker?<\/h2>\n\n

    Datepikers<\/em> are elements that help the user to select a date in a simple way through a visual calendar.<\/p>\n\n

    What is Flatpickr?<\/h2>\n\n

    Flatpickr<\/strong> is a library dedicated to the creation of datepickers that does not depend on JQuery UI Datepicker<\/strong>, is lighter and is the one used by Elementor Pro to improve the selection of dates in the date fields of the Form widget.<\/p>\n\n

    Solution<\/h2>\n\n

    Let’s see how to insert the code in our website.<\/p>\n\n

    \"Insert<\/a><\/figure>\n
    <\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t
    \n\t\t\t\t\t