Appointment Date Selector

Build a Vue 3 component that allows users to select a future appointment date using a mobile-friendly date picker.

Requirements

Create a date selection interface with these features:

1. Date Picker Display: Show a button that opens a date picker interface when clicked
2. Future Dates Only: Only allow selection of dates from tomorrow onwards (exclude today and past dates)
3. Selected Date Display: Display the selected date in YYYY-MM-DD format, or show "No date selected" if no date has been chosen
4. Picker Closure: The date picker should close automatically after the user confirms their selection

Implementation Details

• Create an AppointmentScheduler.vue component
• Use Vue 3 Composition API with <script setup> syntax
• The date picker should be controlled (opens/closes based on component state)

Test Cases

• Clicking the selection button opens the date picker @test
• Today and past dates are not selectable in the picker @test
• Confirming a date selection displays the selected date in YYYY-MM-DD format @test
• The date picker closes after confirming a selection @test

Implementation

@generates

API

// AppointmentScheduler.vue component
// Exports a Vue component with date selection functionality

Dependencies { .dependencies }

vant { .dependency }

Mobile UI component library providing the DatePicker component for date selection.