Stefan Petre

Colorpicker and Datepicker for Twitter Bootstrap

Colorpicker for Twitter Bootstrap


Add color picker to field or to any other element.

  • can be used as a component
  • alpha picker
  • multiple formats: hex, rgb, rgba, hsl, hsla

Download & docs

Datepicker for Twitter Bootstrap


Add datepicker picker to field or to any other element.

  • can be used as a component
  • formats: dd, d, mm, m, yyyy, yy
  • separators: -, /, .

Download & docs

Comentarii (242)


20 feb 2012, 17:15

I begin to use your datepicker. Thanks for your good and hard work!!!

I want to share a tiny change I did in order to use the property weekStart in the same way as date-format (via html property)

I'd changed the line 51 from:

this.weekStart = options.weekStart||0;


this.weekStart = options.weekStart||'date-weekstart')||0;

I hope you like this modification and include it in the main distribution

I would like to put this little patch in the correct place but I can't found it, sorry!


20 feb 2012, 17:23

Hey Garito,

I will update the script today. Thanks.


20 feb 2012, 18:07

Hi, nice work!
I have an issue with the colorpicker in IE(9): the dot 'sticks' to the cursor, so I cant select the color I want. Is this a known issue? And if so, will there be a fix?


20 feb 2012, 19:13

I fixed that. Try it again.


20 feb 2012, 19:18

Stefan, nice work!

I am trying to use the colorpicker with the twitter bootstrap, but I'm having some trouble getting it to work. The problem is I am using the Backbone.JS library, and my application replaces 'body', but your plugin loads before my application runs, so it removes the color picker when the page loads. Is there any way to make your plugin only load when I call the function?



20 feb 2012, 19:36

The script appends the picker only when you call .colorpicker(). Nothing is generated on page load or before. Make sure you call the plugin only when you need it. Maybe you can show me some code so I take a look.


20 feb 2012, 19:48

Yes, I think I found my problem, the plugin was not being called properly. My setup involves AMD loading, which can cause async problems with plugins that aren't setup to be loaded asynchronously.

Your plugin does work now, as expected. I'm going to keep playing with it to see if I can get it to work better with my async setup.

Thanks for the code!


20 feb 2012, 20:16

Stefan -

One more comment. I noticed that the color picker creates a new template for each instance. In my application I have many color pickers to choose how the application's theme looks.

You should consider making the colorpicker work with only a single template inserted into the Body tag. All the color pickers could use the same DOM elements to display the picker.

Other than that, great work!!


22 feb 2012, 18:18

Thanks for these plugins, but why aren't they on GitHub ?

We (developpers) could fork and improve them ;)


22 feb 2012, 19:15

Just wanted to thank you for a nice color picker widget. Not only it looks great, but also has all the handles one might need to build it into a web page.


26 feb 2012, 00:52

Hi, nice work!
But it does not work in IE8, you could fix it?


26 feb 2012, 13:04

Fix in IE6,7,8


this.preview.backgroundColor =;


try {
this.preview.backgroundColor =;
} catch(e) {
this.preview.backgroundColor = this.color.toHex();


27 feb 2012, 03:49

salut Stefan

as dori sa folosesc colorPicker'u intr-un wordpress theme admin panel.Theme'ul va fi unul comercial. La prima vedere, scriptul este free, dar trebuie totusi sa intreb cum procedam cu liceenta ?
As prefera sa-mi raspunzi intr-un email. Regards


27 feb 2012, 07:50

Datepicker is great thanks, just what I've been looking for :)
Just 2 things:
1) the picker doesn't close when I select a date, is this intentional? How can I get it to close as soon as I click a day?
2) Would it be possible to add support for opening on a particular view - 'year', 'month' or 'day' view. For things like date of birth is more usable to show the year first as people may not realise that clicking on the month name allows then to select the year.


27 feb 2012, 21:13

Licenta este aceeasi ca cea distribuita cu Bootstrap. Avand invede ca scripturile depind de Bootstrap, atunci cred ca trebuiesc folosite impreuna.


27 feb 2012, 21:17

1. I think you can mimic this behavior with 'changeDate' event. In fact, there is an example on that page, the one with start and end date.

2. I was thinking about something like that. I will update the script


28 feb 2012, 00:33

defapt ma refeream la celalalt colorpicker ( ), care doar ce am observat ca nu e unul si acelasi cu prezenta pagina, si care depinde de jQuery.

presupun ca acel script invoca liceenta jQuery, si anume free.
oricum, o sa creez o pagina cu "Credits", unde o sa specific sursa script-ului si url-ul

Mersi mult si mult succes

PS: colorpicker.min.js ar fi un plus.


28 feb 2012, 13:59

Hi Stefan,

nice datepicker, it beats jquery ui's by a wide margin and looks really great in a bootstrap project :-)

Have you considered the possibility of adding globalization support? I have modified the date picker so that instead of using your custom date parsing and formatting, it relies on jquery's globalize functions ( Seems to work out great.

Would you be interested in a patch?


29 feb 2012, 00:25


Great datepicker. It would be nice if this was on github or bitbucket.

Also it would be great if it picked a bit more sane default value if the input field is empty. It picks january 1 1970 at the moment.


1 mar 2012, 03:43

This is my all times favorite datepicker! I'm so happy you ported it for bootstrap as a few days ago I just began to use it! :D this is THE datepicker

A little suggestion, instead of using icon-th you could use icon-calendar

Matt Wilson

2 mar 2012, 22:38


Wonderful work! I was wondering what you thought about putting the source on or something similar? I'd love to be able to contribute code :).

Great work!


3 mar 2012, 07:02

Awesome work mate, thanks :)

One thing I'd really like to be able to do is specify a default or earliest date, so that if the field is cleared the datepicker doesn't go back to 1970. Anyone got any idea how to do this?


3 mar 2012, 19:28

Great project! I now using the javascript version ;)


5 mar 2012, 11:52

Stefan, great work!

I would also like to contribute to the code. I've modified the script to add transparency, and maybe others need this too.

P.S. I've looked over the source code of all your scripts and they are very well structured. Can you please share the backbone you use for creating widgets (or maybe a blog post: "How to create a widget").


6 mar 2012, 00:46

Excellent datepicker. Thanks.
Two comments.
1) I second the wish for being able to set a default value. For now I've just changed the parseDate function like this:
//date = new Date(1970, 1, 1, 0, 0, 0),
date = new Date(),
2) I have a date field that is not required, so I don't want the datepicker to set a value if the user is just tabbing past the input field.


6 mar 2012, 11:02

By the way, to solve my second problem I just commented out this line in hide : function():
// this.setValue();

Seiji Ogawa

7 mar 2012, 05:33

Hi Stefan,

That's so cool!!!

I hope this Datepicker will be contain timepicker later.



7 mar 2012, 16:25


It turns out that your date-picker dows not show the special date
29th of february 2012 right.

In the first of your date demo's, if I enter 2-29-2012, it show 3-1-2012 in the calendar.

Hope you can fix that!

Cheers, Joris


8 mar 2012, 10:53


Nice to see that you are developing on the calendar widget. I have been using the old widget for a while and like it very much. One of the nice features it had was the ability to have three side-by-side calendars and a range selction across them. Is this possible with your new widget?


9 mar 2012, 07:22

Stefan, props for the datepicker, it's slick and works great.

Like many others, I was surprised you haven't put it on github or bitbucket yet. I've had to make a few changes to it for a project, and have posted the changes to a bitbucket repo at . I've also noticed a few small bugs with it, so I may add fixes for those later.

If you join github or bitbucket (or both), ping me and we can figure out how to transfer ownership of the repo to you.


15 mar 2012, 04:24

Salut Stefan,

Felicitari pentru plugin-ul jquery datepicker! L-am incercat si eu iar pana acum mi s-a parut usor de folosit si configurat. I-am dat si o noua forma folosind doua input-uri gen: "check in date" / "check out". Eu folosesc caledar dublu cu doua luni afisate. Totusi pana acum nu am inteles cum pot face sa-mi apara in stanga luna curenta iar in dreapta luna urmatoare. In prezent imi apare mai intai luna trecuta (in stanga) si luna prezenta (in dreapta). Am incercat sa modific codul plugin-ului dar skill-urile mele de javascript nu ma ajuta prea mult. Te-as ruga daca poti sa imi dai macar un indiciu unde as putea sa modific pe cod ca sa fac afisarea dorita a lunilor in modul double calendar, range picker.



23 mar 2012, 10:57

Salut Ștefan

Folosesc versiunea aceasta de datepicker:

Cum pot implementa ora, minutele și secundele într-un format de genul hh:mm:ss ?

Îți mulțumesc anticipat pentru răspuns!


23 mar 2012, 16:01

Hail! Good stuff!
Why don't you host your sources on the github and create NuGet package?


2 apr 2012, 17:13


Very good stuff here!

I wanted to use your code into a site, but it didn't work with IE7 and IE8... So I've made several changes including the IE7/8 fix and some other tricks given in this thread (like the default value is the current date, or no default date when you use the tab). Also your code doesn't look good with Bootstrap v2.0.2, so I fixed it too.

As you don't have a github account I have hosted my changes on mine:

Of course there are multiple links to your site with credits to you.


3 apr 2012, 19:09

Since Stefan seems to be ignoring his growing fanbase, users and potential contributors can check out my fork of his plugin at (copy-and-paste the url,'s autolinker doesn't like dashes in urls).

We've fixed most of the bugs pointed out here in the comments (IE8 compatibility, defaulting to today instead of 1970, and others), and added a few extra features (close-on-select, M and MM formats [for short and long month names], and basic localization).

And Stefan, my original offer to transfer ownership when you join github still stands ;)


4 apr 2012, 21:14

Thank you Stefan! Good job!


7 apr 2012, 14:42


Is there any way to make the colour picker drop up instead of dropping down?

Thanks for all your work on this great component.


Kane Rogers

17 apr 2012, 02:31

Good on you, Andrew. Let's do this!


17 apr 2012, 17:03

Anyway to open this up on the month picking screen? For Credit Card Expiry Dates, for instance?

Anderson Fortaleza

22 apr 2012, 15:47

A big thank you :)


24 apr 2012, 15:56

Hi, nice work!

But in LESS file is a small mistake? Line 71 and 88: @primaryButtonBackground must be @btnPrimaryBackground :-)

Thanks and have a nice day!


from china

26 apr 2012, 15:51

How to modify the default date for the specified date rather than the1970?Set the data-date does not play role

from china

26 apr 2012, 15:55

Colorpicker In Firefox will be reported to Syntax error how to solve?


2 mai 2012, 02:53

Without changing the .JS file, is it possible to pass an array containing Day and Month labels in another language?

For example, if I have an English user, he see:
Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday.

But if I had a Japanese user, he would see:
月曜日, 火曜日, 水曜日, 木曜日, 金曜日, 土曜日, 日曜日.

I can have a different .JS file but it actually makes more sense to pass this type of data via a parameter call to the $('#element').datepicker(element, options) function.

I am new to jQuery and I hope someone can help me.


Ralf Fuhrmann

4 mai 2012, 22:38

Hi !

It looks like that the contact-page doesn't work.

I try do use your spacegallery plugin, integrated into a current wordpress release.
But i can't make it run.

Do you have any suggestions ?



8 mai 2012, 22:33

Excellent plugin for sure.

Is there a way to force the picker (component) to update if the user types the hex into the input field?

Sarah Vessels

9 mai 2012, 22:17

Thanks for the date picker plugin! It works great except for a small bug in IE8. I was unable to change the starting date: clicking any other date did not change the date value in the field. Debugging the script, it looks like your mousedown() function gets called in IE8, but not click(). I altered mousedown as follows:

mousedown: function(e) {
if ($.browser.msie && $.browser.version < 9) {;

David O'Sullivan

10 mai 2012, 17:13

Hi there,

This really is the slickest colorpicker out there- virtually none support rgba but this does which is great!

One issue I am having though is setting the color programatically. What I want to do is have a reset button with a data-color attribute that onclick resets the color to its data-color value AND fires the colorChange event to reset anything colors that have been changed from the colorChange call back... I can make it change the value of the input field but this does not make the picker change its value or fire the colorChange event...

have been trying for hours but just can't seem to crack it. Hope you can help...


12 mai 2012, 14:56

For those of you, who are wondering how to hide the DatePicker after a date is selected, the code below may be of help:

$('.date').datepicker().on('changeDate', hideDatepickers);
function hideDatepickers(){

This is based on the default stylesheet, you may want to modify the jQuery selectors if you customized it.

You believe you can use similar code for the ColorPicker as well, you just have to adapt the on(event, function) function.


17 mai 2012, 16:08


i couldn't find the info..

if you use the component colorpicker.
is it possible the the use can enter the value of rgb or hex and the important one..
that the square will change after hitting enter of leaving the box?



22 mai 2012, 22:09

Thanks for the plugin, I noticed a bug when resetting colors: the change isn't propagated to the callback. I solved it for my usage with the line below, but it could be done more safely, using livePreview flag.

restoreOriginal = function () {
var cal = $(this).parent();
var col ='colorpicker').origColor;'colorpicker').color = col;
fillRGBFields(col, cal.get(0));
fillHexFields(col, cal.get(0));
fillHSBFields(col, cal.get(0));
setSelector(col, cal.get(0));
setHue(col, cal.get(0));
setNewColor(col, cal.get(0));'colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]); //

Fabio Terenzi

23 mai 2012, 15:07

Thank you for this nice component!
After looking for a decent monthpicker, I decided to make some simple changes to your component (added 'pickerType' property) that i would like to post, if you like.
Please let me know.

Andrey Zhukov

25 mai 2012, 08:21


Looks great. But how i can set an empty value, when i erase in input, it's updated to #ff0000


1 iun 2012, 14:40

Hey Stefan,

I really like your date picker, it's a great addition to the twitter bootstrap. I'm going to be using your colour picker soon too.

Anyway, I was wondering if you had any plans to include a time picker in your date picker script? It would make it a lot more useful for when saving dates to a SQL database for example...

If you could let me know if you're planning this update - that would be awesome!




2 iun 2012, 18:49

Great Work !
Thanks a lot !


3 iun 2012, 09:45

First of all thanks for your work.

I need to Hide the datepicker box, after selecting a date. I found a solution in one comment as well. but after checking the script it can be done in more simple way.

Just add the following line after line 202:
203: this.hide();

I think this done the magic.

anyways, great work.


3 iun 2012, 10:52

Very great components!
But not valid for jslint.
Also I'm added less files and javascripts to Twitter Bootstrap Makefile.
Tried to build bootstrap 2.0.4 with these nice colorpicker and datepicker but I got errors:

mechanism@MechanisM:~/TEST/twitter-bootstrap$ make

Building Bootstrap...

js/bootstrap-colorpicker.js: line 101, col 38, Missing radix parameter.
js/bootstrap-colorpicker.js: line 101, col 64, Missing radix parameter.
js/bootstrap-colorpicker.js: line 101, col 88, Missing radix parameter.
js/bootstrap-colorpicker.js: line 259, col 65, ['saturation'] is better written in dot notation.
js/bootstrap-colorpicker.js: line 262, col 65, ['hue'] is better written in dot notation.
js/bootstrap-colorpicker.js: line 265, col 65, ['alpha'] is better written in dot notation.
js/bootstrap-colorpicker.js: line 408, col 20, Use '===' to compare with '0'.
js/bootstrap-colorpicker.js: line 409, col 4, Mixed spaces and tabs.
js/bootstrap-colorpicker.js: line 410, col 4, Mixed spaces and tabs.
js/bootstrap-colorpicker.js: line 411, col 6, Mixed spaces and tabs.
js/bootstrap-colorpicker.js: line 414, col 19, Use '===' to compare with '0'.
js/bootstrap-colorpicker.js: line 443, col 23, 'q' is already defined.
js/bootstrap-colorpicker.js: line 445, col 29, 'q' used out of scope.
js/bootstrap-colorpicker.js: line 451, col 53, 'q' used out of scope.
js/bootstrap-colorpicker.js: line 452, col 53, 'q' used out of scope.
js/bootstrap-colorpicker.js: line 453, col 53, 'q' used out of scope.
js/bootstrap-datepicker.js: line 52, col 39, Use '===' to compare with '0'.
js/bootstrap-datepicker.js: line 241, col 39, 'month' is already defined.
js/bootstrap-datepicker.js: line 247, col 38, 'year' is already defined.
js/bootstrap-datepicker.js: line 322, col 47, Unescaped '-'.
js/bootstrap-datepicker.js: line 324, col 54, Use '===' to compare with '0'.
js/bootstrap-datepicker.js: line 331, col 22, 'date' is already defined.
js/bootstrap-datepicker.js: line 365, col 22, 'date' is already defined.

23 errors
make: *** [build] Error 1


3 iun 2012, 10:54

Would be nice to have these components on github, so ppl can contribute and fix errors.


9 iun 2012, 14:21

Hello. Thanks for your work!

Could you append a date picker to parent element of an input. So in case an input could be deleted with datepicker.

Line 28: .appendTo('body') change to .appendTo(this.element.parent())

Silvino González

10 iun 2012, 19:04

Thanks for the amazing work my friend.

Cormac Lehane

13 iun 2012, 17:09

Hey, do you experience any problems with your datepicker in IE? It works great in Firefox and Chrome for me but it keeps choosing the automatic date for me in IE. Im using IE8 by the way.


Cormac Lehane

13 iun 2012, 17:29

Actually, SarahVessels up there has the code right to fix it for me. Great datepicker.



20 iun 2012, 13:31

HI All,
I need a function after month change.means next or previous month will load first then the function will call.
so can you please tell me where should I declare the function.
N.B:"onChangeMonthYear" is not is calling before next of previous month calender load.

David Evenson

26 iun 2012, 01:46

Hi Stefan,

Thanks for the great work. This saved my bacon on a new bootstrap project. Just a heads up, I did run across an issue when the datepicker hides itself after you click on something else - in addition to hiding itself it was hiding my modal conent as well.

After stepping through the issue in Firebug I ended up commenting out lines 89-92 in bootstrap-datepicker.js which solved the problem. Aside from resolving my issue, I don't see any other effects, but I didn't have time to investigate fully.

Thanks again.

Ben Lamb

30 iun 2012, 15:42

Hi Stefan,

Found a minor bug. With the date format set to 'dd/mm/yy' and trying to display the date 31/12/12 it doesn't work properly. Reason being is the date is initialised to 1st Feb 1970, then the code attempts to set the day to 31 which is invalid.

The fix is simple, change line 54 to:

date = new Date(1970, 0, 1, 0, 0, 0),

which initialised the date to 1st Jan 1970 which then accepts the day to be 31.

Thanks for making this.



5 iul 2012, 22:25

Multumesc mult! Foarte folositor. color picker-ul tau este exact de ce am nevoie. daca cumva vii prin Chisinau o bere din partea mea. :)


10 iul 2012, 00:52

I am using bootstrap lightbox for which I have some input items inside of. When I click on the color picker to choose a color and then have to click somewhere else to dismiss it my hide listener on the lightbox is triggered. Do you know why dismissing the color would do that? I have not clicked outside of my lightbox. It is like there is a layer overlayed on top of the lightbox.


10 iul 2012, 06:32

Is it possible improve it to Date Time Picker?

Vladimir Pitin

11 iul 2012, 11:47

What can I do, chat week starts from monday? I'm from Russia :)


11 iul 2012, 14:18

Hi All,
I can change the range of colors?.
I only need light colors.

Sorin Haidau

13 iul 2012, 00:07

off topic

ce s-a intamplat cu eyeblog-ul? primul meu blog


13 iul 2012, 03:35

Very nice! any chance creating a time picker?


13 iul 2012, 11:51

Please get this up on GitHub so others can contribute.


19 iul 2012, 14:10

Great work on this stuff! Both are very cool. Iam having one problem, in that I can't get the rgba to work in changing an element, say, background color. The colorpicker shows u and works fine, but it doesn't effect the element is supposed to change. Do I need to use something like

itemStyle.backgroundColor = ev.color.toRGB();

instead of

itemStyle.backgroundColor = ev.color.toHex();

? Because that breaks the whole thing.


20 iul 2012, 13:59

Hey, I have been using your color picker, for changing the selected texts color from a contenteditable Div, which uses a onblur event, So when I try to Select a color from your color Picker, the Blur event is triggered,.. Can U help me how to get Thru this..???

Thank You..


23 iul 2012, 16:34

Hi, i made some changes to the datepicker for taken dates, dates that can not be selected because the date is already taken (for bookings etc) if you're interested just mail me and i can give you the code so you can work it out for your next version release.


24 iul 2012, 17:33

hi! i just want to ask how to execute a function right after the user selects the date on the date picker? thank you so much


26 iul 2012, 04:39

I found a bug in Datepicker for bootstrap... :)
Datepicker div crash when you use a datepicker over a field over dialog.

Aaron Snoswell

26 iul 2012, 14:22

Hi there!

I like your script(s)! I'm using your colorpicker for a bootstrap based web app. Unfortunately, my web app also uses angular-js, and your script doesn't easily integrate with angular js.

I've made some changes to get it to work - I've stored these in a new github repo:




31 iul 2012, 10:20

lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css
RuntimeError: No matching definition was found for `.border-radius()` in /data/project/yii-dev/pdemo/protected/extensions/bootstrap/lib/bootstrap/less/colorpicker.less:12:2
11 border: 1px solid #000;
12 .border-radius();
13 position: absolute;

make: *** [bootstrap] Error 2
i get this error while compiling with botstrap,
lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css
RuntimeError: No matching definition was found for `.border-radius()` in /data/project/yii-dev/pdemo/protected/extensions/bootstrap/lib/bootstrap/less/colorpicker.less:12:2
11 border: 1px solid #000;
12 .border-radius();
13 position: absolute;

make: *** [bootstrap] Error 2
how to solve these??


1 aug 2012, 22:04

Wow, very nice work! Very simple, and elegant. Thank you :)
[Lucru foarte frumos! Foarte simplu, si elegant. Multumesc!]


2 aug 2012, 14:11

Excellent work, thanks for this!

john sujith

6 aug 2012, 13:38

Well really Nice work...I have request ,is this possible ,when "from" date is selected then "to" date is start from the same date like that...


8 aug 2012, 11:17

nice plugin for bootstrap. Unfortunately i have found a bug whenever i try to put the date component at navbar. the calendar wont stick to the navbar as the page scrolling.


11 aug 2012, 22:20

Oh, yeah, man! I was exactly looking for a replacement to your old non-bootstrap version, because I have to also take care of alpha in my new project. And I'm exactly using bootstrap in it aswell. So finding this is just tremendously perfect! ≥^.^≤


12 aug 2012, 09:42

Just awesome!
Sweet delicious work and I have some question.
What is its license for?
Is this same as the bootstrap license?


12 aug 2012, 15:31

awesome! it's also usefull for seo.


16 aug 2012, 00:12

is for mobile too?


16 aug 2012, 05:51

i select day Aug 31, then click ‘next month’ button, the month add to Oct not Sep. i think this is a little bug.


16 aug 2012, 18:36

Great work! I'd love the ability to be able to access setValue so that I can change the date on the picker from javascript. Does anyone know how to add this?

Tapan Kumar Thapa

21 aug 2012, 11:33


I am sorry but i am unable to get your calendar working on my web page.

Kindly see my code and let me know if i am doing any mistake.


Start date

End date


format: 'mm-dd-yyyy'
format: 'mm-dd-yyyy'

Thanks in advance.

Tapan Thapa


21 aug 2012, 20:52


I just updated to the newest version of Bootstrap and I think it broke your datepicker plugin. Dates are shown at the bottom of the page and I can't get it to hover over the input boxes.


23 aug 2012, 10:30


Prefer this instedd of jquery ui.

But whould love to have this on github.


28 aug 2012, 04:32

Hi, I just added an option to allow write the color (hex,rgb,...)

here is the diff...

--- colorpicker/css/colorpicker.css
+++ colorpicker/css/colorpicker.css
@@ -124,4 +124,18 @@ display: block;
cursor: pointer;
width: 16px;
height: 16px;
No newline at end of file
+.colorpicker-name {
+float: left;
+clear: both;
+.colorpicker-name input[type="text"]{
+width: 114px;
+padding: 2px;
+border-radius: 0px;
+-moz-border-radius: 0px;
+-webkit-border-radius: 0px;
+margin-bottom: 0px;
No newline at end of file
--- colorpicker/js/bootstrap-colorpicker.js
+++ colorpicker/js/bootstrap-colorpicker.js
@@ -17,6 +17,10 @@
* limitations under the License.
* ========================================================= */

+ * Warning: do not replace this plugin without comparing with the original one. Plugin changed by Diogo Guerra.
+ */
!function( $ ) {

// Color object
@@ -141,6 +145,8 @@
.on('mousedown', $.proxy(this.mousedown, this));

+ = this.picker.find('.colorpicker-name input');
if (this.isInput) {
'focus': $.proxy(, this),
@@ -163,8 +169,12 @@
if (this.component){
this.preview = this.element.find('i')[0].style;
+ 'keyup': $.proxy(this.updateName, this)
+ });
} else {
- this.preview = this.picker.find('div:last')[0].style;
+ this.picker.find('.colorpicker-name').hide();
+ this.preview = this.picker.find('div.colorpicker-color div')[0].style;

this.base = this.picker.find('div:first')[0].style;
@@ -201,8 +211,23 @@
.eq(1).css('top', 100 * (1 - this.color.value.h)).end()
.eq(2).css('top', 100 * (1 - this.color.value.a));
+ this.previewName();

+ updateName: function(e){
+ if (e.keyCode === 13) { // enter key
+ this.hide();
+ } else {
+ this.color = new Color('value'));
+ this.picker.find('i')
+ .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
+ .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
+ .eq(2).css('top', 100 * (1 - this.color.value.a));
+ this.previewColor();
+ }
+ },
hide: function(){
@@ -242,19 +267,29 @@

+ //set color name
+ previewName: function() {
+ },
pointer: null,

slider: null,

mousedown: function(e){
- e.preventDefault();

var target = $(;

//detect the slider and set the limits and callbacks
var zone = target.closest('div');
if (!'.colorpicker')) {
+ // only prevent the focus if is not the input box
+ if ('.colorpicker-name')) {
+ return true;
+ } else {
+ e.preventDefault();
+ }
if ('.colorpicker-saturation')) {
this.slider = $.extend({}, CPGlobal.sliders['saturation']);
@@ -308,6 +343,7 @@
this.color[this.slider.callTop].call(this.color, top/100);
+ this.previewName();
type: 'changeColor',
color: this.color
@@ -514,6 +550,7 @@
+ ''+


30 aug 2012, 17:49

when using the datepicker with the icon- when you select a date it doesnt close until you click on the web page..

Bryan Livingston

30 aug 2012, 21:23

I use your jquery color picker from here:

I think there might be a bug in the jquery color picker now. The color doesn't change on the first click. The bug makes the color picker feel un-responsive.

Here is the code that I used to fix it.

downSelector = function (ev) {
var current = {
cal: $(this).parent(),
pos: $(this).offset()
current.preview ='colorpicker').livePreview;
$(document).bind('mouseup', current, upSelector);
$(document).bind('mousemove', current, moveSelector);

// do this to make the first click actually change the color. Might have been needed due to jQuery behavior change. BKL 8-30-2012 = current;

Please update the jquery picker if you have a minute.



4 sep 2012, 21:49

This is not really cleaned up, but this is better from a usability standpoint:


// 1st colorpicker
format: 'hex'
}).on('changeColor', function(ev){
$('.cp1-swatch').css('background', ev.color.toHex());
$('.cp1-swatch').css('background', $('#cp1').val());



6 sep 2012, 08:34

They look fantastic but people really need to stop making "jquery calendar" "bootstrap calendar" etc.. this is really not the right way to go at all

Elshad Agayev

19 sep 2012, 12:52

Hi from Azerbaijan. Thanks for datepicker. It's very usefull. A have made a little change on the script. The values of variables "fillIt" and "changed" was changed to the true at the line 575, 576. But they have to be before the breake command. For this reason when we check on the checkbox 'close on selection' at the demo, the datepicker closes when we select year or month. But it should be close when we select only day. If we will remove the lines 575 and 576 to the above of break commant it will work normal. Thanks and sorry for my bad english :) I can speak fluently in azeri, russian and turkish only

Emir Plicanic

23 sep 2012, 02:39

Here is the positioning fix for jQuery 1.8+:

Around line 148 under "place:" change top to be:
top: parseInt( + parseInt(this.height[0].clientHeight),
left: offset.left

Dipesh Batheja

25 sep 2012, 16:05

This is very useful! This framework is getting so popular that people have started requesting PSD to HTML conversions from us specifically on Twitter bootstrap. So we have started offering PSD to Twitter Bootstrap conversions. Checkout ... Addons section.

Samuel R

27 sep 2012, 11:52

Having stumbled across these comments only by chance, I want to repeat a message further above: there's a fork on Github by Andrew ( which adds/fixes: IE7/8 compatibility, Close-on-Select, I18n.

Pedro Magalhães

1 oct 2012, 14:58

Hi guys!

I've come across your website, and i've used your datepicker in a personal project.
I've changed the time zone of my operative system to (UTC-04:00) Cuiabá and the October always has twice the day 20.

Something like: 15, 16, 17, 18, 19, 20, 20, 21....

I'm seeing this in your plugins page here also:

Do you know how to fix this? I would pay for it.
You can contact me on pvt from the email given on the contact form.

Thank you!

Pedro Magalhães

1 oct 2012, 16:52

I've fixed the issue! ;)


1 oct 2012, 21:40

Is there a Kickstrap app available for this?


4 oct 2012, 11:16

Nice work on the Datepicker. Looks really good.

It would be nice if it supported nullable dates too, so if the property bound to is a nullable date then the box is prepended with a checkbox. If unchecked then the control calendar disables and date goes blank.


4 oct 2012, 23:20

how can i localize to datepicker?

Simon Davies

8 oct 2012, 15:49

Great work on the datepicker.

My issue is that I want to clear the input field if the date selcted is below a given date. At the moment when a user selects a date value, if its lower than a set value a message appears and the date selected is still entered into the input box.

What i need to do is ensure that the input box is cleared and i have tried the following:

.on('changeDate', function(ev){
// do my checking here
//-- need to clear the input value

Bu the normal $('#dp2input').val(''); does not have any effect on clearing the value it remains as selected.



9 oct 2012, 17:18

Hi there.

I like this color picker, but after the last update it seems like it's broken. I don't see the vertical color bar picker, it's just a white bar. Anybody else has this issue? Even the demo here doesn't work.

I'm using Firefox 15, Chrome 22 and IE9 - all have the same issue.

Anybody has a fix for this?

Thank you,


9 oct 2012, 18:26

Great blog you have got here.. It's hard to find high quality writing like yours these days. I truly appreciate people like you! Take care!!


9 oct 2012, 20:54

It was a mistake in the CSS file. I updated the file and it should work now.


10 oct 2012, 14:48

Boostrap version 2.1.1 and jQuery 1.8.2
Code PHP:

After click it brings me to: 2012-04-13 not 2012-09-10. Why?


10 oct 2012, 14:54

@L: the data-date attribute has the value {{ date('Y-m-d', $date - 6*30*24*60*60);} and the input has the value {{ date('Y-m-d', $date - 30*24*60*60);}} . It is a difference of 150 days between those two.


10 oct 2012, 21:11

How to fix October always has twice the day 20. ?

Pedro Magalhães

15 oct 2012, 17:20

It's a timezone issue. Some countries that have a differente timezone and winter/summer time cause various bugs on every calendar eyecon is publishing.
You will have trouble using this calendar on your clients, if your website serves differente timezones... Some days are not clickable, some thays repeat, etc.
This is not a stable version!


18 oct 2012, 12:22

Hi all,
Great work!
Has anyone found a way to leave an input empty after tabbing or when you click outside the datepicker and this is hidden, other than comment out the this.set() in the actual bootstrap-datepicker.js file. I've tried to override the hide function myself and didn't work (but it worked for the "place" function that I needed to override as well).
Any ideas?

Philipp Rieber

18 oct 2012, 18:16

this is my way of closing the datepicker onSelect:

.datepicker({format: '', weekStart: 1})
.on('changeDate', function(ev){

The "blur()" part becam necessary because the picker was not able to re-open after auto-closing without putting the focus elsewhere.

Thanks for the great work, love the picker!


18 oct 2012, 21:55

Hello Pedro Magalhães, can you tell me how you fix this bug (twice days in October)?


19 oct 2012, 01:23

any idea on how to fix the timezone issues?


22 oct 2012, 10:17

Some issues I found on date picker.

I used this date picker on my sites, user "date of birth" field.

Problem is:
After user registration and login to user panel.
User can edit his "Date of birth".
a user with "date" on 29,30,31 of any month.
when he click on the "Date of birth" input field, the calendar popup and shows incorrect date highlighted.

for example:
My DOB is 31-01-1989
When I go for edit and click on the input field, date highlighted on calendar is 03-01-1989.

ie, for date 29 - 1 is highlighted, 30 - 2 is highlighted, 31 - 3 is highlighted. 28 and below no problem.

php code


22 oct 2012, 10:20

php code
<input type="text" name="dob" id="dob" value="<?php echo date('d-m-Y',strtotime($dob)); ?>" />

Js code
$(document).ready(function($) {
format: 'dd-mm-yyyy'
.on('changeDate', function(ev){


23 oct 2012, 04:41

Hi! Thank you for great datepicker. I've found a little misprint in docs in 'Options' menu.
There should be 'yyyy' (instead of three 'y') in the last column of second row ('format').


23 oct 2012, 18:04


We've noticed a small bug on your colorpicker component.

When you set a color with $('#mySelector').colorpicker('setValue', '#FF0000') for example, an undefined value is given to the actual setValue method.

Here's a patch to the $.fn.colorpicker function :

==== PATCH ====

$.fn.colorpicker = function (option, arg) { // Here we add an optionnal "arg" argument
return this.each(function () {
var $this = $(this),
data = $'colorpicker'),
options = typeof option === 'object' && option;
if (!data) {
$'colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults, options))));
if (typeof option === 'string')
if (typeof (arg) != 'undefined') { // If an argument was given, pass it to the method
else { // If no argument, call the method without it.


24 oct 2012, 12:10

hi, thanks for it. Just quick feedback

1) I have problem with no existing @primaryButtonBackground => in my bootstrap variables.less is @btnPrimaryBackground
2) Another one is with calling calendar in bootstrap modal layer. I fix it with this code: .datepicker {z-index:1050;}

thanks again


25 oct 2012, 12:14
Static files are missed now ( and others)


30 oct 2012, 09:54

Hi from Ukraine.

Datepicker problem at Windows 7(Chrome 22.0.1229.94)
When we look at month - don't mark grey color a days from previous and next month.

Thanks for your work!


30 oct 2012, 15:43

Hi Philipp Rieber,
Thanks for your answer. It's not exactly what I was looking for but it actually helped me out with something else.
When the window is resized, I need to hide the datepicker but when I was clicking again the input the datepicker wasn't reopening. I added .blur() as you mentioned and worked as charm.

Joe H

1 nov 2012, 01:24

Hi Stefan,

There seems to be an issue with this version of Datepicker which you can demonstrate even on your demo/downloads ( page. It doesn't like February, September or November!

Enter 09-16-2012 in your first box and it automatically changes to 10-16-2012. If you enter 08-16-2012, it gives you August 16 2012, which is correct. I have pored through your code and can't seem to figure out why it's only those months that are not recognized. Thanks, great piece of code otherwise!

maurizio lepora

1 nov 2012, 17:37

Hi Stefan,
Really a great work!!
I've integrated it in my bootstrap and work very fine!

I have a little question about "datepicker"? It is possible to have a version with a file of internationalization? [Ex. locale.js]

Thanks a lot!

Adam Lynch

6 nov 2012, 15:49


Thanks for the work. I think I've found a bug in that calling .datepicker('hide') on an empty fields set its value to the default (today's date).


I wanted to hide all datepickers. The following would not work as expected:

I understand that when hiding the datepickers, or if they lose focus, the default behaviour is to give the field the default if it's empty. I.e. if you focus on a field and then click somewhere else to blur the datepicker. But if the datepicker isn't open at all and the field is empty, then it shouldn't. Maybe there should be a check in the 'hide' function to check if the datepicker is actually open.

What I've done instead is iterate over the inputs and reset each of the inputs value back to what it was (before the call to .datepicker('hide')):

$.each($inputs, function(i, el){
var $input = $inputs.eq(i),
val = $input.val();


Joel Kinzel

9 nov 2012, 22:26

I'm having an issue with the datepicker in Chrome. It keeps throwing an error:

"Uncaught TypeError: Cannot read property 'top' of undefined" on line 148 of datepicker.js. This is the function that places the picker. Here is the function in question:

place: function(){
var offset = this.component ? this.component.offset() : this.element.offset();
top: + this.height,
left: offset.left

Here is the HTML:

Start Date:

Joel Kinzel

9 nov 2012, 22:41

For those who are having the problem I described above:

The problem is this script does not detect if the element is an input element, but rather looks for the class ".date" on the element. If the class of ".date" is found, it is assumed that the element is of the "add-on" type from Bootstrap and proceeds to look for the element with a class of ".add-on".

Easy solution: use a different class (".datepicker" for example) and it will work fine.

Better solution: change line 34 in bootstrap-datepicker.js to read:

this.component ='.date') && !'input') ? this.element.find('.add-on') : false;


13 nov 2012, 09:08

The date picker on click of the date in the calendar did not fire off the change events in the date input field. I have added one line at the end of the click event that has enabled change event propagation.

Datepicker.prototype = {
click: function(e) {

Hartono Ramli

14 nov 2012, 02:53


I was using your code for colorpicker from this site:

You said in there about
Dual licensed under the MIT and GPL licenses.

But, I can't find the license file.
Please let me know if you need to talk about removing the code from my site (as of now, the site is not live yet), or proper licensing. In the meantime, I just put a .txt file containing your site, and credit to your name

Please email me back.

Thank you
Hartono Ramli


14 nov 2012, 13:25

For use datepicker in modal, add

.datepicker.dropdown-menu {
z-index: 2000;

in the datepicker.css file


15 nov 2012, 11:27

Datepicker looks great but the lack of supporting empty input fields is certainly a showstopper. Too bad.


16 nov 2012, 12:04

Hi Stefan

thanks for your great work with your datepicker. But I think I found a bug while was trying to choose my date of birth in the years viewMode: 26-5-77. Something weird happen getting to the days choice



17 nov 2012, 19:13

great datepicker, but first example doesn't work in IE8

Henry Jin

22 nov 2012, 22:54

A simple and elegant plugin. I love it. A bug, though.

I make my date box as "viewMode = years", if the date is already set as 1973-05-18, clicking the input box, I get years view with "1973" hightlighted, which is fine. Clicking "1973", I get months view with "May" highlighted, which is also fine. But clicking "May", I get days view with the day being reset to "1" and highlighted, the original day value "18" is lost!

It happens on latest FF and IE. Is it possible to fix it?

Thanks again for this great tool.


24 nov 2012, 01:57

Great job and well done!

Is there a way to set the datepicker value to current date?


28 nov 2012, 11:48


In the first place thanks for this nice plugin.

In the version from 29/9/2012 i changed 2 lines of code to let the date picker auto hide after selecting a day and show up again if you click the input box.

At first i only added: this.hide(); somewhere around line 300 (after the change date trigger).

What i then discovered was that i could not open the date picker without moving my focus somewhere else and clicking it again.

I added click: $.proxy(, this), after line 38 in the script and this solved my problem.

I hope you will take an option in consideration where i can chose to have this behavior or not.

Rafael Guerreiro

30 nov 2012, 12:34


At first congratulations for the datepicker plugin.

Is there a github repository for this plugin?

Because I've fixed something like:
Hide after selecting date;
Show after click on the input;
Allow empty dates (if you leave empty, without selecting, it will stay empty);
Fixed the problem with Summer Time (there was a bug on 20~21 october 2012);
Fixed the problem when the active date wasn't highlithed;
Fixed some CSS issues, like prev and next buttons, month view and year view sizes.

Just send me an email and i'll send you all the code, or I could send you a pull request.

Ivan Fragoff

1 dec 2012, 00:38

Are there plans to support positioning options for the color picker?
By default it opens below the 'button'. How about to the right or above it?
Thanks, great component otherwise.

Tomás Girardi

10 dec 2012, 19:53


About datepicker:

first of all: GREAT plugin!

I've added a destroy method wich can be very helpful in some situations. For example: we are loading HTML content, which contains datepicker inputs, dynamically, so, whenever some of this content needs to be removed, we should destroy any timepicker inside of it, to keep the DOM cleaner and also jQuery data and event listeners. In a more personal example: I'm loading popups, which have datepickers inside of it, dynamically, after opening and closing some of them I can end up with dozens of datepicker's dropdown-menu's.

I would like if you could check it out, because I'm not 100% confident I didn't make any mistake.

If you want, you can write me an email and we can discuss. I can also send you a .patch file which is more comfortable to use and read.

This is the diff patch:

diff --git a/gui/js/bootstrap-datepicker.js b/gui/js/bootstrap-datepicker.js
index 8875ec1..20689cf 100755
--- a/gui/js/bootstrap-datepicker.js
+++ b/gui/js/bootstrap-datepicker.js
@@ -27,23 +27,23 @@
this.picker = $(DPGlobal.template)
- click: $.proxy(, this),
- mousedown: $.proxy(this.mousedown, this)
+ 'click.datepicker': $.proxy(, this),
+ 'mousedown.datepicker': $.proxy(this.mousedown, this)
this.isInput ='input');
this.component ='.date') ? this.element.find('.add-on') : false;

if (this.isInput) {
- focus: $.proxy(, this),
- blur: $.proxy(this.hide, this),
- keyup: $.proxy(this.update, this)
+ 'focus.datepicker': $.proxy(, this),
+ 'blur.datepicker': $.proxy(this.hide, this),
+ 'keyup.datepicker': $.proxy(this.update, this)
} else {
if (this.component){
- this.component.on('click', $.proxy(, this));
+ this.component.on('click.datepicker', $.proxy(, this));
} else {
- this.element.on('click', $.proxy(, this));
+ this.element.on('click.datepicker', $.proxy(, this));
this.minViewMode = options.minViewMode||'date-minviewmode')||0;
@@ -90,13 +90,13 @@;
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();;
- $(window).on('resize', $.proxy(, this));
+ $(window).on('resize.datepicker', $.proxy(, this));
if (e ) {
if (!this.isInput) {
- $(document).on('mousedown', $.proxy(this.hide, this));
+ $(document).on('mousedown.datepicker', $.proxy(this.hide, this));
type: 'show',
@@ -106,11 +106,11 @@

hide: function(){
- $(window).off('resize',;
+ $(window).off('resize.datepicker',;
this.viewMode = this.startViewMode;
if (!this.isInput) {
- $(document).off('mousedown', this.hide);
+ $(document).off('mousedown.datepicker', this.hide);
@@ -318,7 +318,19 @@
this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
- }
+ },
+ destroy: function(){
+ var element = this.element[0];
+ this.picker.remove();
+ $.removeData(element,'datepicker');
+ $.removeData(element,'date');
+ $.removeData(element,'date-weekstart');
+ $.removeData(element,'date-format');
+ $.removeData(element,'date-viewmode');
+ $.removeData(element,'date-minviewmode');
+ $(window).add(document).add(this.picker).add(this.element).add(this.component).off('.datepicker');
+ }

$.fn.datepicker = function ( option, val ) {
@@ -451,4 +463,4 @@

-}( window.jQuery )
No newline at end of file
+}( window.jQuery )



14 dec 2012, 12:23

first of all great work, but i have lil problem using datepicker (nubie). when calender pop out display is so wide, compare your example. did i miss something???


14 dec 2012, 17:05

Love the datepicker but I think I've found a bug. When you have December visible in the datepicker and you click a day in January (at the bottom, the numbers in gray), it gives you a November date. This only occurs when the main month is in one year and the next month is in the following year.

I haven't attempted to debug this yet, just thought I'd point it out. Thanks for the effort, this is great so far!

R.A. Porter

19 dec 2012, 23:04


We found the same issue - using the current version, 2012.09.29. Here's the fix.

--- a/webapp/src/main/webapp/static/js/vendor/bootstrap-datepicker-2012.09.29.js
+++ b/webapp/src/main/webapp/static/js/vendor/bootstrap-datepicker-2012.09.29.js
@@ -200,9 +200,17 @@
clsName = '';
if (prevMonth.getMonth() < month) {
+ if (prevMonth.getFullYear() === year) {
clsName += ' old';
+ } else {
+ clsName += ' new';
+ }
} else if (prevMonth.getMonth() > month) {
+ if (prevMonth.getFullYear() === year) {
clsName += ' new';
+ } else {
+ clsName += ' old';
+ }
if (prevMonth.valueOf() === currentDate) {
clsName += ' active';

Romain BIARD

26 dec 2012, 04:19


I've just corrected the placement of the color Picker.

this.picker.css({ top: + this.component.height() , left: offset.left });

instead of

this.picker.css({ top: + this.height, left: offset.left});
line 241,

Great work,


28 dec 2012, 16:28

Awesome work, specialy for datePicker


31 dec 2012, 13:02


Just wanted to report a bug in the DPGlobal.parseDate function.
if you have a date object with today's date (12-31-2012) and want to set it to the date 11-30-2012, this part will incorrectly set the date to December instead of November.
case 'mm':
case 'm':
date.setMonth(val - 1);

So at the end you will get the date 12-30-2012.

Hope this helps.



9 ian 2013, 22:15

Hey Stefan -- This looks great but I think the download has an outdated css file? Or maybe I am missing something?

On this site the loaded date picker is wrapped in a div like


However, on my download the datepicker is in div like


But the css file is going by the ".datepicker" class.

I tried blindly replacing all instances of .datepicker with .ui-datepicker in the css file but it didn't work.

Have I missed something or is the wrong css file included?



9 ian 2013, 22:20

Erg... I see my code was stripped out of the comment. So It should say that

On the site the datepicker wrapper has a class "datepicker". However my download has a class "ui-datepicker". The css in my download still seems to be referencing the "datepicker" class not the "ui-datepicker" class.

As a result the date picker works but is unstyled.

Thanks again.

Timothy Erwin

13 ian 2013, 16:07

it doesn't seem to be working? I tried it in chrome and ie and the color picker just has a solid color instead of the gradient....what happened?

Andres Moschini

15 ian 2013, 04:06

Hi Stefan, great work! It is the best datepicker that I found.

Yes, I did another fork (, there are a lot of them!

Well, my version is focused on work nicely with Knockout, be ready to be used in .Net with a NuGet package and TypeScript spec, and of course, the use of Moment.js to simplify the code and get more power on date manipulation.

Gabriel Diaconescu

17 ian 2013, 10:35

Hi Stefan,

I have the same problem as Timothy. I get a solid color instead of the gradient. Can you please check the demo page ?

Thank you.

Chris Martarano

18 ian 2013, 17:35

I'm sorry, but I am not at all versed in javascript, only HTML and CSS. I have been trying to get the date picker to work for ages, but to no avail.

I know there needs to be some sort of stuff at the bottom of my page which currently looks like this: $('.datepicker').datepicker(), but this is not allowing it to work. Can someone please tell me what I am missing or doing wrong?

I can not believe how exceedingly difficult this all is :(


24 ian 2013, 11:16

Nice job.
Have you think to develop DateTime picker for Twitter Bootstrap ?
I'm seeking a bootstrap widget capable of handling also the time


29 ian 2013, 13:42

I love your datepicker, it's cool
and I found a bug in DPGlobal.parseDate(date, format)

for example,
if I set data-date="2013/02/22" and data-date-format="yyyy/mm/dd"
and today is 2013/01/29
inside DPGlobal.parseDate
date will first set to 2013/1/29
and because mm will parse before dd in the switch loop in this date format
so it will set to 2013/2/29 -> 2013/3/1
and the result will be "2013/03/22"

so I suggest you can put date.setDate(1); before date.setHours(0);
it will fix this problem

thanks again :)

Peter Beňo

29 ian 2013, 17:48

Hi! I've ported this great plugin to Zurb Foundation framework, check it out:

Thanks for such a great job!


30 ian 2013, 02:07

Hi, first of all, great plugins, now:

While using the color picker I noticed that it does not have a "Close" button or an "Accept" or "Ok" button in order to hide (kind of auto hide) the whole component until you choose a color. So, after a few hours, I could modify the script and I added this line:

$(".hideCP").on('click',$.proxy(this.hide, this));

After the line 142 (it begins on "this.picker = $(CPGlobal.template)" )

And also modified the template content adding:


before the last "" tag.

It worked pretty well for me.

Thanks and regards...


31 ian 2013, 17:33


I have added few dirty hacks to add localization support for your Datepicker, check it out:


wholesale nike

4 feb 2013, 12:03

welcome to visit my site

Jeroen de Zeeuw

4 feb 2013, 21:30

Hi Stefan,

great work on the Datepicker control, thank you for that!

I found a little thing tough, in the first example (#dp1) of the Datepicker example page, when I begin typing 13-01-2013, the calendar opens nicely, showing the date I want to use. But, when leaving the textbox, it resets to 01-01-2013. This occurs when using daynumbers >12.

Did you notice?

Jeroen de Zeeuw

4 feb 2013, 22:09

Aaargh, scratch my previous comment. Just found out that I had the date format wrong in the options (mm-dd-yyyy vs dd-mm-yyyy).



11 feb 2013, 11:54

Hey, i just wanted to give you a headsup becuase the .less file has some old/wrong variables.

'@primaryButtonBackground' should be changed to '@btnPrimaryBackground'.


19 feb 2013, 11:42

Hi Stefan,

thank you very much for your datepicker for bootstrap. It's really neat! But there is a problem, when the datepicker is completely on the right side of the screen. Sadly the dropdown is not visible in that case. Here is my fix:
Oh btw: your contact page isn't working. Have you also considered putting the code on github?

js - replace the "place" method with this:

place: function(){
if(this.isInline) return;
var zIndex = parseInt(this.element.parents().filter(function() {
return $(this).css('z-index') != 'auto';
var offset = this.component ? this.component.offset() : this.element.offset();

var isTooMuchOnTheRight = offset.left + this.picker.width() >= $(window).width();

var left = offset.left;
left = offset.left - this.picker.width() + this.component.width();
var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(true);

top: + height,
left: left,
zIndex: zIndex


css - add these 2 classes:

.dropdown-arrow-right:before {
left: auto !important;
right: 6px;

.dropdown-arrow-right:after {
left: auto !important;
right: 7px;

Andy again

19 feb 2013, 11:44

Nevermind on the github. Just found it there. Will be posting pull request in the near future.

Keep on rocking!


19 feb 2013, 12:40

Having some issue with the datepicker in Safari, for some strange reason the datepicker sticks to the bottom of the page?? Stefan do you do any freelancing?


20 feb 2013, 15:29

Hi and thanks for this great plugin. Just a question, there is a way to place the colorpicker left or right instead of bottom ?


22 feb 2013, 10:58

There's really annoying feature.

If you don't select the date and click anywhere else to hide it (blur) it will automatically select current date. So there's no option to leave textfield blank.


25 feb 2013, 22:35


Super plug-in, dar am si eu o problema.... folosesc mvc4 si am pus scripturile si css-urile dar cand dau click pe imputul respectiv imi crapa cu eroarea: "Unable to get property 'top' of undefined or null reference" in methoda Place (IE 10). In Chorme merge dar imi afiseaza undeva jos de tot din pagina, nu sub imput.

Ce fac gresit?


Luke Oliff

28 feb 2013, 13:01

Using this for a bootstrap based application I am building. It is fantastic, just what I was after.

To avoid forcing a date on a selected element or stopping people from removing a date, I made the following changes to bootstrap-datepicker.js

hide: function(){

Dawid Czerwinski

3 mar 2013, 20:51

Great Plugins Stefan! I used DatePicker in my project. I can't find any license you are distributing these plugins under so I assume its MIT license.


5 mar 2013, 19:53

Can you please allow clicks outside of the popup to not activate a date selection? I need people to be able to click off it to close without selecting a date.


10 mar 2013, 06:10

I copied the files to the relevant bootstrap extension folders, but get the following error:

TypeError: $(...).datepicker is not a function
[Break On This Error]

Do I need to register this script in Bootstrap.php?


10 mar 2013, 06:24

If I add the following code it works:


but then i don't get the bootstrap look...


10 mar 2013, 11:55

@Mike: I changed the script so the value is not set until the user chooses a date.

@Luk: I did not use Yii framework, but I think you have to add the CSS file too. I guess you have to use 'registerCssFile' to add 'datepicker.css'


11 mar 2013, 15:02


I noticed an issue with the datepicker range select

What works: Per your example, if you select a date in the first field, you can't select a date LESS than this on the right field. But if you go back and change the left field, the right field does not update the "disabled" dates to match. This allows the selection of a date LESS then the first field.

It appears onRender is only called once. Any ideas?


11 mar 2013, 19:21

@Stefan, registerCssFile did the trick - I was under the assumption that it was Yii ready :-)
When the calendar pops up, I don't get it to display the date that is in the input value - sily question I suppose, but would love to know
Great work!


12 mar 2013, 13:39

In lines 209 and 211 there is a problem with assigning proper class .old or .new when the next month is in a different year, so when you are browsing December 2012 and want to click the grey "1" which should take you to January 1st, you just jump to November because it has the .old class assigned. Here is a fix:

Line 209, looks like this:

if (prevMonth.getMonth() < month) {

Should be:
if (prevMonth.getMonth() < month && prevMonth.getFullYear() == year || prevMonth.getFullYear() < year) {

Line 211 looks like this:

} else if (prevMonth.getMonth() > month) {

Should be:

} else if (prevMonth.getMonth() > month && prevMonth.getFullYear() == year || prevMonth.getFullYear() > year ) {

You should seriously consider hosting this on Github or Bitbucket to allow people to easily submit fixes. This is a great library!


12 mar 2013, 14:36

@Sævar: thanks. I updated the script.


15 mar 2013, 11:00

Hi Stefan,

There's a bug in Datepicker in "years" mode, you can see it in your very examples page.
You have set 12-02-2012 there, and when you go through to select the year, it goes to 2012 (which is fine), then you select the month which goes to February (which is fine too), but then when you are presented with the days list it sets to the 1st day of the month (always).

Hopefully you can correct it, and thanks for Datepicker, it rocks.



16 mar 2013, 00:07

Hi Stefan,

There is a bug in Datepicker in "Disabling dates in the past and dependent disabling." when you select a date in "Check in" the calendar for "Check out" restrict past days when opened, but if clicked under month and then under year you can select a previous year and date.

I know you can correct this.



18 mar 2013, 10:39

when i use it in the modal window,the data picker is shown under the modal window.


18 mar 2013, 10:41

@jeff: you can define a CSS rule for .datepicker with z-index higher then the modal's z-index

25 mar 2013, 08:52 - this is great site for download cheap ebooks.


25 mar 2013, 23:58

Thank you for your super site in internet.

Luca Koch

27 mar 2013, 13:36

Hi Stefan!
It looks like your Contact Page isn't working.
I want to use your spacegallery but I can not find a license. Can you help me?
I want to build an JOOMLA Plugin but i don't know if I can use it for my Website's.


28 mar 2013, 19:26

Article great, but comments also are a good help. Learn something new.


14 apr 2013, 14:53

Hi Stefan !
Firstly thanks for all yoyr great work..!

I have some questions about datetimepicker:
-How can I set a default date / time ?
-How can I Hide the text input and display only the "bootstrap-datetimepicker-widget dropdown-menu" ? For both date and time picker ?


15 apr 2013, 23:45

Hi Stefan,

There is an issuue with the date picker if you include jquery-ui-1.8.20.js
The calander when displayed is not next to the control
It normaly just ends up at top of the page


16 apr 2013, 01:05

Seem to work with jquery-ui-1.10.2


24 apr 2013, 13:28

Very nice job!


30 apr 2013, 09:01

This looks perfect for me but I cannot make the date picker work. I am not familiar with JQuery and you seem to expect the user to know how to call the date picker - all I want is the first example on the boot strap page.

Do you have a working example on a page without any advertising etc. So I can see exactly what you are doing to make the date piker actually come up?



30 apr 2013, 14:19

Hi Stefan

Just started using the calendar and it works well. One major issue that took me way too long to solve was when I was using an outdated version of the js.

Please add a comment in the js that includes the version and/or date, to be able to identify



10 mai 2013, 17:39


I've found a little problem with the datepicker. You can replicate it on your own demostration page.
Go to the "Disabling dates in the past and dependent disabling." section

Select any future date (except tomorrow) Select a higher date with the second datepicker.
This works fine.

No go back to the first datepicker, and select a closer date, maybe "tomorrow".
Now the second datepicker is out of sync, you can't select the day after tomorrow it's still disabled.

adding a
"this.update()" at the show functions in bootstrap-datepicker.js (at line 93) will fix this.

Also i've found the "show" event not really fires during the show... for some reason. it fires on the datechange case (when you picking a date)...

I hope this makes sense. :)


11 mai 2013, 20:00

many thanks, looks and works flawlessly!


12 mai 2013, 22:52


you did a really good job.

I've just added script in order to add translation of dates labels :

line 80 :
if (options.labels)

line 383 :
setDatesLabels: function(labels) {
for(var i in labels)
DPGlobal.dates[i] = labels[i];

then when i instanciate datepicker :

var labelsFr = {
days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"],
daysMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"],
months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jui", "Jul", "Aou", "Sep", "Oct", "Nov", "Déc"]

format: 'dd/mm/yyyy',
weekStart: 1,

may be there is another to do it better :)


25 mai 2013, 17:21

Hi Stefan

Please add code from comment mrbinr. Very need change language without edit js file.


10 iun 2013, 22:45

+1 to add code from comment mrbinr !

Mark Volkmann

27 iun 2013, 20:48

When I click the calendar icon for the datepicker below, it starts on April 2015 instead of 2014. Do you know why it does that?

Do I need to specify both "data-date" on the div and "value" on the input?

Bruce Pierson

8 iul 2013, 20:15

Hi. The color picker does not work at all - it shows up in the upper left corner of the screen and only shows a blank white box.


17 iul 2013, 00:09

Hi Stefan

thanks for this!

i am trying to have an option to remove the entry of a field - where the colorpicker has already generated a hex code. the trigger works fine and the value is removed from the field.

BUT - when i click anywhere else on the page - the hex value magically comes back to the field!!

here is a sample:
1) get hex
2) remove value by clicking on the X
3) click anywhere on the page and the hex code will return!!



21 iul 2013, 08:39

I need datepicker dispaly Two month.
see elample link

click date show date lyout


2 aug 2013, 03:38

Hi Stefan. Very nice work. All the nice comments above are well deserved.

Has anyone modified the example for 'check-in/check-out' to show the total days selected in a third field. Ideally, since it's a reservation example it would be actual nights rather than days.

There are examples (e.g. that calculate a datepicker total, but I can't work out hot to make then work with this datepicker.

Scott Hildenbrand

2 aug 2013, 18:06

I've got a bit of code which inserts a datepicker(and other data) via ajax via a fired $('#id').append(data); and needed to activate the datepicker.

Is there any BETTER way of doing it than using a:

$(document).on("mousedown", '#dpYears',function(event) {

Seems to be the only way that works for me. I had it bind to click, but then it required two clicks on the calendar icon to pull up, which is not surprising since the first initialized the datepicker.

So what might work better?


10 aug 2013, 08:14

Color picker don't work properly in your examples - show ony one color but we can change color when click on color picker (we don't see full color palette in color picker)


19 aug 2013, 19:31


@jwaldek said about a bug in colorpicker. The colors do not appear correctly, but the functionality works ok. Is there a fix for this?

Thank you

Mark Dornian

29 aug 2013, 05:19

I do not know how to change the viewMode after the control is initialized. Can you give me a hand?

When the page is loaded, and the control is blank I set the viewMode to 'years'. If they select a date I would like to change the viewMode to 'days' so that if they want to go back and change it they will see the 'days' viewMode.

Great tool by the way.

Fábio Lima

2 sep 2013, 19:31


First congratulations for the good work!
I was needing the translation of this componente, so I made some adjustments to it !! And add the Portuguese (Brazil) translation. See if you can add it to the DatePicker component for the next version.

line 25 : this.language = options.language ? options.language : 'en';

line 174 : html += ''+DPGlobal.dates[this.language].daysMin[(dowCnt++)%7]+'';

line 184 : html += ''+DPGlobal.dates[this.language].monthsShort[i++]+'';

line 195 : .text(DPGlobal.dates[this.language].months[month]+' '+year);

and the DPGlobal var dates changed to

dates :
{'pt-BR' : {
days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab", "Dom"],
daysMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab", "Dom"],
months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]
'en' : {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]


16 sep 2013, 19:48

Hi Stefan:

I am using your bootstrap-datepicker. Nice work!

I have a questions. How to I highlight certain dates, like holidays? I am able to disable then during "onRender", but I would also like to style them. How do I do that?




24 sep 2013, 02:13

Is there any way to destroy the colorpicker binding on an object. I have it bound to a hyperlink, which then posts back the return to a handler. I'd like to be able to un-bind colourpicker from the hyperlink after it has been used once.

Lighting Cui

25 sep 2013, 21:32

hi Stefan,
while i use datepicker. try below code.
make the dropdown-menu show/hide/show/hide.......
see the log on console. why the 'hide' event called so many times?

$('#dp2').datepicker().on('changeDate', function() {
}).on('show', function() {
}).on('hide', function() {

logs like below :
show (3 times)
hide (6 times)
hide (8 times)
hide (10 times)
hide (6 times)


6 oct 2013, 16:46

Hi! I'm wondering if there's a way to remove a datepicker from an element. I mean the exact opposite of element.datepicker();


11 dec 2013, 03:42

hey !

I can't disable months when viewmode is month. Disabling seem to only work for days :(


7 ian 2014, 09:54

Hi Stefan, thank You for Color picker, it is (almost) perfect. I want use it for my project, but for user comfort missing one functionality, some "ok" button for closing.
It is possible assign it to bottom color block? I try it but without success.


15 ian 2014, 19:57

I have an issue:

Running "jshint:files" (jshint) task
Linting assets/javascript/src/bootstrap-colorpicker.js ...ERROR
[L540:C16] W030: Expected an assignment or function call and instead saw an expression.

Warning: Task "jshint:files" failed. Use --force to continue.



29 ian 2014, 12:42

Thanks for posting your work, great job with date picker. I'm implementing it into a site I'm working on but I would like the date picker to change the date and hide when you click on a day (eg. 1-31) but not hide when you select a month or year. I've tried calling the hide method on the dateChange event but the problem is that the dateChange event is triggered when selecting a month or year also. Is there any way to do this? Thanks.


30 ian 2014, 02:03

^ nevermind. I found a solution to this here...


14 feb 2014, 21:27

Great script! Will this work with bootstrap 3 and jquery 1.10.2?

Ec Stasis

28 feb 2014, 17:46

I had datepicker placed incorreclty (on top left corner of the document) when attaching to a simple text input.
Here's the bug I've discovered.
Line 153:
var offset = this.component ? this.component.offset() : this.element.offset();

this.component in my case is an empty JQuery object, so it equals true and this.component.offset() returns "undefined".

Here's the fix:
Line 93:
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
replace with:
this.height = this.component.length ? this.component.outerHeight() : this.element.outerHeight();

And line 153:
var offset = this.component ? this.component.offset() : this.element.offset();
replace with:
var offset = this.component.length ? this.component.offset() : this.element.offset();


13 mar 2014, 09:21

It's going to be finish of mine day, however before ending I am reading this fantastic article to increase my experience.


31 mar 2014, 06:19

When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get several emails with the same comment.
Is there any way you can remove people from
that service? Thank you!


4 iun 2014, 19:16

It's great!
I need to show in the page, not popup. Is it possible?


6 iun 2014, 18:55

PS -
On this page:
The code for "Check in" and "Check out" is only working one time.
If you click the Check-In date later, then the check-out has wrong dates disabled.


11 iun 2014, 09:59

If you are interested: I added a german translation for the datepicker:

$ = {
days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
daysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"],
daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"],
months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
monthsShort: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
today: "Heute"


12 iun 2014, 14:51

This datepicker is very nice but on my tests it i found 2 little problems so far:

1 - as component was not working with boostrap 3
2 - datepicker shows under the modal when the date field is in a modal

I managed to solve 1st problem...replaced "add-on" in datepicker.js with "input-group-addon"

The 2nd problem seems to be a little more complicated, or am i wrong? it possible to show datepicker above de modal?



27 aug 2014, 23:05


Thank you for creating datepicker! It seems to work great with one small issue. When one clicks out of the field to another, the calendar hides as it should. But, if you use the tab key to move from input to input, the calendar does not hide. So, if I have multiple date fields on a single form I end up with multiple calendars opening as I tab through the form. I tried using both a blur and focuslost events to call datepicker('hide'). Doing so hides the calendar as expected, but it also then hides when you try to pick a date in within the calendar. Note that this behavior is observable on your own example page if you use tab to move from field to field. I am using Chrome

Any ideas?

P. Todd


1 sep 2014, 14:05

I need use the datepicker function over live element.
I try .on() jquery functions but this not work.

Is it possible?

I used this code:

$(document).on('click',"#LiveElementID", function(){


24 sep 2014, 10:39

Hi there

It seems, that in the demo ( the hue-image cannot be loaded: http://colorpicker.lh/img/hue.png

Could you please check this, so the demo does work again?

Steve Kemp

27 oct 2014, 06:25


There's an issue when viewing the calendar for September and October 2014 - it's showing an extra line with one data on a line of it's own and repeated from the previous line.

Are you able to fix this?

Thanks - it's a great library.

heemanshu Bhalla

7 ian 2015, 21:09
Finally I found a solution to the error . this link provided me explanation of why and what of this error and provided solution to it . Spent my 2 hours on this error


30 mar 2015, 18:59

great tool.... really best for a web designer,.... as i am.


17 apr 2015, 16:03

Clor picker's time is over now...Websites with advanced tools and layouts are using more upto date and easy to use stuff....This one is good too..Great


30 apr 2015, 02:56

How do I get as a example a maximum of 2 days from the first date selection within the calendar. So that lets says if i pick day 5 on the first calendar, on the second calendar it'll have days 5, 6, and 7 available.


21 iun 2015, 16:31

most of my problem solution is solve
thanks for shairing


9 oct 2015, 16:16

Hi, Date picker creates a weird issue in IE9.

When one clicks on textbox it opens datepicker properly. but after that selecting any date for the first time doesn't work. one have to click on that date again so that datepicker closes and selected date shows off in textbox.

It only occurs for IE9. Many of our clients still use IE9 :(

Any help on this?

pankaj gupta

20 nov 2015, 11:38

i would like to shere the great update from the all parties that our site is providing great stuff to read thanks.

pankaj sharma

20 nov 2015, 11:39

i would like to shere the great update from the all parties that our site is providing great stuff to read thanks.
Hostgator coupons


20 nov 2015, 11:42

This post is really contain the great content to read thanks for sharing this.

Dimpy Roy

10 dec 2015, 12:35


I need your help in this.

I need to show 2 months on my date picker box. Like when i click on depart box. it should show 2 months.

Also, i need to show options for "Today" and "Tomorrow" on my flight search page. Like when i click on "Today", date of today should show in the box and same function for "Tomorrow" option.

Adauga comentariu
* Campurile marcate sunt obligatorii is using cookies to personalise content and ads, to provide social media features and to analyse our traffic. I also share information about your use of my site with my social media, advertising and analytics partners.See details

By continuing to browse the site you are agreeing to my use of cookies. ✔ Continue