如何在 datepicker vuetify 上添加描述？

Posted 2023-02-22

【中文标题】如何在 datepicker vuetify 上添加描述？

【英文标题】：How can I add description on datepicker vuetify?

【发布时间】：2020-02-21 11:39:22

【问题描述】：

我的代码是这样的：

   <v-dialog
      ref="dialog"
      v-model="modal"
      :return-value.sync="date"
      persistent
      

    >
      <template v-slot:activator=" on ">
        <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
      </template>
      <v-card :loading="loading">
      <v-date-picker v-model="date" scrollable>
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
        <v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
      </v-date-picker></v-card>
    </v-dialog>

我的代码笔就像this

我想像这样在datepicker 添加可用和不可用的信息：

我该怎么做？

【问题讨论】：

我会尝试复制它。

【参考方案1】：

是的，可以在底部添加文字

工作代码笔在这里：https://codepen.io/chansv/pen/gOOLPqp?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="12" sm="6" md="4">
        <v-dialog
          ref="dialog"
          v-model="modal"
          :return-value.sync="date"
          persistent
          

        >
          <template v-slot:activator=" on ">
            <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
          </template>
          <v-card :loading="loading">
          <v-date-picker v-model="date" scrollable>
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
            <v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
          </v-date-picker></v-card>
        </v-dialog>
      </v-col>

    </v-row>
  </v-app>
</div>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: () => (
    date: new Date().toISOString().substr(0, 10),
    modal: false,
    loading: false,
    footer: false,
  ),

  methods: 
    test () 

      console.log('test')
      this.loading = true;


      var self  = this;
      setTimeout(() =>
        self.loading = false;
        self.setFooter();
      
                 , 2000)
    ,
    setFooter() 
      if (!this.footer) 
        var div = document.createElement('div');
    var html = "<span><div style='float:left;height: 20px; width: 20px; border-radius: 10px; background-color: green;'></div></span><span style='margin-left: 10px; float: left;'>Available</span><span><div style='float:left;height: 20px; width: 20px; border-radius: 10px; background-color: black; margin-left:10px;'></div></span><span style='margin-left: 10px; float:left;'>Unavailable</span>";
  div.innerHTML = html;
    document.querySelector('.v-date-picker-table').append(div);
        this.footer = true;
      


    ,
  ,
)

【参考方案2】：

您非常接近这样做，只需在 v-date-picker 中创建自己的容器（您必须设置自己的样式以正确定位所有内容）

<v-dialog
    ref="dialog"
    v-model="modal"
    :return-value.sync="date"
    persistent
    >
    <template v-slot:activator=" on ">
        <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
    </template>
    <v-card :loading="loading">
        <v-date-picker v-model="date" scrollable>
            <div>
                <div>Hello</div>
                <v-spacer/>
                <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
                <v-btn text color="primary"
                        @click="$refs.dialog.save(date)">OK</v-btn>
            </div>
        </v-date-picker>
    </v-card>
</v-dialog>

【参考方案3】：

您还可以在v-date-picker 上使用@input，并且当您的值基于此更改时，您可以附加div。

您可以在这里查看工作中的codepen 演示。

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: () => (
    date: new Date().toISOString().substr(0, 10),
    modal: false,
    loading: false
  ),

  methods: 
    test() 
      console.log('test')
      this.loading = true
      var self = this;
      setTimeout(() => (self.loading = false), 2000)
    ,
    onInputValue(val, e) 
      $('div.custom_data_msg').remove();
      $(this.$refs.datepicker.$el).find('div.v-date-picker-table').after(`<div class="custom_data_msg">$val</div>`);
    
  ,
)

<v-date-picker ref="datepicker" v-on:input="onInputValue($event,event)" v-model="date" scrollable>
  <v-spacer></v-spacer>
  <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
  <v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>

【讨论】：

您的 codepen 未按答案codepen.io/narendrajadhav/pen/QWWvJjg中的预期工作

@chans OP 需要逻辑，如何实现。所以我认为它很满足。 Op 只需要输入基于逻辑的条件