Afin de pouvoir traduire le texte du sélecteur de date, il faut ajouter l'objet global à votre fichier js utils.js par exemple.
Nous nous basons sur la lang indiqué dans la balise HTML, il faudra donc que celle-ci soit à jour et correcte.
Pour un fonctionnement correct il faut que pour les boutons disposant de la class js-dropdown__simple--btn, le texte soit dans une span et l'icone dans une balise i (voir exemple ci-desssous)
var global = { traduction : { fr_FR : { selectDate : "Selectionner la date " }, en_EN : { selectDate : "Select date" }, es_ES : { selectDate : "Seleccione fecha" } } }
<div class="o-head--secondary o-head--secondary--filters js-sticky--filters u-hideOnMobile">
<div class="o-head--secondary--filters__wrapper">
<div class="head--secondary--row">
<div class="head--secondary--state">
<div class="u-capitalized">Afficher :</div>
<div class="c-radio u-bubble">
<input type="radio" id="projet-current" name="projet-state"/><span></span>
<label class="u-text" for="projet-current">Projets en cours</label>
</div>
<div class="c-radio u-bubble">
<input type="radio" id="projet-end" name="projet-state"/><span></span>
<label class="u-text" for="projet-end">Projets archivés</label>
</div>
</div>
<div class="head--secondary--sort">
<label class="u-capitalized u-rBubble">Trier par:</label>
<div class="c-select c-select--light u-rBubble">
<select>
<option value="date_desc">Projets les plus récents</option>
<option value="date_asc">Projets les plus anciens</option>
<option value="name_asc">Nom de projets (A-Z)</option>
<option value="name_desc">Nom de projets (Z-A)</option>
</select><i class="c-fonticon__icon-chevron"></i>
</div>
<button class="o-btn o-btn--light"><i class="c-fonticon__icon-map"></i><span>Voir les sondages sur map</span></button>
</div>
</div>
<div class="head--secondary--row">
<div class="head--secondary--filters">
<div class="o-input__holder searchbar-filter">
<input class="search" type="text" id="project_name" placeholder="Rechercher le nom d’un projet"/>
<button><i class="c-fonticon__icon-search"></i></button>
</div>
<button class="o-btn o-btn--submit js-popin-filter"><i class="icon-filter"></i><span>Filtrer mes projets</span></button>
</div>
</div>
<div class="head--secondary--row js-active-filter filter-active-bloc">
<div class="filter-active-item"><span class="filter-active-item-title">Plaque dynamique légère</span><span class="filter-active-item-close c-fonticon__icon-close"></span></div>
<div class="filter-active-item"><span>12 mars - 26 mars</span><span class="filter-active-item-close c-fonticon__icon-close"></span></div>
<div class="filter-active-item filter-delete-all"><span class="u-capitalized">Effacer tout</span><span class="filter-active-item-close c-fonticon__icon-close"></span></div>
</div>
</div>
</div>
<div class="sidebar-filter js-sidebar-filter">
<div class="bloc-filters">
<button class="js-close-sidebar close-sidebar c-fonticon__icon-close"> </button>
<div class="sidebar-title">Filter mes projets</div>
<div class="filter-section">Dates</div>
<div class="o-datepicker">
<input class="o-btn filter-btn" type="text" name="daterange" value="Selectionnner une date"/>
</div>
<div class="filter-section">Type de sondage</div>
<div class="dropdown js-dropdown__simple">
<div class="filter-title">Sondages mécanique</div>
<button class="js-dropdown__simple--btn filter-btn"> <span>Type d’études</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01undefined" name="checkbox"/><span></span>
<label for="checkbox--01undefined">label checkbox lorem ipsum dolor a</label>
</div>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="dropdown js-dropdown__simple">
<div class="filter-title">Sondages géologiques</div>
<button class="js-dropdown__simple--btn filter-btn"> <span>Auteur</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<input type="checkbox" id="checkbox--01undefined" name="checkbox"/><span></span>
<label for="checkbox--01undefined">label checkbox lorem ipsum dolor amet</label>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="filter-section">Type d'études </div>
<div class="dropdown js-dropdown__simple">
<button class="js-dropdown__simple--btn filter-btn"> <span>Type d’études</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01undefined" name="checkbox"/><span></span>
<label for="checkbox--01undefined">label checkbox lorem ipsum dolor a</label>
</div>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="filter-section">Auteur</div>
<div class="dropdown js-dropdown__simple">
<button class="js-dropdown__simple--btn filter-btn"> <span>Type d’études</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01undefined" name="checkbox"/><span></span>
<label for="checkbox--01undefined">label checkbox lorem ipsum dolor a</label>
</div>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="o-btn btn-submit o-btn--submit">Valider</div>
</div>
</div>
<div class="o-head--secondary o-head--secondary--filters js-sticky--filters u-hideOnMobile">
<div class="o-head--secondary--filters__wrapper">
<div class="head--secondary--row">
<div class="head--secondary--state">
<div class="u-capitalized">Afficher :</div>
<div class="c-radio u-bubble">
<input type="radio" id="projet-current" name="projet-state"/><span></span>
<label class="u-text" for="projet-current">Projets en cours</label>
</div>
<div class="c-radio u-bubble">
<input type="radio" id="projet-end" name="projet-state"/><span></span>
<label class="u-text" for="projet-end">Projets archivés</label>
</div>
</div>
<div class="head--secondary--sort">
<label class="u-capitalized u-rBubble">Trier par:</label>
<div class="c-select c-select--light u-rBubble">
<select>
<option value="date_desc">Projets les plus récents</option>
<option value="date_asc">Projets les plus anciens</option>
<option value="name_asc">Nom de projets (A-Z)</option>
<option value="name_desc">Nom de projets (Z-A)</option>
</select><i class="c-fonticon__icon-chevron"></i>
</div>
<button class="o-btn o-btn--light"><i class="c-fonticon__icon-map"></i><span>Voir les sondages sur map</span></button>
</div>
</div>
<div class="head--secondary--row">
<div class="head--secondary--filters">
<div class="o-input__holder">
<input type="text" id="project_name" placeholder="Rechercher le nom d’un projet"/>
</div>
<div class="o-datepicker">
<input class="o-btn o-btn--light" type="button" name="daterange" value="Date"/>
</div>
<div class="dropdown js-dropdown__simple">
<button class="js-dropdown__simple--btn o-btn o-btn--light"> <span>Type de sondage</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--010" name="checkbox"/><span></span>
<label for="checkbox--010">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--011" name="checkbox"/><span></span>
<label for="checkbox--011">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--012" name="checkbox"/><span></span>
<label for="checkbox--012">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--013" name="checkbox"/><span></span>
<label for="checkbox--013">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--014" name="checkbox"/><span></span>
<label for="checkbox--014">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--015" name="checkbox"/><span></span>
<label for="checkbox--015">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--016" name="checkbox"/><span></span>
<label for="checkbox--016">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--017" name="checkbox"/><span></span>
<label for="checkbox--017">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--018" name="checkbox"/><span></span>
<label for="checkbox--018">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--019" name="checkbox"/><span></span>
<label for="checkbox--019">label checkbox</label>
</div>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="dropdown js-dropdown__simple">
<button class="js-dropdown__simple--btn o-btn o-btn--light"> <span>Type d’études</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--010" name="checkbox"/><span></span>
<label for="checkbox--010">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--011" name="checkbox"/><span></span>
<label for="checkbox--011">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--012" name="checkbox"/><span></span>
<label for="checkbox--012">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--013" name="checkbox"/><span></span>
<label for="checkbox--013">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--014" name="checkbox"/><span></span>
<label for="checkbox--014">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--015" name="checkbox"/><span></span>
<label for="checkbox--015">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--016" name="checkbox"/><span></span>
<label for="checkbox--016">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--017" name="checkbox"/><span></span>
<label for="checkbox--017">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--018" name="checkbox"/><span></span>
<label for="checkbox--018">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--019" name="checkbox"/><span></span>
<label for="checkbox--019">label checkbox</label>
</div>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="dropdown js-dropdown__simple">
<button class="js-dropdown__simple--btn o-btn o-btn--light"> <span>Auteur</span><i class="c-fonticon__icon-chevron"></i></button>
<div class="dropdown__list">
<div class="dropdown__content">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--010" name="checkbox"/><span></span>
<label for="checkbox--010">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--011" name="checkbox"/><span></span>
<label for="checkbox--011">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--012" name="checkbox"/><span></span>
<label for="checkbox--012">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--013" name="checkbox"/><span></span>
<label for="checkbox--013">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--014" name="checkbox"/><span></span>
<label for="checkbox--014">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--015" name="checkbox"/><span></span>
<label for="checkbox--015">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--016" name="checkbox"/><span></span>
<label for="checkbox--016">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--017" name="checkbox"/><span></span>
<label for="checkbox--017">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--018" name="checkbox"/><span></span>
<label for="checkbox--018">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--019" name="checkbox"/><span></span>
<label for="checkbox--019">label checkbox</label>
</div>
</div>
<div class="dropdown__actions">
<button class="action refresh">Effacer</button>
<button class="action">Valider
<div class="c-fonticon__icon-chevron-right"></div>
</button>
</div>
</div>
</div>
<div class="separator"></div>
<button class="o-btn o-btn--submit">Rechercher</button>
</div>
</div>
</div>
</div>