web-dev-qa-db-fra.com

Existe-t-il un sélecteur de date JavaScript léger?

J'utilise le sélecteur de date jQuery, mais il est trop lourd, la version minifiée de ui.datepicker.min.js fait 44 Ko. Les images de datepicker ont leur propre poids. Le cadre jQuery est de 59 Ko. Et le nombre total d'images sur la page est d'environ 80 Ko. Le HTML total de la page est d'environ 70 Ko et la taille du fichier CSS est d'environ 72 Ko. Et bien plus encore, et tout cela représente jusqu'à 600 Ko (0,6 Mo).

Pensez-vous que l'utilisateur attendra le téléchargement de 600 Ko dans le navigateur? Cela peut prendre jusqu'à 8 à 10 secondes. Et je ne pense pas que l'utilisateur attendra aussi longtemps.

Je veux que mon site Web reste léger. Existe-t-il un sélecteur de date JavaScript léger?

javascriptdatepicker
50
Zain Shaikh

Une option consiste à utiliser un réseau de diffusion de conten (CDN) tel que Google Libraries API pour servir des fichiers de script courants comme jQuery. L'utilisation d'un CDN signifie que les utilisateurs auront déjà le fichier de script mis en cache dans leur navigateur et qu'ils n'auront pas besoin de le télécharger à nouveau. En ce qui concerne les autres ressources statiques, vous pouvez lire recommandations YSlow pour optimiser les temps de chargement des ressources statiques (vous pouvez réduire , compresser gzip et mettre en cache les ressources statiques).

2
Darin Dimitrov

Je viens de rencontrer Pikaday , qui a l'air bien et est assez léger (environ 11 Ko de JS, minifié). Ne nécessite pas non plus jQuery.

Voici une démo .

Une capture d'écran du sélecteur:

Pikaday Screenshot

Exemple d'utilisation de pikaday avec timepicker et moment.js

<link rel="stylesheet" href="/pikaday/css/pikaday.css">
<script src="/pikaday/moment.js"></script>
<script src="/pikaday/pikaday.js"></script>
<script>
var timepicker = new Pikaday({
    field: document.getElementById('datetimepicker'),
    firstDay: 1,
    minDate: new Date(2016, 0, 1),
    maxDate: new Date(2100, 12, 31),
    yearRange: [2016,2100],
    showTime: true,
    autoClose: false,
    use24hour: false,
    format: 'MMM Do YYYY, h:mm a'
});
</script>

github.com/owenmead/Pikaday

momentjs.com

70
Matt

J'ai rencontré le même problème avec l'exemple officiel de jQuery (voir mon commentaire ci-dessus). J'ai isolé le problème des thèmes CSS et j'ai commencé à éliminer les fichiers indésirables. Avant de terminer, j'ai découvert qu'un gars avait fait exactement ce dont j'avais besoin: http://keith-wood.name/datepickBasics.html

Il fallait DatePicker.js et un seul fichier CSS. Au total, 2 requêtes HTTP et 40 Ko en plus du fichier jQuery de base, tout le monde devrait avoir mis en cache comme le dit Darin .

6
Glenn

Ce sélecteur de date ici ne nécessite pas de jquery et le fichier minifié est d'environ 11 Ko: https://github.com/kaore/CibulCalendar

4
kaore

J'ai vu Script de calendrier de saisie de date infaillible de Jason Moon en production. Il semble être un peu plus léger.

Cependant, je ne peux pas garantir entièrement l'ensemble des fonctionnalités, etc.

2
LesterDove

L'interface utilisateur cible principalement les appareils tactiles, mais l'utilisation du bureau est également correcte. Quant au poids, minifié et zippé, il atteint un niveau acceptable de 15 Ko.

Calendrier Mobiscroll

1
Levi Kovacs

J'ai trouvé que celui-ci me convenait le mieux: http://keith-wood.name/datepick.html

1
Amit Bhagat