[Bug Report][3.5.6] VDatePicker display-value not displaying value

JessieVela commented 4 months ago

Environment

Vuetify Version: 3.5.6 Vue Version: 3.4.21 Browsers: Chrome 121.0.0.0 OS: Windows 10

Steps to reproduce

Create v-date-picker and set a value for display-value.
Change date and observe display-value is not showing.

Expected Behavior

Expected for display-value to override the display of v-date-picker.

Actual Behavior

Displays the date selected. If multiple prop is set to range then the total of dates are show.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

In vuetify 2 we were able to use selected-items-text to display a different date value.

alexkunin commented 4 months ago

You can use header slot to override that text. Not sure if this is the best option (and if the following is the best way to use it), but it works:

<v-date-picker multiple="range">
  <template v-slot:header>
    <div class="v-date-picker-header">
      <div class="v-date-picker-header__content">Custom text</div>
    </div>
  </template>
</v-date-picker>

Playground.

But of course, this replaces header unconditionally, i.e. you need to display selected date or range manually if you still want it to be there.

JessieVela commented 4 months ago

Thank you that will work for me. Playground

vuetifyjs / vuetify