有没有轻量级的 JavaScript 日期选择器?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2528706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any lightweight JavaScript date picker?
提问by Zain Shaikh
I am using the jQuery Date picker, but it is too heavy, the minified version of ui.datepicker.min.js is 44 KB. The images of datepicker have their own weight. The jQuery framework is 59 KB. And the total images on the page are around 80 KB. The total HTML of the page is around 70 KB and the CSS file size is around 72 KB. And much more, and all the things add up to 600 KB (0.6 MB).
我正在使用 jQuery 日期选择器,但它太重了,ui.datepicker.min.js 的缩小版本是 44 KB。datepicker 的图像有自己的权重。jQuery 框架为 59 KB。页面上的总图像大约为 80 KB。页面的总 HTML 大约为 70 KB,CSS 文件大小大约为 72 KB。还有更多,所有内容加起来为 600 KB (0.6 MB)。
Do you think the user will wait for 600 KB to be downloaded in the browser? It may take upto 8 - 10 secs. And I don't think that the user will wait for such a long time.
您认为用户会在浏览器中等待 600 KB 下载吗?最多可能需要 8 - 10 秒。而且我不认为用户会等待这么长时间。
I want to keep my website lightweight. Is there any lightweight JavaScript date picker?
我想保持我的网站轻量级。有没有轻量级的 JavaScript 日期选择器?
采纳答案by Darin Dimitrov
One option is to use a content delivery network(CDN) such as the Google Libraries APIto serve common script files like jQuery. Using a CDN chances are that users will already have the script file cached in their browser and they won't need to download it again. As for the other static resources you may read YSlow recommendationsfor optimizing load times of static resources (you could minify, gzip compress and cache static resources).
一种选择是使用内容交付网络(CDN)(例如Google Libraries API)来提供常见的脚本文件(例如 jQuery)。使用 CDN 的可能性是用户已经将脚本文件缓存在他们的浏览器中,他们不需要再次下载它。至于其他静态资源,您可以阅读YSlow优化静态资源加载时间的建议(您可以缩小、gzip 压缩和缓存静态资源)。
回答by Matt
I just came across Pikaday, which looks good and is quite lightweight (around 11kb of JS, minified). Doesn't require jQuery either.
我刚刚遇到了Pikaday,它看起来不错,而且非常轻巧(大约 11kb 的 JS,缩小了)。也不需要jQuery。
Here's a demo.
这是一个演示。
A screenshot of the picker:
选择器的屏幕截图:

(source: github.com)

(来源:github.com)
Example using pikaday with timepicker and moment.js
将 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
github.com/owenmead/Pikaday
momentjs.com
momentjs.com
回答by Glenn
I faced the same issue with the official jQuery example (see my comment above). I isolated the problem to CSS themes and started stripping away junk. Before I finished I found a guy had done exactly what I needed: http://keith-wood.name/datepickBasics.html
我在官方 jQuery 示例中遇到了同样的问题(见我上面的评论)。我将问题与 CSS 主题隔离开来,并开始剥离垃圾。在我完成之前,我发现一个人已经完成了我所需要的:http: //keith-wood.name/datepickBasics.html
It required DatePicker.jsand a single CSS file. All told 2 HTTP requests and 40 kB in addition to the basic jQuery file everybody should have cached like Darin says.
它需要DatePicker.js一个 CSS 文件。总共有 2 个 HTTP 请求和 40 kB,以及每个人都应该像 Darin 所说的那样缓存的基本 jQuery 文件。
回答by kaore
This date picker here does not require jquery and the minified file is around 11kb: https://github.com/kaore/CibulCalendar
这里的日期选择器不需要 jquery,缩小后的文件大约 11kb:https: //github.com/kaore/CibulCalendar
回答by LesterDove
I've seen Jason Moon's Fool-Proof Date Input Calendar Scriptin production. It seems to be a bit lighter in weight.
我已经在生产中看到Jason Moon 的傻瓜式日期输入日历脚本。它的重量似乎轻了一些。
I can't fully vouch for the feature set, etc., though.
不过,我不能完全保证功能集等。
回答by Levi Kovacs
The UI is mainly targeting touch devices, but desktop usage is OK as well. As for weight, minified and gZipped it comes to an acceptable 15kb.
UI 主要针对触摸设备,但桌面使用也可以。至于重量,缩小和 gZipped 它达到可接受的 15kb。
回答by Amit Bhagat
I found this one works best for me: http://keith-wood.name/datepick.html
我发现这个最适合我:http: //keith-wood.name/datepick.html

