Is there any lightweight JavaScript date picker?

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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:

_{(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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

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

Solution 6 - Javascript

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

Solution 7 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Zain Shaikh	View Question on Stackoverflow
Solution 1 - Javascript	Matt	View Answer on Stackoverflow
Solution 2 - Javascript	Glenn	View Answer on Stackoverflow
Solution 3 - Javascript	kaore	View Answer on Stackoverflow
Solution 4 - Javascript	LesterDove	View Answer on Stackoverflow
Solution 5 - Javascript	Darin Dimitrov	View Answer on Stackoverflow
Solution 6 - Javascript	Levi Kovacs	View Answer on Stackoverflow
Solution 7 - Javascript	Amit Bhagat	View Answer on Stackoverflow