Create a gist now

Instantly share code, notes, and snippets.

jQuery UI Datepicker Bootstrap 3 Style
.ui-datepicker {
background-color: #fff;
border: 1px solid #66AFE9;
border-radius: 4px;
box-shadow: 0 0 8px rgba(102,175,233,.6);
display: none;
margin-top: 4px;
padding: 10px;
width: 240px;
.ui-datepicker a,
.ui-datepicker a:hover {
text-decoration: none;
.ui-datepicker a:hover,
.ui-datepicker td:hover a {
color: #2A6496;
-webkit-transition: color 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out;
-o-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
.ui-datepicker .ui-datepicker-header {
margin-bottom: 4px;
text-align: center;
.ui-datepicker .ui-datepicker-title {
font-weight: 700;
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
cursor: default;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 1;
margin-top: 2px;
width: 30px;
.ui-datepicker .ui-datepicker-prev {
float: left;
text-align: left;
.ui-datepicker .ui-datepicker-next {
float: right;
text-align: right;
.ui-datepicker .ui-datepicker-prev:before {
content: "\e079";
.ui-datepicker .ui-datepicker-next:before {
content: "\e080";
.ui-datepicker .ui-icon {
display: none;
.ui-datepicker .ui-datepicker-calendar {
table-layout: fixed;
width: 100%;
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
text-align: center;
padding: 4px 0;
.ui-datepicker .ui-datepicker-calendar td {
border-radius: 4px;
-webkit-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
-moz-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
-o-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
.ui-datepicker .ui-datepicker-calendar td:hover {
background-color: #eee;
cursor: pointer;
.ui-datepicker .ui-datepicker-calendar td a {
text-decoration: none;
.ui-datepicker .ui-datepicker-current-day {
background-color: #4289cc;
.ui-datepicker .ui-datepicker-current-day a {
color: #fff
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover {
background-color: #fff;
cursor: default;

Thanks for posting!

osysltd commented Oct 17, 2014

nice work, thank you!


Works nicely thank you.

garak commented Nov 11, 2014

Can you point me to a working demo?
I tried and the result is ugly
(or maybe I'm doing something wrong?)


Perfect. Thank you!

j114143 commented May 5, 2015

Thanks you!
Beautiful work

arjundas commented May 7, 2015

nice, thank you!


Thanks for sharing!


Thank you for sharing. Works like a charm.




Wonderful, thank you.


Saved me loads of time, thank you.

ghost commented Sep 8, 2015

thank you.


Thanks :)
Do you have an idea why the arrows are not showing up ?


Thank you!


Please, You may find usefull a version I did:


This is just a great piece of work!




Thanks, it does the job.


thanks for the good job your are awsome thanks


This is awesome, thank you for this. I made a really subtle change in my styles that I think could help.

Here's the link:
Line: 32

Changed the cursor to pointer to accentuate the click action.

besi commented Oct 1, 2016 edited


I added this to show disabled dates / buttons:

    color: #b9b9b9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment