有没有轻量级的 JavaScript 日期选择器？ [关闭]答案

【问题标题】：Is there any lightweight JavaScript date picker? [closed]有没有轻量级的 JavaScript 日期选择器？ [关闭]
【发布时间】：2011-02-01 11:46:48
【问题描述】：

我正在使用 jQuery 日期选择器，但是它太重了，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 日期选择器？

【问题讨论】：

您在传输过程中没有计算 gzip 压缩。例如，jquery 变成 23KB。 +1 对于这个问题，我也想替换 datepicker（它甚至不支持 CSS sprites！）
我无法计算，因为我使用 microsoft cdn 来提供 jquery 并且它没有被压缩。
当然是gzip压缩的，你没看标题吗：Content-Encoding: gzip。如果它不对静态资源进行最基本的优化，我什至无法想象有人称它为 CDN。
除非您需要在页面加载时立即显示日期选择器，否则请在后台加载它。如果用户不立即使用日期选择器控件，他们可能永远不会注意到它需要 0.8 秒还是 8 秒。
我很想看到这个问题的答案。官方的 Jquery 示例日期选择器页面显示了 21 个 http 请求和 200k 的数据，仅用于基本的日期选择器，YSlow 给了它一个 D。jqueryui.com/demos/datepicker/default.html我在这里遗漏了什么吗？

标签： javascript datepicker

【解决方案1】：

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

这是demo。

选择器截图：

_{（来源：github.com）}

将 pikaday 与 timepicker 和 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

【讨论】：

+1;还有一个分叉可以进行时间选择：github.com/owenmead/Pikaday :)
@amaranth 不，IE7+：github.com/dbushell/Pikaday#browser-compatibility
哪里可以找到缩小版的 pikaday？
缩小版可以取自cdnjs
这在没有moment.js的情况下可以工作，但是如何以自定义日期格式显示？

【解决方案2】：

我在官方 jQuery 示例中遇到了同样的问题（请参阅我上面的评论）。我将问题隔离到 CSS 主题并开始去除垃圾。在我完成之前，我发现一个人已经完成了我所需要的：http://keith-wood.name/datepickBasics.html

它需要 DatePicker.js 和一个 CSS 文件。除了每个人都应该缓存的基本 jQuery 文件之外，总共有 2 个 HTTP 请求和 40 kB like Darin says。

【讨论】：

链接不再有效

【解决方案3】：

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

【讨论】：

【解决方案4】：

我在生产中见过 Jason Moon's Fool-Proof Date Input Calendar Script。重量好像轻了一点。

不过，我不能完全保证功能集等。

【讨论】：

【解决方案5】：

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

【讨论】：

我已经在使用 microsoft cdn 来服务 jquery (weblogs.asp.net/scottgu/archive/2009/09/15/…) 框架。我也执行了 YSlow 的大部分规则。但你知道，交互式网站总是会损害网站的性能。我正在尝试尽可能优化它。页面上只有一个字段我必须显示日历。它为 Jquery datepicker 添加了 44 KB。 :(
包含 datepicker 的 jqueryui 已经托管在 google CDN 上。顺便说一句，它不是 44KB，gzip 压缩后是 12KB。
到目前为止，jqueryui 已经增长到 58KB GZipped 和 223KB 未压缩，可能值得了解。

【解决方案6】：

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

Mobiscroll Calendar

【讨论】：

【解决方案7】：

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

【讨论】：