diff --git a/.angular-cli.json b/.angular-cli.json
index 7f646ebc57..baed292431 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -18,7 +18,7 @@
       "prefix": "",
       "mobile": false,
       "styles": [
-        "../../src/datepicker/bs-datepicker.css"
+        "../../src/datepicker/bs-datepicker.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -41,7 +41,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "prefixInterfaces": false,
     "inline": {
       "style": false,
diff --git a/.gitignore b/.gitignore
index a7587b9fd0..98e0ea135d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,7 @@ Thumbs.db
 
 /demo/e2e/*.js
 /demo/e2e/*.map
+/demo/src/ng-api-doc.ts
 src/**/*.js
 src/**/*.map
 scripts/**/*.js
diff --git a/src/datepicker/bs-datepicker.css b/src/datepicker/bs-datepicker.css
deleted file mode 100644
index dc739e6271..0000000000
--- a/src/datepicker/bs-datepicker.css
+++ /dev/null
@@ -1,559 +0,0 @@
-.label-success {
-  background-color: #419641;
-}
-
-.bs-datepicker {
-  display: inline-block;
-  vertical-align: top;
-  min-width: 279px;
-  min-height: 250px;
-  background: #fff;
-  box-shadow: 0 10px 20px rgba(84, 112, 139, 0.1);
-  position: relative;
-  z-index: 1;
-}
-
-.bs-datepicker:after {
-  clear: both;
-  content: '';
-  display: block;
-}
-
-.bs-datepicker bs-day-picker {
-  float: left;
-}
-
-.bs-datepicker-head {
-  min-width: 270px;
-  height: 50px;
-  padding: 10px;
-  border-radius: 3px 3px 0 0;
-  text-align: justify;
-}
-
-.bs-datepicker-head:after {
-  content: "";
-  display: inline-block;
-  vertical-align: top;
-  width: 100%;
-}
-
-.bs-datepicker-head button {
-  display: inline-block;
-  vertical-align: top;
-  padding: 0;
-  height: 30px;
-  line-height: 30px;
-  border: 0;
-  background: transparent;
-  text-align: center;
-  cursor: pointer;
-  color: #fff;
-  transition: 0.3s;
-}
-
-.bs-datepicker-head button.next,
-.bs-datepicker-head button.previous {
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-}
-
-.bs-datepicker-head button.next span,
-.bs-datepicker-head button.previous span {
-  font-size: 28px;
-  line-height: 1;
-  display: inline-block;
-  position: relative;
-  top: -1px;
-}
-
-.bs-datepicker-head button.current {
-  border-radius: 15px;
-  max-width: 155px;
-  padding: 0 13px;
-}
-
-.bs-datepicker-head.years button.current,
-.bs-datepicker-head.months button.current {
-  width: 155px;
-  padding: 0;
-}
-
-.bs-datepicker button:hover,
-.bs-datepicker button:focus,
-.bs-datepicker button:active,
-.bs-datepicker input:hover,
-.bs-datepicker input:focus,
-.bs-datepicker input:active,
-.bs-datepicker-btns button:hover,
-.bs-datepicker-btns button:focus,
-.bs-datepicker-btns button:active,
-.bs-datepicker-predefined-btns button:active,
-.bs-datepicker-predefined-btns button:focus {
-  outline: none;
-}
-
-.bs-datepicker-head button:hover,
-.bs-datepicker-btns button.colored:hover:after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.bs-datepicker-head button:active,
-.bs-datepicker-btns button.colored:active:after {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.bs-datepicker-body {
-  padding: 10px;
-  border-radius: 0 0 3px 3px;
-  min-height: 230px;
-  border: 1px solid #eee;
-}
-
-.bs-datepicker-body .days.weeks {
-  position: relative;
-  z-index: 1;
-}
-
-.bs-datepicker-body table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.bs-datepicker-body table th {
-  font-size: 13px;
-  color: #9aaec1;
-  font-weight: 400;
-  text-align: center;
-}
-
-.bs-datepicker-body table td {
-  color: #54708b;
-  text-align: center;
-  position: relative;
-  padding: 0;
-}
-
-.bs-datepicker-body table td span {
-  display: block;
-  margin: 0 auto;
-  font-size: 13px;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  border-radius: 50%;
-  position: relative;
-  /*z-index: 1;*/
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-.bs-datepicker-body table td:not(.disabled) span {
-  cursor: pointer;
-}
-
-.bs-datepicker-body table.days td span.is-highlighted:not(.disabled):not(.selected),
-.bs-datepicker-body table:not(.days) td span.is-highlighted:not(.disabled):not(.selected),
-.bs-datepicker-body table.days td.is-highlighted:not(.disabled):not(.selected) span,
-.bs-datepicker-body table:not(.days) td.is-highlighted:not(.disabled):not(.selected) span {
-  background-color: #e9edf0;
-  transition: 0s;
-}
-
-.bs-datepicker-body table td span.disabled,
-.bs-datepicker-body table td.disabled span {
-  color: #9aaec1;
-}
-
-.bs-datepicker-body table td span.selected,
-.bs-datepicker-body table td.selected span {
-  color: #fff;
-}
-
-.bs-datepicker-body table td.active {
-  position: relative;
-}
-
-.bs-datepicker-body table td span.active.select-start:after,
-.bs-datepicker-body table td span.active.select-end:after,
-.bs-datepicker-body table td.active.select-start span:after,
-.bs-datepicker-body table td.active.select-end span:after {
-  content: "";
-  display: block;
-  position: absolute;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  transition: 0.3s;
-  top: 0;
-  border-radius: 50%;
-}
-
-.bs-datepicker-body table td:before,
-.bs-datepicker-body table td span:before {
-  content: "";
-  display: block;
-  position: absolute;
-  z-index: -1;
-  top: 6px;
-  bottom: 6px;
-  left: -2px;
-  right: -2px;
-  box-sizing: content-box;
-  background: transparent;
-}
-.bs-datepicker-body table.days span.select-start {
-  z-index: 2;
-}
-
-.bs-datepicker-body table.days td.active:not(.select-start):before,
-.bs-datepicker-body table.days td.in-range:not(.select-start):before,
-.bs-datepicker-body table.days span.active:not(.select-start):before,
-.bs-datepicker-body table.days span.in-range:not(.select-start):before {
-  background: #e9edf0;
-}
-
-.bs-datepicker-body table.days span.is-highlighted.in-range:before,
-.bs-datepicker-body table.days span.in-range.select-end:before {
-  background: none;
-  right: 0;
-  left: 0;
-}
-
-.bs-datepicker-body table td.active.select-start + td.active:before {
-  left: -20%;
-}
-
-.bs-datepicker-body table.days td.select-start + td.select-end:before,
-.bs-datepicker-body table.days td.select-start + td.is-highlighted:before,
-.bs-datepicker-body table.days td.active + td.is-highlighted:before,
-.bs-datepicker-body table.days td.active + td.select-end:before,
-.bs-datepicker-body table.days td.in-range + td.is-highlighted:before,
-.bs-datepicker-body table.days td.in-range + td.select-end:before {
-  background: #e9edf0;
-  width: 100%;
-}
-
-.bs-datepicker-body table tr td:last-child.active:before {
-  border-radius: 0 3px 3px 0;
-  width: 125%;
-  left: -25%;
-}
-
-.bs-datepicker-body table.weeks tr td:nth-child(2).active:before {
-  border-radius: 3px 0 0 3px;
-  left: 0;
-  width: 100%;
-}
-
-.bs-datepicker-body table:not(.weeks) tr td:first-child:before {
-  border-radius: 3px 0 0 3px;
-}
-
-.bs-datepicker-body table td.active.select-start:before {
-  left: 35%;
-}
-
-.bs-datepicker-body table td.active.select-end:before {
-  left: -85%;
-}
-
-.bs-datepicker-body table td span[class*="select-"]
-.bs-datepicker-body table td[class*="select-"] span {
-  border-radius: 50%;
-  color: #fff;
-}
-
-.label-default ~ .bs-datepicker-body table td span.selected,
-.label-default ~ .bs-datepicker-body table td span[class*="select-"]:after,
-.label-default ~ .bs-datepicker-body table td.selected span,
-.label-default ~ .bs-datepicker-body table td[class*="select-"] span:after {
-  background-color: #777;
-}
-
-.label-primary ~ .bs-datepicker-body table td span.selected,
-.label-primary ~ .bs-datepicker-body table td span[class*="select-"]:after,
-.label-primary ~ .bs-datepicker-body table td.selected span,
-.label-primary ~ .bs-datepicker-body table td[class*="select-"] span:after {
-  background-color: #337ab7;
-}
-
-.label-success ~ .bs-datepicker-body table td span.selected,
-.label-success ~ .bs-datepicker-body table td span[class*="select-"]:after,
-.label-success ~ .bs-datepicker-body table td.selected span,
-.label-success ~ .bs-datepicker-body table td[class*="select-"] span:after {
-  background-color: #5cb85c;
-}
-
-.label-danger ~ .bs-datepicker-body table td span.selected,
-.label-danger ~ .bs-datepicker-body table td span[class*="select-"]:after,
-.label-danger ~ .bs-datepicker-body table td.selected span,
-.label-danger ~ .bs-datepicker-body table td[class*="select-"] span:after {
-  background-color: #d9534f;
-}
-
-.label-warning ~ .bs-datepicker-body table td span.selected,
-.label-warning ~ .bs-datepicker-body table td span[class*="select-"]:after,
-.label-warning ~ .bs-datepicker-body table td.selected span,
-.label-warning ~ .bs-datepicker-body table td[class*="select-"] span:after {
-  background-color: #f0ad4e;
-}
-
-.label-info ~ .bs-datepicker-body table td span.selected,
-.label-info ~ .bs-datepicker-body table td span[class*="select-"]:after,
-.label-info ~ .bs-datepicker-body table td.selected span,
-.label-info ~ .bs-datepicker-body table td[class*="select-"] span:after {
-  background-color: #5bc0de;
-}
-
-.label-default ~ .bs-datepicker-body table td.week span {
-  color: #777;
-}
-
-.label-primary ~ .bs-datepicker-body table td.week span {
-  color: #337ab7;
-}
-
-.label-success ~ .bs-datepicker-body table td.week span {
-  color: #5cb85c;
-}
-
-.label-danger ~ .bs-datepicker-body table td.week span {
-  color: #d9534f;
-}
-
-.label-warning ~ .bs-datepicker-body table td.week span {
-  color: #f0ad4e;
-}
-
-.label-info ~ .bs-datepicker-body table td.week span {
-  color: #5bc0de;
-}
-
-.bs-datepicker-body table.months td span,
-.bs-datepicker-body table.years td span {
-  width: 46px;
-  height: 46px;
-  line-height: 45px;
-  margin: 0 auto;
-}
-
-.bs-datepicker-body table.months tr:not(:last-child) td span,
-.bs-datepicker-body table.years tr:not(:last-child) td span {
-  margin-bottom: 8px;
-}
-
-.bs-datepicker.bs-timepicker:after {
-  content: '';
-  display: block;
-  clear: both;
-}
-
-.bs-datepicker.bs-timepicker,
-.bs-datepicker.bs-padding {
-  padding: 15px;
-}
-
-.bs-datepicker.bs-timepicker .bs-datepicker-body {
-  border: 1px solid #eee;
-  float: left;
-}
-
-.bs-datepicker .current-timedate {
-  color: #54708b;
-  font-size: 15px;
-  text-align: center;
-  height: 30px;
-  line-height: 30px;
-  border-radius: 20px;
-  border: 1px solid #eee;
-  margin-bottom: 10px;
-  cursor: pointer;
-  text-transform: uppercase;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-.bs-datepicker .current-timedate span:not(:empty):before {
-  content: "";
-  width: 15px;
-  height: 16px;
-  display: inline-block;
-  margin-right: 4px;
-  vertical-align: text-bottom;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
-}
-
-.bs-timepicker-container {
-  margin-top: 10px;
-  text-align: center;
-}
-
-.bs-timepicker-label {
-  color: #54708b;
-  margin-bottom: 10px;
-}
-
-.bs-timepicker-controls {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
-}
-
-.bs-timepicker-controls button {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 0;
-  background-color: #e9edf0;
-  color: #54708b;
-  font-size: 16px;
-  font-weight: 700;
-  vertical-align: middle;
-  line-height: 0;
-  padding: 0;
-  transition: 0.3s;
-}
-
-.bs-timepicker-controls button:hover {
-  background-color: #d5dadd;
-}
-
-.bs-timepicker-controls input {
-  width: 35px;
-  height: 25px;
-  border-radius: 13px;
-  text-align: center;
-  border: 1px solid #e9edf0;
-}
-
-.bs-timepicker .switch-time-format {
-  text-transform: uppercase;
-  min-width: 54px;
-  height: 25px;
-  border-radius: 20px;
-  border: 1px solid #e9edf0;
-  background: #fff;
-  color: #54708b;
-  font-size: 13px;
-}
-
-.bs-timepicker .switch-time-format img {
-  vertical-align: initial;
-  margin-left: 4px;
-}
-
-.bs-datepicker-multiple {
-  display: inline-block;
-  border-radius: 4px;
-  box-shadow: 0 3px 11px rgba(33, 37, 39, 0.2);
-  background-color: #fff;
-}
-
-.bs-datepicker-multiple .bs-datepicker {
-  box-shadow: none;
-  position: relative;
-}
-
-.bs-datepicker-multiple .bs-datepicker:not(:last-child) {
-  padding-right: 10px;
-}
-
-.bs-datepicker-multiple .bs-datepicker + .bs-datepicker:after {
-  content: "";
-  display: block;
-  width: 14px;
-  height: 10px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
-  position: absolute;
-  top: 25px;
-  left: -8px;
-}
-
-.bs-datepicker-container + .bs-datepicker-btns {
-  border-top: 1px solid #e9edf0;
-}
-
-.bs-datepicker-btns {
-  padding: 10px 0;
-  text-align: right;
-  clear: both;
-  border-top: 1px solid #eee;
-}
-
-.bs-datepicker-btns button {
-  padding: 0 16px;
-  border: 0;
-  border-radius: 15px;
-  height: 30px;
-  color: #54708b;
-  position: relative;
-}
-
-.bs-datepicker-btns button:after {
-  content: "";
-  transition: 0.3s;
-  border-radius: 15px;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.bs-datepicker-btns button span {
-  position: relative;
-  z-index: 1;
-}
-
-.bs-datepicker-btns button.colored {
-  color: #fff;
-}
-
-.bs-datepicker-btns button:not(.colored) {
-  background: transparent;
-}
-
-.bs-datepicker-btns button:not(.colored):hover {
-  text-decoration: underline;
-}
-
-.bs-datepicker-multiple .left {
-  float: left;
-}
-
-.bs-datepicker-multiple .right {
-  float: right;
-}
-
-.bs-datepicker-predefined-btns {
-  padding: 15px;
-}
-
-.bs-datepicker-predefined-btns button {
-  width: 100%;
-  display: block;
-  height: 30px;
-  background-color: #72899f;
-  border-radius: 4px;
-  color: #fff;
-  border: 0;
-  margin-bottom: 10px;
-  padding: 0 18px;
-  text-align: left;
-  transition: 0.3s;
-}
-
-.bs-datepicker-predefined-btns button:active,
-.bs-datepicker-predefined-btns button:hover {
-  background-color: #54708b;
-}
-
-.bs-datepicker .is-other-month {
-  color: rgba(0, 0, 0, 0.25);
-}
-
diff --git a/src/datepicker/bs-datepicker.scss b/src/datepicker/bs-datepicker.scss
new file mode 100644
index 0000000000..4b1e151f21
--- /dev/null
+++ b/src/datepicker/bs-datepicker.scss
@@ -0,0 +1,545 @@
+@import 'utils/scss/variables';
+@import 'utils/scss/mixins';
+
+/* .bs-datepicker */
+.bs-datepicker {
+  display: inline-block;
+  vertical-align: top;
+  min-width: 279px;
+  min-height: 250px;
+  background: $main-bg;
+  box-shadow: 0 10px 20px rgba(84, 112, 139, 0.1);
+  position: relative;
+  z-index: 1;
+
+  &:after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+
+  bs-day-picker {
+    float: left;
+  }
+
+  /* button */
+  button:hover,
+  button:focus,
+  button:active,
+  input:hover,
+  input:focus,
+  input:active,
+  &-btns button:hover,
+  &-btns button:focus,
+  &-btns button:active,
+  &-predefined-btns button:active,
+  &-predefined-btns button:focus {
+    outline: none;
+  }
+
+  /* .bs-datepicker-head */
+  &-head {
+    min-width: 270px;
+    height: 50px;
+    padding: 10px;
+    border-radius: 3px 3px 0 0;
+    text-align: justify;
+
+    &:after {
+      content: "";
+      display: inline-block;
+      vertical-align: top;
+      width: 100%;
+    }
+
+    /* .bs-datepicker-head button */
+    button {
+      display: inline-block;
+      vertical-align: top;
+      padding: 0;
+      height: 30px;
+      line-height: 30px;
+      border: 0;
+      background: transparent;
+      text-align: center;
+      cursor: pointer;
+      color: $font-color-01;
+      transition: 0.3s;
+
+      &.next,
+      &.previous {
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+
+        span {
+          font-size: 28px;
+          line-height: 1;
+          display: inline-block;
+          position: relative;
+          top: -1px;
+        }
+      }
+
+      &.current {
+        border-radius: 15px;
+        max-width: 155px;
+        padding: 0 13px;
+      }
+    }
+
+    /* .bs-datepicker-head.years button.current,
+       .bs-datepicker-head.months button.current */
+    &.years,
+    &.months {
+      button.current {
+        width: 155px;
+        padding: 0;
+      }
+    }
+  }
+
+  &-head,
+  &-btns {
+    button {
+      &:hover,
+      &.colored:hover:after {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+      :active,
+      &.colored:active:after {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+
+  /* .bs-datepicker-body */
+  &-body {
+    padding: 10px;
+    border-radius: 0 0 3px 3px;
+    min-height: 230px;
+    border: 1px solid $border-color;
+
+    .days.weeks {
+      position: relative;
+      z-index: 1;
+    }
+
+    /* .bs-datepicker-body table */
+    table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+
+      th {
+        font-size: 13px;
+        color: $font-color-02;
+        font-weight: 400;
+        text-align: center;
+      }
+
+      td {
+        color: $font-color-03;
+        text-align: center;
+        position: relative;
+        padding: 0;
+
+        span {
+          display: block;
+          margin: 0 auto;
+          font-size: 13px;
+          width: 32px;
+          height: 32px;
+          line-height: 32px;
+          border-radius: 50%;
+          position: relative;
+          /*z-index: 1;*/
+          -moz-user-select: none;
+          -webkit-user-select: none;
+          -ms-user-select: none;
+        }
+
+        &:not(.disabled) span {
+          cursor: pointer;
+        }
+
+        &.is-highlighted:not(.disabled):not(.selected) span,
+        span.is-highlighted:not(.disabled):not(.selected) {
+          background-color: $highlighted;
+          transition: 0s;
+        }
+
+        span.disabled,
+        &.disabled span {
+          color: $font-color-02;
+        }
+
+        span.selected,
+        &.selected span {
+          color: $font-color-01;
+        }
+
+        &.active {
+          position: relative;
+
+          &.select-start:before {
+            left: 35%;
+          }
+
+          &.select-end:before {
+            left: -85%;
+          }
+        }
+
+        span.active.select-start:after,
+        span.active.select-end:after,
+        &.active.select-start span:after,
+        &.active.select-end span:after {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          transition: 0.3s;
+          top: 0;
+          border-radius: 50%;
+        }
+
+        &:before,
+        span:before {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: -1;
+          top: 6px;
+          bottom: 6px;
+          left: -2px;
+          right: -2px;
+          box-sizing: content-box;
+          background: transparent;
+        }
+
+        &.active.select-start + td.active:before {
+          left: -20%;
+        }
+
+        &:last-child.active:before {
+          border-radius: 0 3px 3px 0;
+          width: 125%;
+          left: -25%;
+        }
+
+        span[class*="select-"],
+        &[class*="select-"] span {
+          border-radius: 50%;
+          color: $font-color-01;
+        }
+      }
+
+      /* .bs-datepicker-body table.days */
+      &.days {
+        td,
+        span {
+          &.active:not(.select-start):before,
+          &.in-range:not(.select-start):before {
+            background: $highlighted;
+          }
+        }
+
+        span {
+          &.select-start {
+            z-index: 2;
+          }
+          &.is-highlighted.in-range:before,
+          &.in-range.select-end:before {
+            background: none;
+            right: 0;
+            left: 0;
+          }
+        }
+
+        td {
+          &.select-start + td.select-end:before,
+          &.select-start + td.is-highlighted:before,
+          &.active + td.is-highlighted:before,
+          &.active + td.select-end:before,
+          &.in-range + td.is-highlighted:before,
+          &.in-range + td.select-end:before {
+            background: $highlighted;
+            width: 100%;
+          }
+        }
+      }
+
+      /* .bs-datepicker-body table.weeks */
+      &.weeks {
+        tr {
+          td {
+            &:nth-child(2).active:before {
+              border-radius: 3px 0 0 3px;
+              left: 0;
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      &:not(.weeks) {
+        tr {
+          td{
+            &:first-child:before {
+              border-radius: 3px 0 0 3px;
+            }
+          }
+        }
+      }
+
+      &.months,
+      &.years {
+        td {
+          span {
+            width: 46px;
+            height: 46px;
+            line-height: 45px;
+            margin: 0 auto;
+          }
+        }
+
+        tr:not(:last-child) {
+          td {
+            span {
+              margin-bottom: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* .bs-timepicker */
+  &.bs-timepicker {
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+
+    .bs-datepicker-body {
+      border: 1px solid $border-color;
+      float: left;
+    }
+  }
+
+  &.bs-timepicker,
+  &.bs-padding {
+    padding: 15px;
+  }
+
+  /* .current-timedate */
+  .current-timedate {
+    color: $font-color-03;
+    font-size: 15px;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 20px;
+    border: 1px solid $border-color;
+    margin-bottom: 10px;
+    cursor: pointer;
+    text-transform: uppercase;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+
+    span:not(:empty):before {
+      content: "";
+      width: 15px;
+      height: 16px;
+      display: inline-block;
+      margin-right: 4px;
+      vertical-align: text-bottom;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
+    }
+  }
+
+  /* .bs-datepicker-multiple */
+  &-multiple {
+    display: inline-block;
+    border-radius: 4px;
+    box-shadow: 0 3px 11px rgba(33, 37, 39, 0.2);
+    background-color: $main-bg;
+
+    .bs-datepicker {
+      box-shadow: none;
+      position: relative;
+
+      &:not(:last-child) {
+        padding-right: 10px;
+      }
+
+      & + .bs-datepicker:after {
+        content: "";
+        display: block;
+        width: 14px;
+        height: 10px;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
+        position: absolute;
+        top: 25px;
+        left: -8px;
+      }
+
+      .left {
+        float: left;
+      }
+
+      .right {
+        float: right;
+      }
+    }
+  }
+
+  /* .bs-datepicker-btns */
+  &-container + &-btns {
+    border-top: 1px solid $border-color;
+  }
+
+  &-btns {
+    padding: 10px 0;
+    text-align: right;
+    clear: both;
+    border-top: 1px solid $border-color;
+
+    button {
+      padding: 0 16px;
+      border: 0;
+      border-radius: 15px;
+      height: 30px;
+      color: $font-color-03;
+      position: relative;
+
+      &:after {
+        content: "";
+        transition: 0.3s;
+        border-radius: 15px;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      span {
+        position: relative;
+        z-index: 1;
+      }
+
+      &.colored {
+        color: $font-color-01;
+      }
+
+      &:not(.colored) {
+        background: transparent;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  /* .bs-datepicker-predefined-btns */
+  &-predefined-btns {
+    padding: 15px;
+
+    button {
+      width: 100%;
+      display: block;
+      height: 30px;
+      background-color: $btn-bg2;
+      border-radius: 4px;
+      color: $font-color-01;
+      border: 0;
+      margin-bottom: 10px;
+      padding: 0 18px;
+      text-align: left;
+      transition: 0.3s;
+
+      &:active,
+      &hover {
+        background-color: $btn-bg2-hover;
+      }
+    }
+  }
+
+  /* .is-other-month */
+  .is-other-month {
+    color: rgba(0, 0, 0, 0.25);
+  }
+}
+
+/* .bs-timepicker */
+.bs-timepicker {
+  &-container {
+    text-align: center;
+  }
+
+  &-label {
+    color: $font-color-03;
+    margin-bottom: 10px;
+  }
+
+  &-controls {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 10px;
+
+    button {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      border: 0;
+      background-color: $btn-bg;
+      color: $font-color-03;
+      font-size: 16px;
+      font-weight: 700;
+      vertical-align: middle;
+      line-height: 0;
+      padding: 0;
+      transition: 0.3s;
+
+      &:hover {
+        background-color: $btn-bg-hover;
+      }
+    }
+
+    input {
+      width: 35px;
+      height: 25px;
+      border-radius: 13px;
+      text-align: center;
+      border: 1px solid $border-color;
+    }
+  }
+
+  .switch-time-format {
+    text-transform: uppercase;
+    min-width: 54px;
+    height: 25px;
+    border-radius: 20px;
+    border: 1px solid $border-color;
+    background: $main-bg;
+    color: $font-color-03;
+    font-size: 13px;
+
+    img {
+      vertical-align: initial;
+      margin-left: 4px;
+    }
+  }
+}
+
+/* theming */
+@each $name, $color in $theme-list {
+  @include theming($name, $color);
+}
diff --git a/src/datepicker/themes/bs/bs-datepicker-view.component.ts b/src/datepicker/themes/bs/bs-datepicker-view.component.ts
index e308d2c8a9..4589964b19 100644
--- a/src/datepicker/themes/bs/bs-datepicker-view.component.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-view.component.ts
@@ -8,8 +8,8 @@ import {
   selector: 'bs-datepicker-view',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="bs-datepicker bs-timepicker label-success">
-      <div class="bs-datepicker-head label-success">
+    <div class="bs-datepicker bs-timepicker theme-green">
+      <div class="bs-datepicker-head">
         <bs-datepicker-navigation-view
           *ngFor="let month of months"
           [month]="month"
diff --git a/src/datepicker/utils/scss/mixins.scss b/src/datepicker/utils/scss/mixins.scss
new file mode 100644
index 0000000000..89c7cd247e
--- /dev/null
+++ b/src/datepicker/utils/scss/mixins.scss
@@ -0,0 +1,24 @@
+@mixin theming($name, $color) {
+  .theme-#{$name} {
+    .bs-datepicker-head {
+      background-color: $color;
+    }
+
+    .bs-datepicker-body {
+      table {
+        td {
+          span.selected,
+          &.selected span,
+          span[class*="select-"]:after,
+          &[class*="select-"] span:after {
+            background-color: $color;
+          }
+
+          &.week span {
+            color: $color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/datepicker/utils/scss/variables.scss b/src/datepicker/utils/scss/variables.scss
new file mode 100644
index 0000000000..3d23378a32
--- /dev/null
+++ b/src/datepicker/utils/scss/variables.scss
@@ -0,0 +1,29 @@
+$main-bg:         #fff;
+$font-color-01:   #fff;
+$font-color-02:   #9aaec1;
+$font-color-03:   #54708b;
+
+$border-color:    #e9edf0;
+$highlighted:     #e9edf0;
+
+$btn-bg:          #e9edf0;
+$btn-bg-hover:    #d5dadd;
+
+$btn-bg2:         #9aaec1;
+$btn-bg2-hover:   #54708b;
+
+$theme-gray:      #777;
+$theme-green:     #5cb85c;
+$theme-blue:      #5bc0de;
+$theme-dark-blue: #337ab7;
+$theme-red:       #d9534f;
+$theme-orange:    #f0ad4e;
+
+$theme-list: (
+  'default': $theme-gray,
+  'green': $theme-green,
+  'blue': $theme-blue,
+  'dark-blue': $theme-dark-blue,
+  'red': $theme-red,
+  'orange': $theme-orange,
+);