Skip to content

Instantly share code, notes, and snippets.

@apt142
Created May 19, 2014 17:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save apt142/a19435ef2e2afc844b5a to your computer and use it in GitHub Desktop.
Save apt142/a19435ef2e2afc844b5a to your computer and use it in GitHub Desktop.
jQuery Datepicker styled as Bootstrap Popover
#ui-datepicker-div {
padding: 1px 1px 5px;
text-align: left;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
white-space: normal;
}
#ui-datepicker-div .ui-datepicker-header {
font-size: 1em;
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
color: #333;
}
#ui-datepicker-div .ui-datepicker-header span.ui-icon {
background: none;
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
font-size: 1.3em;
width: 1em;
overflow: hidden;
}
#ui-datepicker-div .ui-datepicker-title {
text-align: center;
font-size: 1.1em;
}
#ui-datepicker-div .ui-datepicker-prev {
float: left;
}
#ui-datepicker-div .ui-datepicker-next {
float: right;
}
#ui-datepicker-div .ui-datepicker-prev span.ui-icon:before {
content: "\e132";
}
#ui-datepicker-div .ui-datepicker-prev-hover span.ui-icon:before {
color: #000;
}
#ui-datepicker-div .ui-datepicker-next span.ui-icon:before {
content: "\e131";
}
#ui-datepicker-div .ui-datepicker-next-hover span.ui-icon:before {
color: #000;
}
#ui-datepicker-div .ui-datepicker-current-day a {
background: #0088cc;
color: white;
}
#ui-datepicker-div .ui-datepicker-calendar td a {
background-image: none;
display: block;
text-align: right;
padding: 1px 6px;
}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover {
background-color: #0088cc;
color: white;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment