Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any lightweight JavaScript date picker? [closed]

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?

like image 444
Zain Shaikh Avatar asked Mar 27 '10 09:03

Zain Shaikh


People also ask

What is Lightpick?

Installation. Usage. Examples. Configuration.

Are there any style options for the html5 date picker?

Currently, there is no cross browser, script-free way of styling a native date picker.

Does bootstrap have a DatePicker?

Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. Versions are incremented according to semver.

How can I get current date in picker?

To set current date in control to which jQuery UI datepicker bind, use setDate() method. Pass date object which needs to be set as an argument to setDate() method. If you want to set it to current date then you can pass 'today' as argument.


1 Answers

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

like image 183
Matt Avatar answered Sep 23 '22 15:09

Matt