bootstrap 3 datepicker with custom theme - nasty looking

css angularjs twitter-bootstrap twitter-bootstrap-3 datepicker

13,556

Solution 1

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap datepicket demo</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<style>
.datepicker-dropdown {
  top: 0;
  left: 0;
  padding: 4px;
  background-color: #2C6E8E;
  border-radius: 10px;
}
.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.datepicker table tr td,
.datepicker table tr th {
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: #555555;
  cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #FF8000;
}

.datepicker table tr td.today {
  color: #000000;
  background-color: #FFA953;
  border-color: #FFB76F;
}
.datepicker table tr td.today:hover {
  color: #FFFFFF;
  background-color: #884400;
  border-color: #f59e00;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.open > .dropdown-toggle.datepicker table tr td.active,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted {
  color: #ffffff;
  background-color: #419841;
  border-color: #285e8e;
}


.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus {
  color: #ffffff;
  background-color: #285e8e;
  border-color: #193c5a;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.open > .dropdown-toggle.datepicker table tr td.active,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted {
  color: #ffffff;
  background-color: #3071a9;
  border-color: #285e8e;
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus {
  color: #ffffff;
  background-color: #285e8e;
  border-color: #193c5a;
}
.datepicker .datepicker-switch {
  width: 145px;
  
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
  background: #50A2C9;
}
</style>

<script type='text/javascript'>
$(function(){
$('.input-group.date').datepicker({
    orientation: "auto left",
    forceParse: false,
    autoclose: true,
    todayHighlight: true,
    toggleActive: true
});
});

</script>
</head>
<body>
<div class="container">
<h1>Custom datepicker</h1>
<div class="input-group date">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</body>
</html>

Hope this will help you and also check this Link for reference.

Solution 2

I had similar issue and it fixed by adding this class in dateOptions

vm.dateOptions = {
    class: 'datepicker'
};

css

.datepicker .btn-default {
  border-width: 0;
  box-shadow: none;
}

this will disable the shadow of button and get rid of borders

13,556

Author by

pathrider

Independant IT consultant specializing in Oil and Gas domain.

Updated on June 04, 2022

Comments

pathrider almost 2 years
I bought one of the custom Metro themes that was part of the John Papa AngularJS/Breeze courses on Pluralsight. Everything goes well until I tried to add a Bootstrap 3 date picker to the mix. Right out of the box, it looks nasty.

Note that the font-awesome icon is a couple of pixels smaller than the input box and that the popup has varying column widths and these weird borders and no background etc., etc.
```
     <div class="col-xs-6">
         <div class="input-group">
             <input type="text" class="form-control"
                    datepicker-popup="{{vm.dateFormat}}"
                    ng-model="vm.startDate"
                    is-open="vm.openedStart"
                    max-date="{{vm.endDate | date: 'yyyy-MM-dd'}}"
                    datepicker-options="{{vm.dateOptions}}"
                    ng-required="true"
                    show-button-bar="false"
                    show-weeks="false" />
             <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="vm.openStart($event)"><i class="fa fa-calendar"></i></button>
             </span>
         </div>
    </div>
```
I seem to have this problem whenever I try and use a custom bootstrap style that I've downloaded, so I'm obviously missing something fundamental in how custom style sets work.

So given that I have a custom style, how do I go about resetting the style of the datepicker so it looks much more 'default'? Obviously, I have to hunt down the CSS for it, and I have a customtheme.css file, but there's not much in there for the .ui-datepicker class and definately nothing that ever explains why are lines through the calendar.

Can anyone give me some advice or some pointers and how to clean this up (the icon and the calendar layout), or more generally, how to clean up gremlins when using custom themes?