<form>
  <link rel=prefetch href=https://cdn.skypack.dev/moment@2.29.1 as=script />
<label for="datepicker">Date de naissance :</label>
<input type=text id=datepicker placeholder="Cliquez ici" />
</form>
<h2>Que fait cette démo ?</h2>
<p>Regardez le réseau : au chargement de la page vous ne devriez avoir que l'appel à jQuery. Il n'y a que lorsque l'utilisateur va cliquer dans le champs date que nous allons charger et exécuter le datepicker JS, ce qui inclue:
<ul><li>Son CSS, chargé donc dynamiquement ce qui accélère le premier affichage,
  <li>son JS,
  <li>et sa dépendance (très lourde) : momentJS
</ul>
C'est donc du chargement et exécution à la demande d'un module complet, sans aucune autre techno que jQuery (dont on aurait pu se passer) et ES <code>import()</code> (remplaçable par <code>$.getScript()</code> ou 5 lignes de manipulation du DOM pour le faire marcher sur IE 11 👴).
</p>
<p>Pour accélérer l'affichage après le premier clic, on pourrait utiliser <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/prefetch>prefetch</a> voire <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/modulepreload>modulepreload</a> (⚠️ compatibilité)</p>
<p><strong>Nota Bene</strong> : dans ce cas fonctionnel précis, préférez <code>&lt;input type=date /&gt;</code></p>
import $ from "https://cdn.skypack.dev/jquery@3.6.0";
// jQuery est déjà inclus en global (c'est mal)
const elField = document.getElementById('datepicker')

// download and execute the code only if the user wants to interact with our field
$(elField).one('focus', (e) => {
//  $field.attr('type', 'text')
//  e.preventDefault()
  importLightpickCSS() // get CSS and hope it's there before JS executes
  import('https://cdn.skypack.dev/moment@2.29.1') // subdependancy
    .then(() => 
      // main dependancy
      import('https://cdn.skypack.dev/lightpick@1.6.2').then((m) => {
        window.lightpick = m.default // set global cause we have old school code
        initInteractivity() // the old code
        $(elField).click() // trigger a click() event for the sub lib to work
      }
     )
  )
})

// original code from https://www.woopets.fr/chien/actualite/confinement-une-tendance-a-la-prise-de-poids-inquietante-chez-les-chiens/
function initInteractivity() {
  var rangeText = function (start, end) {
    var str = '';
    str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
    str += end ? end.format('Do MMMM YYYY') : '...';
    return str;
  }
  new lightpick({
    field: elField,
    lang: 'fr',
    locale: {
      tooltip: {
        one: 'jour',
        few: 'jours',
        many: 'jours',
        other: 'jours',
      },
      pluralize: function(i, locale) {
        if ('one' in locale && i % 10 === 1 && !(i % 100 === 11)) return locale.one;
        if ('few' in locale && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 && !(i % 100 >= 12 && i % 100 <= 14)) return locale.few;
        if ('many' in locale && (i % 10 === 0 || i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 || i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)) return locale.many;
        if ('other' in locale) return locale.other;
        return '';
      }
    },
    singleDate: true,
  });
        
}

// dynamically downloading the correct CSS
// A more perfect version would listen to the onload event for the caller to know when the file is here
function importLightpickCSS() {
  $("head")
     .append(
      $("<link rel='stylesheet' href='https://cdn.skypack.dev/lightpick/css/lightpick.css' type='text/css' media='screen' />")
    )
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.