Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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 http://jsfiddle.net/tzw63xtm/
(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.

Cheers.

Wonderful, thank you.

Saved me loads of time, thank you.

@ghost

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: https://gist.github.com/gabrieljenik/326032547078410083ce

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: https://gist.github.com/nickmeagher/089692e445ef9873700081f3e44269e1
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:

.ui-state-disabled{
    color: #b9b9b9
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment