Is there any lightweight JavaScript date picker? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

Closed 11 years ago.

Improve this question

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).

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.

I want to keep my website lightweight. Is there any lightweight JavaScript date picker?

• Alex Bagnolini: You are not counting gzip compression during transfer. jquery becomes 23KB for example. +1 for the question though, I would like to replace datepicker too (it doesn't even support CSS sprites!)
• Zain Shaikh: I can not count that because I am using microsoft cdn to serve jquery and it is not gzipped.
• Darin Dimitrov: Of course it is gzipped, haven't you looked at the headers: Content-Encoding: gzip. I cannot even imagine someone calling it a CDN if it doesn't perform the most basic optimization for static resources.
• Ken: Unless you need to show the date picker immediately when the page loads, load it in the background. The user might never notice if it takes 0.8 seconds or 8 seconds, if they don't use the date-picker control right away.
• Glenn: I would love to see an answer to this question. The official Jquery example date picker page shows me 21 http requests and 200k of data just for the bare bones date picker and YSlow gives it an D. jqueryui.com/demos/datepicker/default.html Am I missing something here?

Answer 1

I just came across Pikaday, which looks good and is quite lightweight (around 11kb of JS, minified). Doesn't require jQuery either.

Here's a demo.

A screenshot of the picker:

Pikaday Screenshot
_{(source: github.com)}

Example using pikaday with timepicker and 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

• finnigan.dev: +1; There's also a fork which does time-picking: github.com/owenmead/Pikaday :)
• Matt: @amaranth No, IE7+: github.com/dbushell/Pikaday#browser-compatibility
• Rehban Khatri: Where can I find minified version of pikaday?
• error1009: Minified version could be taken from cdnjs
• N Khan: this works without moment.js, but how to display in custom date format?

Answer 2

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

It required DatePicker.js and 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.

• Mike: link is no longer works

Answer 3

This date picker here does not require jquery and the minified file is around 11kb: https://github.com/kaore/CibulCalendar

Answer 4

I've seen Jason Moon's Fool-Proof Date Input Calendar Script in production. It seems to be a bit lighter in weight.

I can't fully vouch for the feature set, etc., though.

Answer 5

One option is to use a content delivery network (CDN) such as the Google Libraries API to 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 recommendations for optimizing load times of static resources (you could minify, gzip compress and cache static resources).

• Zain Shaikh: I am already using microsoft cdn to serve jquery (weblogs.asp.net/scottgu/archive/2009/09/15/…) framework. and i have also implemented most of the rules of YSlow. but you know, Interactive website always hurts performance of website. I am trying to optimize it as much as possible. there is only one field on the page where i have to show calender. and it adds 44 KB for Jquery datepicker. :(
• Darin Dimitrov: jqueryui containing datepicker is already hosted on google CDN. And by the way it is not 44KB, it is 12KB when gzipped.
• Giuseppe Romagnuolo: As of now the jqueryui has grown to 58KB GZipped and 223KB uncompressed, may be worth to know.

Answer 6

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.

Mobiscroll Calendar

Answer 7

I found this one works best for me: http://keith-wood.name/datepick.html