[question] cannot get styling locally on calendar, timepicker popups

[dukehoops-zz]

After following quick start steps in docs (as well as adding Font Awesome) I cannot get proper styling to appear on timepicker and calendar popups. Instead day and hour/min selectors render as bordered buttons. Which CSS file (or JS?) - though it does work correctly on plunker demos. need help tracking down what's missing. which css/js file(s) are responsible for this styling?

thank you,
-nikita

[mgcrea]

Some CSS style is required for your date pickers to look like the docs:

.datepicker.dropdown-menu {
  width: 250px;
  height: 250px;
  button {
    outline: none;
    border: 0px;
  }
  tbody {
    height: 180px;
  }
  tbody button {
    padding: 6px;
  }
  &.datepicker-mode-1, &.datepicker-mode-2 {
    tbody button {
      height: 65px;
    }
  }
}

.timepicker.dropdown-menu {
  padding: 0 4px;
  button {
    outline: none;
    border: 0px;
  }
  tbody button {
    padding: 6px;
  }
}

I'll add it to the docs.

[sche]

Hi,
After adding these styles my datepicker/timepicker still has borders and doesn't look like in examples page. I try v2.0.0-rc.3

[asgeo1]

The styles work OK for me. Just make sure you add them to a SCSS / SASS file - it's not CSS.

[k-funk]

Is this in the docs yet? Didn't see any custom css in there.

[loranger]

I also miss this extra-styles stylesheet.
And CSS would really be better than pre-processored styles.

[cmplank]

I would really appreciate seeing this in the docs.

[nkpz]

Here's the compiled scss for those wanting pure css:

.datepicker.dropdown-menu {
  width: 250px;
  height: 250px;
}
.datepicker.dropdown-menu button {
  outline: none;
  border: 0px;
}
.datepicker.dropdown-menu tbody {
  height: 180px;
}
.datepicker.dropdown-menu tbody button {
  padding: 6px;
}
.datepicker.dropdown-menu.datepicker-mode-1 tbody button, .datepicker.dropdown-menu.datepicker-mode-2 tbody button {
  height: 65px;
}

.timepicker.dropdown-menu {
  padding: 0 4px;
}
.timepicker.dropdown-menu button {
  outline: none;
  border: 0px;
}
.timepicker.dropdown-menu tbody button {
  padding: 6px;
}

[wigggins]

@nnjpp Thanks a ton for this. Needed it quick for a project and you just happened to have posted it 3 hours ago.

[phillycoder]

@nnjpp css works fine, but still current date is not highlighted . Even in the demo site it's not highlighted, is there a option i am missing?

[mgcrea]

Landed in a1720d5.

[dara0418]

Well this style never work for me. The datepicker keeps the default style, don't know why. I've imported my less file to the index page.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.