我如何在Datepicker上禁用标头年份?

时间:2019-11-02 12:01:35

标签: vue.js vuejs2 datepicker vue-component

演示和完整代码:https://codepen.io/positivethinking639/pen/LYYejLM

如果我使用这个:

tools.sort_out_files

有效。但它也会禁用年份-月份

我要启用此功能:

enter image description here

并禁用此:

enter image description here

我该怎么办?

1 个答案:

答案 0 :(得分:1)

是的,可以仅使用js禁用年份

在这里,我在安装的挂钩中添加了一段代码,一旦呈现完整的html,就会触发该挂钩

  

此处工作的Codepen:https://codepen.io/chansv/pen/NWWyNwX?editors=1010

    <div id="app">
      <v-app id="inspire">
        <v-row justify="center">
          <v-date-picker v-model="picker" no-title></v-date-picker>
        </v-row>
      </v-app>
    </div>

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker: new Date().toISOString().substr(0, 10),
    }
  },
  mounted() {
    // Select the node that will be observed for mutations
    var targetNode = document.querySelector('.v-picker__body');
    // Options for the observer (which mutations to observe)
    var config = { attributes: true, childList: true };

    // Callback function to execute when mutations are observed
    var callback = function(mutationsList) {
        for(var mutation of mutationsList) {
            if (mutation.type == 'childList') {
              var headerBtn = document.querySelector('.accent--text > button');
              if (headerBtn.innerHTML.length == 4) {
                headerBtn.disabled = true;
                headerBtn.style.cursor = 'default';
                document.querySelectorAll('.v-date-picker-header > button').forEach(x => {
                  x.disabled = true;
                  x.style.cursor = 'default';
                });
              } else {
                document.querySelectorAll('.v-date-picker-header > button').forEach(x => {
                  x.disabled = false;
                  x.style.cursor = 'pointer';
                });
              }
            }
            else if (mutation.type == 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    };

    // Create an observer instance linked to the callback function
    var observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
  }
})