CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vant

Mobile UI Components library built on Vue 3 with 100+ components

74

1.07x
Overview
Eval results
Files

task.mdevals/scenario-8/

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.

Install with Tessl CLI

npx tessl i tessl/npm-vant

tile.json