Bootstrap 4 support

[sagikazarmark]

With bootstrap 4 is coming do you plan to provide an SCSS version?

[hebbet]

sure. will discuss that with @acrobat in a few days

[sagikazarmark]

Awesome :+1:

[acrobat]

Yes that's something we definitely want to support, but I think we have to move to a 2.0 version then. That way we can drop BS2.0 support (possibly but that's not a must) but we have to refactor the styling of the datepicker that we can implement themes. So we can support multiple frontend frameworks (and different versions) but also different custom styles.

I will add it to the 2.0 milestone, but we have to still discuss how we are going approach the 2.0 release (which features, full refactor, code cleanup, etc)

[hebbet]

mail will follow tonight or tomorrow night @acrobat

[trinzia]

@hebbet I can assist with the bootstrap4 scss files if needed, especially try to reduce the length of the current css selectors, which are overlong.

[toscan]

Is the latest version working with bootstrap4?

[acrobat]

Looks like the styling is ok with v4-alpha2 http://jsfiddle.net/zcvq0yhh/31/. But this is a bit of an issue with the font-size it seems. But that something that you could fix in your code when using the datepicker with twbs4 alpha (2)

Official support in the datepicker should come when bootstrap v4 is stable

[hebbet]

i follow the development of BS v4 on github. there are lots of changes in the current alpha and i don't think it using BSv4 alpha for any project yet.

they are also discussing various changes at the moment, some of them might be "breaking changes" to the current alpha.

[toscan]

Ok! Thanks a lot

[niftylettuce]

+1

[Azaret]

Yeah, Bootstrap 4 is moving slowly and is kind of breaking things up every update so there is no rush for us to add support. That being said, 2.0 will brings an ease to support any theme/html-css library, so any one will be welcome to create a support for it. For me at least, and the guys on the core team think the same I think, I won't add support until a stable release, but we'll make things easy for anyone to add it. Promise.

[karolyi]

+1 here, waiting eagerly for the bootstrap v4 SCSS version.

[karolyi]

so, this happens if you can't wait, I just translated and adjusted the whole thing to the current V4 bootstrap. pasting it here, do what you will with it, compiles with node-sass (I'm using it):

// @import "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone";

$datepicker-color: $btn-info-color;
$datepicker-bg: $btn-info-bg;
$datepicker-border: $btn-info-border;

.datepicker {
  padding: 4px;

  @include border-radius($input-border-radius);

  &-inline {
    width: 220px;
  }

  direction: ltr;

  &-rtl {
    direction: rtl;

    table tr td span {
      float: right;
    }
  }

  &-dropdown {
    top: 0;
    left: 0;

    &:before {
      content: '';
      display: inline-block;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid $gray-light;
      border-top: 0;
      border-bottom-color: rgba(0, 0, 0, 0.2);
      position: absolute;
    }

    &:after {
      content: '';
      display: inline-block;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid $white;
      border-top: 0;
      position: absolute;
    }

    &.datepicker-orient-left:before {
      left: 6px;
    }

    &.datepicker-orient-left:after {
      left: 7px;
    }

    &.datepicker-orient-right:before {
      right: 6px;
    }

    &.datepicker-orient-right:after {
      right: 7px;
    }

    &.datepicker-orient-bottom:before {
      top: -7px;
    }

    &.datepicker-orient-bottom:after {
      top: -6px;
    }

    &.datepicker-orient-top:before {
      bottom: -7px;
      border-bottom: 0;
      border-top: 7px solid $gray-light;
    }

    &.datepicker-orient-top:after {
      bottom: -6px;
      border-bottom: 0;
      border-top: 6px solid $white;
    }
  }

  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;
  }

  td, th {
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;

    @include border-radius($input-border-radius);

    border: none;
  }

  // Inline display inside a table presents some problems with
  // border and background colors.
  .table-striped & table tr {
    td, th {
      background-color: transparent;
    }
  }

  table tr td {
    &.day:hover,
    &.day.focused {
      background: $gray-lighter;
      cursor: pointer;
    }

    &.old,
    &.new {
      color: $gray-light;
    }

    &.disabled,
    &.disabled:hover {
      background: none;
      color: $gray-light;
      cursor: default;
    }

    &.highlighted {
      background: $btn-info-bg;
      border-radius: 0;
    }

    &.today,
    &.today:hover,
    &.today.disabled,
    &.today.disabled:hover {
      $datepicker-today-bg: lighten($orange, 30%);

      @include button-variant($btn-warning-color, $datepicker-today-bg, $btn-warning-border);

      color: #000;
    }

    &.today:hover:hover {
      // Thank bootstrap 2.0 for this selector...
      // TODO: Bump min BS to 2.1, use @textColor in buttonBackground above
      color: #000;
    }

    &.today.active:hover {
      color: #fff;
    }

    &.range,
    &.range:hover,
    &.range.disabled,
    &.range.disabled:hover {
      background: $gray-lighter;

      @include border-radius($input-border-radius);
    }

    &.range.today,
    &.range.today:hover,
    &.range.today.disabled,
    &.range.today.disabled:hover {
      $datepicker-range-today-bg: mix($orange, $gray-lighter, 50%);

      @include button-variant($btn-warning-color, $datepicker-range-today-bg, $btn-warning-border);
      @include border-radius($input-border-radius);
    }

    &.selected,
    &.selected:hover,
    &.selected.disabled,
    &.selected.disabled:hover {
      @include button-variant(lighten($gray-light, 10), darken($gray-light, 10), darken($gray-light, 20));

      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

    &.active,
    &.active:hover,
    &.active.disabled,
    &.active.disabled:hover {
      @include button-variant($datepicker-color, $datepicker-bg, $datepicker-border);

      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

    span {
      display: block;
      width: 23%;
      height: 54px;
      line-height: 54px;
      float: left;
      margin: 1%;
      cursor: pointer;

      @include border-radius($input-border-radius);

      &:hover,
      &.focused {
        background: $gray-lighter;
      }

      &.disabled,
      &.disabled:hover {
        background: none;
        color: $gray-light;
        cursor: default;
      }

      &.active,
      &.active:hover,
      &.active.disabled,
      &.active.disabled:hover {
        @include button-variant($datepicker-color, $datepicker-bg, $datepicker-border);

        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      }

      &.old,
      &.new {
        color: $gray-light;
      }
    }
  }

  .datepicker-switch {
    width: 145px;
  }

  .datepicker-switch,
  .prev,
  .next,
  tfoot tr th {
    cursor: pointer;

    &:hover {
      background: $gray-lighter;
    }
  }

  // Basic styling for calendar-week cells
  .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle;
  }
}

.input-append,
.input-prepend {
  &.date .add-on {
    cursor: pointer;

    i {
      margin-top: 3px;
    }
  }
}

.input-daterange {
  input {
    text-align: center;
  }

  input:first-child {
    @include border-left-radius($input-border-radius);
  }

  input:last-child {
    @include border-right-radius($input-border-radius);
  }

  .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    height: $line-height-base;
    padding: 4px 5px;
    font-weight: normal;
    line-height: $line-height-base;
    text-align: center;
    text-shadow: 0 1px 0 $white;
    vertical-align: middle;
    background-color: $gray-lighter;
    border: 1px solid #ccc;
    margin-left: -5px;
    margin-right: -5px;
  }
}

it would be nice to completely remove the pixel (px values) as bootstrap's approach is to size everything to rem , which is relative to the current font size, and is more responsive.