Vue2-datepicker: Hide year navigation from datepicker

[antoniogiroz]

Hi!
How can I hide the year navigation arrows from datepicker, but not in year and moth pickers?

Remove from here:

But not from here:

Thanks!

[mengxiong10]

You can use the panel-change prop to do it.

<date-picker @panel-change="handlePanelChange" v-model="value" lang="en" ></date-picker>

handlePanelChange (panel, oldPanel) {
  if (panel === 'DATE') {
    document.querySelector('.mx-icon-last-year').style.display = 'none'
    document.querySelector('.mx-icon-next-year').style.display = 'none'
  } else if (panel !== 'TIME') {
    document.querySelector('.mx-icon-last-year').style.display = 'block'
    document.querySelector('.mx-icon-next-year').style.display = 'block'
  }
}

[antoniogiroz]

This solution doesn't work if there are various datepicker elements.

[doctorsirius]

Would be easier, even for CSS styling, if the component would add an attribute or class to the parent element mx-calendar indicating the different modes; date, year, month, time.

[mengxiong10]

Yes, add class will be better.
I'll do it later.
@algil Now it can work by adding different ids.

<date-picker id="datepicker" @panel-change="handlePanelChange" v-model="value" lang="en" ></date-picker>

handlePanelChange (panel, oldPanel) {
  const datepicker = document.getElementById('datepicker');
  if (panel === 'DATE') {
    datepicker.querySelector('.mx-icon-last-year').style.display = 'none'
    datepicker.querySelector('.mx-icon-next-year').style.display = 'none'
  } else if (panel !== 'TIME') {
    datepicker.querySelector('.mx-icon-last-year').style.display = 'block'
    datepicker.querySelector('.mx-icon-next-year').style.display = 'block'
  }
}

[doctorsirius]

Any hope we can see mode classes anytime soon? Btw, another good thing for styling would be allow to specify a class to the confirmation button, so you can take approach of your own button classes (very common; like btn-primary, and so) instead of repeat styles.

[mengxiong10]

v2.7.0
add the class .mx-calendar-panel-date, .mx-calendar-panel-year ...
@algil
You can use a css to do this.

.mx-calendar-panel-date .mx-icon-last-year,
.mx-calendar-panel-date .mx-icon-next-year {
  display: none;
}

[mengxiong10]

@doctorsirius
You can use the footer slot.

<date-picker>
   <template slot="footer" slot-scope="{ confirm }>
      <button type="button"
            class="btn-primary"
            @click="confirm">OK</button>
  </template>
</date-picker>

[doctorsirius]

Cool! Thanks!

[mhdyahiya]

Thanks, @mengxiong10

[FPTSonPM3]

I want to install like this for the red circle - change it to the previous month and the next month, thanks to everyone for help

[mengxiong10]

@FPTSonPM3
use css.

.mx-calendar-panel-year .mx-icon-double-right::before,
.mx-calendar-panel-year .mx-icon-double-left::before {
  display: none;
}

[FPTSonPM3]

I'm trying css for the header, is there any way to customize the number for the switch to the previous month, the switch to the next month?