{"id":6507,"date":"2022-10-14T17:13:52","date_gmt":"2022-10-14T15:13:52","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/adjusting-the-first-day-format-and-translation-of-the-elementor-calendar\/"},"modified":"2026-09-02T19:39:29","modified_gmt":"2026-09-02T17:39:29","slug":"adjusting-the-first-day-format-and-translation-of-the-elementor-calendar","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/adjusting-the-first-day-format-and-translation-of-the-elementor-calendar\/","title":{"rendered":"Adjusting the first day, format, and translation of the Elementor calendar"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Corregir el \ud83d\udcc5 calendario del campo fecha de Elementor Form\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Ykvrs5pebcg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n<p class=\"wp-block-paragraph\">In this topic, we are going to look at how to use JavaScript code to fix the issue with the calendar displayed in the date field of the Elementor Pro Form widget.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/calendario-widget-form-de-elementor-pro.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"414\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/calendario-widget-form-de-elementor-pro.jpg\" alt=\"Elementor Pro Form widget calendar\" class=\"wp-image-4637\" style=\"width:561px;height:337px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/calendario-widget-form-de-elementor-pro.jpg 689w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/calendario-widget-form-de-elementor-pro-500x300.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/calendario-widget-form-de-elementor-pro-600x361.jpg 600w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/a><\/figure>\n<\/div>\n<ol class=\"wp-block-list\">\n<li>The first issue arises because North American calendars continue to use <strong>Sunday as the first day of the week<\/strong>, whereas European calendars consider Monday to be the first day. <\/li>\n\n\n\n<li>The second issue is that in this calendar, the <strong>months and days of the week are in English<\/strong>.<\/li>\n\n\n\n<li>And the third issue is that when we select a date in the calendar, it returns it in <strong>American date format Y-m-d<\/strong> (Year-month-day).<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">Elementor Pro uses the <a rel=\"noreferrer noopener\" href=\"https:\/\/flatpickr.js.org\/\" target=\"_blank\">Flatpickr<\/a> JavaScript library to implement a <strong>datepicker<\/strong> that makes it easier for us to select dates via a calendar; by default, this library is in English, sets Sunday as the first day of the week, and returns the date in American format. <\/p>\n\n<h2 class=\"wp-block-heading\">What is a datepicker?<\/h2>\n\n<p class=\"wp-block-paragraph\"><em>Datepickers<\/em> are elements that help the user easily select a date through a visual calendar.<\/p>\n\n<h2 class=\"wp-block-heading\">What is Flatpickr?<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>Flatpickr<\/strong> is a library dedicated to creating datepickers that does not depend on <strong>jQuery UI Datepicker<\/strong>; it is lighter and is what Elementor Pro uses to improve date selection in the date-type fields of the Form widget.<\/p>\n\n<h2 class=\"wp-block-heading\">Solution<\/h2>\n\n<p class=\"wp-block-paragraph\">Let&#8217;s see how to insert the code into our website.<\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/corregir-el-calendario-del-campo-fecha-del-formulario-elementor-form.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1614\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/corregir-el-calendario-del-campo-fecha-del-formulario-elementor-form.gif\" alt=\"Insert custom code in Elementor\" class=\"wp-image-4640\"\/><\/a><\/figure>\n\n<pre class=\"wp-block-code has-white-background-color has-background\"><code>&lt;script&gt;\n   jQuery(document).ready(function($){\n     flatpickr.l10ns.default.firstDayOfWeek = 1; \/\/ Establecer primer d\u00eda lunes\n\t\t flatpickr.l10ns.default.weekdays = {\n            shorthand: &#91; 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ],\n            longhand : &#91; 'Domingo', 'Lunes', 'Martes', 'Mi\u00e9rcoles', 'Jueves', 'Viernes', 'S\u00e1bado']\n     };\n\t\t flatpickr.l10ns.default.months = {\n            shorthand: &#91; 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],\n            longhand : &#91; 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ]\n     };\n\t\tsetTimeout( function(){\n\t\t\t    $('.elementor-date-field').each(function(){flatpickr( $(this)&#91;0] ).set('dateFormat', 'd\/m\/Y');});\n\t\t}, 1000 );\n   });\n&lt;\/script&gt;<\/code><\/pre>\n\n<ol class=\"wp-block-list\">\n<li>Select and copy the code above.<\/li>\n\n\n\n<li>In the WordPress admin panel, navigate to <em>Elementor<\/em> &gt; <em>Custom Code<\/em>.<\/li>\n\n\n\n<li>Click the <strong>Add New<\/strong> button.<\/li>\n\n\n\n<li>Enter a title and paste the code into the box below using <strong>CTRL+V<\/strong> (Windows) or <strong>CMD+V<\/strong> (Mac). You can also right-click and select <em>Paste<\/em>. <\/li>\n\n\n\n<li>Click the <strong>Publish<\/strong> button.<\/li>\n\n\n\n<li>In the pop-up window, set the <a href=\"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/condiciones-de-visualizacion-para-plantillas-globales-del-maquetador-de-temas\/\">display conditions<\/a>, which default to <strong>Entire Site<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Save &amp; Close<\/strong>.<\/li>\n<\/ol>\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Now the Date field calendar will display correctly.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video Introduction In this topic, we are going to look at how to use JavaScript code to fix the issue with the calendar displayed in the date field of the Elementor Pro Form widget. Elementor Pro uses the Flatpickr JavaScript library to implement a datepicker that makes it easier for us to select dates [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Customize Elementor Calendar Dates and Translation","_seopress_titles_desc":"In this topic, we are going to look at how to use JavaScript code to fix the issue with the calendar displayed in the date field of the Form widget...","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[374],"tags":[386,378],"class_list":["post-6507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-wordpress-customization","tag-wordpress-forms"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6507"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6507\/revisions"}],"predecessor-version":[{"id":6509,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6507\/revisions\/6509"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6508"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}