datepicker style is broken

[creativetimofficial]

datepicker style is broken

[rarestoma]

Hi @Robokishan,

Thank you for working with our products.

This is an issue from our last update, please go to src/assets/scss/angular-differences/plugins/_ng-bootstrap.scss and do the following changes:

1. Add background: #fff; to .ngb-dp-header.
2. At line 88 change ngb-datepicker-month-view to ngb-datepicker-month
3. Add background: #fff; to .ngb-dp-week

Please let me know if it works.

Thank you,
Rares

[chelaruc]

@ostar0816 add this scss code:

ngb-datepicker {
  border-radius: $datepicker-border-radius !important;
  direction: ltr !important;


  &,
  & * {
    outline: none;
  }
  &-rtl {
      direction: rtl;
      &.dropdown-menu {
          left: auto;
      }
      table tr td span {
          float: right;
      }
  }
  top: 0!important;
  left: 0!important;
  padding: $datepicker-dropdown-padding!important;
  @include box-shadow($dropdown-box-shadow);

  .bg-light {
    background: transparent !important;
  }

  &:focus {
    outline: none !important;
  }
  .ngb-dp-header {
    border-bottom: none !important;

    ngb-datepicker-navigation {
      color: $primary;

      .ngb-dp-arrow{
        justify-content: center !important;

        &:hover{
          background: #e9ecef;
          border-radius: .375rem;
        }
      }

      .ngb-dp-arrow-btn {
        margin: 0 !important;
        top: -3px;

        .ngb-dp-navigation-chevron {
          color: $primary;
          width: 6px;
          height: 6px;
        }
      }
      ngb-datepicker-navigation-select {
        .custom-select {
          font-weight: 300;
          color: $primary;
          border: none !important;
          background: transparent !important;
          -webkit-appearance: menulist !important;
          box-shadow: none !important;

          &:hover{
            background: #e9ecef !important;
            border-radius: .375rem;
          }
        }
      }
    }
  }
  .ngb-dp-months {
    ngb-datepicker-month-view {
      .ngb-dp-week {
        border: none;
        .ngb-dp-weekday {
          color: $primary;
          padding-top: 10px;
          opacity: 0.8;
          font-style: normal !important;
          line-height: 20px;
          font-weight: 300;
          width: 36px;
          height: 36px;
          font-size: .875rem;
          transition: all .15s ease;
          text-align: center;
          border: none;
        }
        .small {
          font-size: 14px;
        }
        .ngb-dp-day {
          font-size: .875rem;
          width: 36px;
          height: 36px;
          transition: all .15s ease;
          text-align: center;
          border: none;
          border-radius: 50%;

          .btn-light,
          .custom-day {
            width: 36px;
            height: 36px;
            box-shadow: none;
            color: #525f7f;
            border-radius: 50%;
            align-items: center;
            display: grid;

            &:hover,
            &:active {
              box-shadow: none;
              border: none;
              background-color: transparent;
            }

            &.faded{
              border-radius: 0;
            }
            &.range{
              color: $white;
              &:hover{
                background: #5e72e4;
              }
            }
            &.range-start{
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            &.range-end{
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            }
          }
          &:hover,
          &:active {
            box-shadow: none;
            border: none;
            background-color: transparent;
          }
          .text-muted {
            color: #adb5bd;
          }
        }
      }
    }
  }
}
.datepicker-container {
  input option {
    display: none;
  }
}

.custom-day.range{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: #fff;
  background: #5e72e4;
  box-shadow: none;
  font-size: .875rem;
  width: 36px;
  height: 36px;
  transition: all .15s ease;
  text-align: center;
  border: none;
  border-radius: 50%;

  &.faded{
    border-radius: 0;
  }
}

I'll update the product tomorrow to fix this.

[sasithahtl]

Hi @Robokishan,

Thank you for working with our products.

This is an issue from our last update, please go to src/assets/scss/angular-differences/plugins/_ng-bootstrap.scss and do the following changes:

1. Add background: #fff; to .ngb-dp-header.
2. At line 88 change ngb-datepicker-month-view to ngb-datepicker-month
3. Add background: #fff; to .ngb-dp-week

Please let me know if it works.

Thank you,
Rares

Thank you! this worked.

[chelaruc]

@ostar0816 You need to import our styles.

[ostar0816]

@chelaruc
How to import your styles? I just cloned this repository and thought all required styles are automatically imported to this repo.

[chelaruc]

Check the angular.json file -> styles and tell me what imports you have there.

[ostar0816]

Just same as this repo- https://github.com/creativetimofficial/argon-dashboard-angular/blob/master/angular.json

[ostar0816]

@chelaruc
Need to import external style for plugin components?
The thing is datepicker style works right on your document - https://demos.creative-tim.com/argon-dashboard-angular/#/documentation/datepicker but not on this repo.
For the temporary solution, I inspected the datepicker style from documentation and copied them to style.scss of this project project.

`
ngb-datepicker {
border-radius: .375rem!important;
direction: ltr!important;
top: 0!important;
left: 0!important;
padding: 20px 22px!important;
box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)
}

ngb-datepicker,
ngb-datepicker * {
outline: 0
}

ngb-datepicker-rtl {
direction: rtl
}

ngb-datepicker-rtl.dropdown-menu {
left: auto
}

ngb-datepicker-rtl table tr td span {
float: right
}

ngb-datepicker .bg-light {
background: 0 0!important
}

ngb-datepicker:focus {
outline: 0!important
}

ngb-datepicker .ngb-dp-header {
border-bottom: none!important
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation {
color: #5e72e4
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow {
justify-content: center!important
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow:hover {
background: #e9ecef;
border-radius: .375rem
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow-btn {
margin: 0!important;
top: -3px
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow-btn .ngb-dp-navigation-chevron {
color: #5e72e4;
width: 6px;
height: 6px
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation ngb-datepicker-navigation-select .custom-select {
font-weight: 300;
color: #5e72e4;
border: none!important;
background: 0 0!important;
-webkit-appearance: menulist!important;
box-shadow: none!important
}

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation ngb-datepicker-navigation-select .custom-select:hover {
background: #e9ecef!important;
border-radius: .375rem
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week {
border: none
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-weekday {
color: #5e72e4;
padding-top: 10px;
opacity: .8;
font-style: normal!important;
line-height: 20px;
font-weight: 300;
width: 36px;
height: 36px;
font-size: .875rem;
transition: all .15s ease;
text-align: center;
border: none
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .small {
font-size: 14px
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day {
font-size: .875rem;
width: 36px;
height: 36px;
transition: all .15s ease;
text-align: center;
border: none;
border-radius: 50%
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day {
width: 36px;
height: 36px;
box-shadow: none;
color: #525f7f;
border-radius: 50%;
align-items: center;
display: grid
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light:active,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light:hover,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day:active,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day:hover {
box-shadow: none;
border: none;
background-color: transparent
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.faded,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.faded {
border-radius: 0
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range {
color: #fff
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range:hover,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range:hover {
background: #5e72e4
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range-start,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range-start {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range-end,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range-end {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day:active,
ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day:hover {
box-shadow: none;
border: none;
background-color: transparent
}

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .text-muted {
color: #adb5bd
}

.datepicker-container input option {
display: none
}

.custom-day.range {
color: #fff;
background: #5e72e4;
box-shadow: none;
font-size: .875rem;
width: 36px;
height: 36px;
transition: all .15s ease;
text-align: center;
border: none;
border-radius: 50%
}

.custom-day.range.faded {
border-radius: 0
}
`

But I don't think it's an ideal solution and I believe these kind of styles should be included by default without any additional actions.

[ostar0816]

I already did that :)
I will look forward to the product update. This is really amazing light-weighted dashboard. I love this!
Thanks a lot

[bielas]

@chelaruc can you update also this issue when you update the repo?

[bielas]

hey guys, when are you going to fix this?

[chelaruc]

Hi, @bielas! Can you download the product again?

[Robokishan]

i am still having a problem. steps i used
1 . git clone the repo
2. npm install in directory
3. npm start
4. copy and paste code from the documentation https://demos.creative-tim.com/argon-dashboard-angular/#/documentation/datepicker
5. but still same as mentioned in first pic of this post