search

charliekassel / vuejs-datepicker

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
MIT License
2.61k stars 730 forks source link

Custom HTML for next and prev button #839

Open ngocsangyem opened 3 years ago

ngocsangyem commented 3 years ago

Is it possible to custom the HTML of the next and prev button?

Asef00 commented 2 years ago

I didn't find any prop or option for this. But you can use the CSS content property:

.vdp-datepicker header {
  .prev:after,
  .next:after {
      content: "";
      width: 10px;
      height: 10px;
      display: inline-block;

      border-color: $primary-color;
      border-style: solid;
      border-width: 0.15em 0.15em 0 0;
      border-radius: 1px;

      position: absolute;
      top: calc(50% - 5px);
      left: calc(50% - 5px);
      margin: 0;
  }

  .prev:after {
      transform: rotate(-135deg);
  }
  .next:after {
      transform: rotate(45deg);
  }
}

image