是否有轻量级JavaScript日期选择器？

我使用的是jQuery日期选择器，但它太重了，ui.datepicker.min.js的缩小版本是44KB。datepicker的图像有自己的权重。jQuery框架是59 KB。页面上的总图像约为80KB。页面的HTML总大小约为70KB，CSS文件大小约为72KB。还有更多，所有这些加起来就达到了600KB（0.6MB）

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

我想保持我的网站轻量级。是否有任何轻量级JavaScript日期选择器？

一个选项是使用（CDN），例如，为jQuery等常见脚本文件提供服务。使用CDN，用户很可能已经将脚本文件缓存在浏览器中，并且不需要再次下载。至于其他静态资源，您可以阅读以优化静态资源的加载时间（您可以，gzip压缩和缓存静态资源）。

我在生产中见过。它的重量似乎轻了一点

---

不过，我不能完全保证功能集等的正确性。

我在官方jQuery示例中也遇到了同样的问题（请参见我上面的评论）。我将问题隔离到CSS主题，并开始剥离垃圾。在我完成之前，我发现一个家伙做了我需要的事情：

---

它需要

DatePicker.js

和一个CSS文件。除了每个人都应该缓存的基本jQuery文件之外，总共有2个HTTP请求和40 kB。

这里的日期选择器不需要jQuery，缩小后的文件大约为11kb:

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

---

我发现这一款最适合我：

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

这是一个例子

选择器的屏幕截图：

（来源：）

使用pikaday与timepicker和moment.js的示例

var timepicker=新皮卡日({
字段：document.getElementById（'datetimepicker'），
第一天：1，
minDate：新日期（2016年0月1日），
maxDate：新日期（2100、12、31），
年份范围：[20162100]，
《秀时》：没错，
自动关闭：错误，
use24hour:false，
格式：“MMM Do YYYY，h:mm a”
});

github.com/owenmead/Pikaday

---

momentjs.com

我已经在使用microsoft cdn为jquery（）框架提供服务。我还实施了YSlow的大部分规则。但你们知道，交互式网站总是损害网站的性能。我正在尽可能地优化它。页面上只有一个字段需要显示日历。它为Jquery datepicker增加了44 KB：（包含日期选择器的jqueryui已经托管在google CDN上。顺便说一句，它不是44KB，gzip时是12KB。到目前为止，jqueryui已经增长到58KB gzip，223KB未压缩，可能值得一提。在传输过程中不计算gzip压缩。例如，jquery变为23KB。不过，对于这个问题，我想重复一下蕾丝日期选择器（它甚至不支持CSS精灵！）我无法计算这一点，因为我使用的是microsoft cdn来为jquery提供服务，而它不是gzip。当然它是gzip，您没有看过标题吗：

内容编码：gzip

。如果它没有对静态资源执行最基本的优化，我甚至无法想象有人会将其称为cdn。除非您需要显示日期选择器im当页面加载时，立即将其加载到后台。如果用户不立即使用日期选择器控件，则可能永远不会注意到这需要0.8秒还是8秒。我希望看到这个问题的答案。官方Jquery示例日期选择器页面显示了21个http请求和200k数据，仅针对基本的日期选择器YSlow给了它一个D。我在这里遗漏了什么吗？+1；还有一个叉子，可以进行时间选择：：）@amaranth否，IE7+：我在哪里可以找到pikaday的缩小版？缩小版可以从这个works中获取，而不必使用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>