{"id":34626,"date":"2022-10-14T17:13:52","date_gmt":"2022-10-14T15:13:52","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/correction-du-premier-jour-de-la-semaine-du-formatage-et-de-la-traduction-en-calendrier-du-champ-de-type-date-dans-le-widget-elementor-pro-form\/"},"modified":"2023-08-29T18:09:38","modified_gmt":"2023-08-29T16:09:38","slug":"correction-du-premier-jour-de-la-semaine-du-formatage-et-de-la-traduction-en-calendrier-du-champ-de-type-date-dans-le-widget-elementor-pro-form","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/correction-du-premier-jour-de-la-semaine-du-formatage-et-de-la-traduction-en-calendrier-du-champ-de-type-date-dans-le-widget-elementor-pro-form\/","title":{"rendered":"Correction du premier jour de la semaine, du formatage et de la traduction en calendrier du champ de type Date dans le widget Elementor Pro Form."},"content":{"rendered":"\n<p>Dans cette rubrique, nous allons voir comment r\u00e9soudre, par le biais d&#8217;un code JavaScript, le probl\u00e8me de l&#8217;affichage du calendrier dans le champ date du widget Elementor Pro Form.<\/p>\n\n\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Elementor Pro Form widget calendar\" class=\"wp-image-18519\" style=\"width:561px;height:337px\" width=\"561\" height=\"337\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 689w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro-300x180.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=137 137w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=413 413w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/calendario-widget-form-de-elementor-pro.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=551 551w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Le premier probl\u00e8me est que les calendriers nord-am\u00e9ricains continuent \u00e0 utiliser le <strong>dimanche comme premier jour de la<\/strong> semaine, alors que les calendriers europ\u00e9ens consid\u00e8rent le lundi comme premier jour.<\/li>\n\n\n\n<li>Le deuxi\u00e8me probl\u00e8me est que, dans ce calendrier, les<strong> mois et les jours de la semaine sont en anglais<\/strong>.<\/li>\n\n\n\n<li>Et le troisi\u00e8me probl\u00e8me est que lorsque nous s\u00e9lectionnons une date dans le calendrier, elle est renvoy\u00e9e au <strong>format am\u00e9ricain Y-m-d (Ann\u00e9e-Mois-Jour<\/strong> ).<\/li>\n<\/ol>\n\n\n\n<p>Elementor Pro utilise la biblioth\u00e8que JavaScript <a rel=\"noreferrer noopener\" href=\"https:\/\/flatpickr.js.org\/\" target=\"_blank\">Flatpickr<\/a> pour impl\u00e9menter un <strong>datepicker<\/strong> qui fournit la section date \u00e0 travers un calendrier, par d\u00e9faut cette biblioth\u00e8que est en anglais, fixe le dimanche comme premier jour de la semaine et renvoie la date au format am\u00e9ricain.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu&#8217;est-ce qu&#8217;un s\u00e9lecteur de date ?<\/h2>\n\n\n\n<p>Les <em>Datepikers<\/em> sont des \u00e9l\u00e9ments qui aident l&#8217;utilisateur \u00e0 s\u00e9lectionner une date de mani\u00e8re simple gr\u00e2ce \u00e0 un calendrier visuel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu&#8217;est-ce que Flatpickr ?<\/h2>\n\n\n\n<p><strong>Flatpickr<\/strong> est une biblioth\u00e8que de datepicker d\u00e9di\u00e9e qui ne d\u00e9pend pas de <strong>JQuery UI Datepicker<\/strong>, est plus l\u00e9g\u00e8re et est utilis\u00e9e par Elementor Pro pour am\u00e9liorer la s\u00e9lection de la date dans les champs de date du widget Form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution<\/h2>\n\n\n\n<p>Voyons comment ins\u00e9rer le code dans notre site web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-el-calendario-del-campo-fecha-del-formulario-elementor-form.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"1614\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-el-calendario-del-campo-fecha-del-formulario-elementor-form.gif?strip=all&quality=92&webp=92&avif=92&resize=1614%2C908\" alt=\"Ins\u00e9rer un code personnalis\u00e9 dans Elementor\" class=\"wp-image-18546\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\t\t<div data-elementor-type=\"section\" data-elementor-id=\"33247\" class=\"elementor elementor-33247 elementor-18521\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3f303c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3f303c8\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-01880a1\" data-id=\"01880a1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a6c5376 elementor-align-left elementor-widget elementor-widget-dce-copy-to-clipboard\" data-id=\"a6c5376\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;dce_clipboard_type&quot;:&quot;code&quot;,&quot;dce_clipboard_visible&quot;:&quot;yes&quot;,&quot;animation_on_copy&quot;:&quot;shake-animation&quot;}\" data-widget_type=\"dce-copy-to-clipboard.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"dce-clipboard-wrapper dce-clipboard-wrapper-code\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"button\" id=\"dce-clipboard-btn-1\" data-clipboard-text=\"&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: [ &#039;Dom&#039;, &#039;Lun&#039;, &#039;Mar&#039;, &#039;Mie&#039;, &#039;Jue&#039;, &#039;Vie&#039;, &#039;Sab&#039; ],\n            longhand : [ &#039;Domingo&#039;, &#039;Lunes&#039;, &#039;Martes&#039;, &#039;Mi\u00e9rcoles&#039;, &#039;Jueves&#039;, &#039;Viernes&#039;, &#039;S\u00e1bado&#039;]\n     };\n\t\t flatpickr.l10ns.default.months = {\n            shorthand: [ &#039;Ene&#039;, &#039;Feb&#039;, &#039;Mar&#039;, &#039;Abr&#039;, &#039;May&#039;, &#039;Jun&#039;, &#039;Jul&#039;, &#039;Ago&#039;, &#039;Sep&#039;, &#039;Oct&#039;, &#039;Nov&#039;, &#039;Dic&#039; ],\n            longhand : [ &#039;Enero&#039;, &#039;Febrero&#039;, &#039;Marzo&#039;, &#039;Abril&#039;, &#039;Mayo&#039;, &#039;Junio&#039;, &#039;Julio&#039;, &#039;Agosto&#039;, &#039;Septiembre&#039;, &#039;Octubre&#039;, &#039;Noviembre&#039;, &#039;Diciembre&#039; ]\n     };\n\t\tsetTimeout( function(){\n\t\t\t    $(&#039;.elementor-date-field&#039;).each(function(){flatpickr( $(this)[0] ).set(&#039;dateFormat&#039;, &#039;d\/m\/Y&#039;);});\n\t\t}, 1000 );\n   });\n&lt;\/script&gt;\">\n\t\t\t<span class=\"elementor-button-content-wrapper dce-flexbox\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-icon elementor-align-icon-left\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"far fa-copy\"><\/i>\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Copier le code<\/span>\n\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<pre class=\"dce-clipboard-code line-numbers\"><code class=\"language-javascript\">&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: [ &#039;Dom&#039;, &#039;Lun&#039;, &#039;Mar&#039;, &#039;Mie&#039;, &#039;Jue&#039;, &#039;Vie&#039;, &#039;Sab&#039; ],\n            longhand : [ &#039;Domingo&#039;, &#039;Lunes&#039;, &#039;Martes&#039;, &#039;Mi\u00e9rcoles&#039;, &#039;Jueves&#039;, &#039;Viernes&#039;, &#039;S\u00e1bado&#039;]\n     };\n\t\t flatpickr.l10ns.default.months = {\n            shorthand: [ &#039;Ene&#039;, &#039;Feb&#039;, &#039;Mar&#039;, &#039;Abr&#039;, &#039;May&#039;, &#039;Jun&#039;, &#039;Jul&#039;, &#039;Ago&#039;, &#039;Sep&#039;, &#039;Oct&#039;, &#039;Nov&#039;, &#039;Dic&#039; ],\n            longhand : [ &#039;Enero&#039;, &#039;Febrero&#039;, &#039;Marzo&#039;, &#039;Abril&#039;, &#039;Mayo&#039;, &#039;Junio&#039;, &#039;Julio&#039;, &#039;Agosto&#039;, &#039;Septiembre&#039;, &#039;Octubre&#039;, &#039;Noviembre&#039;, &#039;Diciembre&#039; ]\n     };\n\t\tsetTimeout( function(){\n\t\t\t    $(&#039;.elementor-date-field&#039;).each(function(){flatpickr( $(this)[0] ).set(&#039;dateFormat&#039;, &#039;d\/m\/Y&#039;);});\n\t\t}, 1000 );\n   });\n&lt;\/script&gt;<\/code><\/pre>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cliquez sur le bouton <strong>COPY CODE<\/strong> ci-dessus.<\/li>\n\n\n\n<li>Dans le panneau d&#8217;administration de WordPress, naviguez vers <em>Elementor<\/em> &gt; <em>Custom code<\/em>.<\/li>\n\n\n\n<li>Cliquez sur le bouton <strong>Ajouter un nouveau<\/strong>.<\/li>\n\n\n\n<li>Tapez un titre et collez le code dans la case ci-dessous en utilisant <strong>CTRL+V<\/strong> (Windows) ou <strong>CMD+V<\/strong> (Mac). Vous pouvez \u00e9galement cliquer avec le bouton droit de la souris et s\u00e9lectionner <em>Coller<\/em>.<\/li>\n\n\n\n<li>Cliquez sur le bouton <strong>Publier<\/strong>.<\/li>\n\n\n\n<li>Dans la fen\u00eatre contextuelle, d\u00e9finissez les <a href=\"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/condiciones-de-visualizacion-para-plantillas-globales-del-maquetador-de-temas\/\">conditions d&#8217;affichage<\/a>, par d\u00e9faut <strong>Tous les sites<\/strong>.<\/li>\n\n\n\n<li>Cliquez sur <strong>Enregistrer et fermer<\/strong>.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Le calendrier du champ Date s&#8217;affiche d\u00e9sormais correctement.<\/p>\n<\/blockquote>\n","protected":false},"featured_media":32926,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-34626","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro.jpg?strip=all&quality=92&webp=92&avif=92",1921,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro-300x148.jpg?strip=all&quality=92&webp=92&avif=92",300,148,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro-768x379.jpg",768,379,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro.jpg?strip=all&quality=92&webp=92&avif=92&fit=1920%2C948",1920,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro-1536x758.jpg?strip=all&quality=92&webp=92&avif=92",1536,758,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/10\/corregir-calendario-del-campo-fecha-del-widget-form-de-elementor-pro.jpg?strip=all&quality=92&webp=92&avif=92",1921,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Dans cette rubrique, nous allons voir comment r\u00e9soudre, par le biais d&#8217;un code JavaScript, le probl\u00e8me de l&#8217;affichage du calendrier dans le champ date du widget Elementor Pro Form. Elementor Pro utilise la biblioth\u00e8que JavaScript Flatpickr pour impl\u00e9menter un datepicker qui fournit la section date \u00e0 travers un calendrier, par d\u00e9faut cette biblioth\u00e8que est en&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/34626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/32926"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=34626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}