有没有轻量级的JavaScript日期选择器？

Question

我正在使用jQuery Date选择器，但它太重了，ui.datepicker.min.js的缩小版本是44 KB。 datepicker的图像有自己的重量。 jQuery框架是59 KB。页面上的总图像大约为80 KB。页面的总HTML大约为70 KB，CSS文件大小约为72 KB。还有更多，所有东西总计600 KB（0.6 MB）。

您认为用户是否会等待600 KB在浏览器中下载？可能需要8到10秒。而且我认为用户不会等待这么长时间。

我想让我的网站保持轻量级。有没有轻量级的JavaScript日期选择器？

Answer 1

我刚遇到Pikaday，它看起来不错，而且非常轻巧（大约11kb的JS，缩小了）。也不需要jQuery。

这是demo。

选择器的屏幕截图：

使用带有timepicker和moment.js的pikaday的示例

<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

Answer 2

我在官方jQuery示例中面临同样的问题（请参阅上面的评论）。我将问题分离到CSS主题并开始剥离垃圾。在我结束之前，我发现一个人完全按照我的要求行事：http://keith-wood.name/datepickBasics.html

它需要DatePicker.js和一个CSS文件。除了基本的jQuery文件之外，所有人都应该缓存like Darin says。

Answer 3

这里的日期选择器不需要jquery，而缩小的文件大约是11kb：https://github.com/kaore/CibulCalendar

Answer 4

一种选择是使用content delivery network（CDN）（例如Google Libraries API）来提供常见的脚本文件，例如jQuery。使用CDN的可能性是用户已经在其浏览器中缓存了脚本文件，他们不需要再次下载。至于其他静态资源，您可以阅读YSlow recommendations以优化静态资源的加载时间（您可以minify，gzip压缩和缓存静态资源）。

Answer 5

我在制作中看过 Jason Moon's Fool-Proof Date Input Calendar Script 。它的重量似乎有点轻。

但我无法完全保证功能集等。

Answer 6

UI主要针对触控设备，但桌面使用也可以。 至于重量，缩小和gzipped它达到可接受的15kb。

Mobiscroll Calendar

Answer 7

我发现这个最适合我：http://keith-wood.name/datepick.html