有没有轻量级的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.

这是一个演示.

选择器的屏幕截图:

使用带有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文件之外,所有人都应该告诉2个HTTP请求和40 kB,就像Darin说的那样.

Answer 3

一种选择是使用内容交付网络(CDN)（例如Google Libraries API）来提供常见脚本文件（例如 jQuery）。使用 CDN，用户可能已经将脚本文件缓存在浏览器中，并且不需要再次下载。至于其他静态资源，您可以阅读YSlow关于优化静态资源加载时间的建议（您可以minify、 gzip 压缩和缓存静态资源）。