Mobile UI Components library built on Vue 3 with 100+ components
74
{
"context": "This evaluation assesses how effectively the engineer uses the Vant DatePicker component to implement a date selection interface with future date filtering. The focus is on correct usage of the DatePicker API, including component import, state management, date filtering, and event handling.",
"type": "weighted_checklist",
"checklist": [
{
"name": "DatePicker Import",
"description": "Correctly imports the DatePicker component from the vant package (e.g., import { DatePicker } from 'vant' or using van-date-picker)",
"max_score": 10
},
{
"name": "DatePicker Usage",
"description": "Uses the DatePicker component in the template with appropriate v-model binding to track the selected date value",
"max_score": 20
},
{
"name": "Visibility Control",
"description": "Implements show/visible state control for the DatePicker using v-model:show or similar visibility prop to open and close the picker",
"max_score": 15
},
{
"name": "Date Filtering",
"description": "Implements the filter prop or min-date prop to prevent selection of today and past dates, ensuring only future dates (tomorrow onwards) are selectable",
"max_score": 25
},
{
"name": "Confirm Event Handling",
"description": "Handles the confirm event (@confirm or onConfirm) to capture the selected date and close the picker when the user confirms their selection",
"max_score": 20
},
{
"name": "Date Display",
"description": "Properly displays the selected date from the DatePicker in YYYY-MM-DD format or shows appropriate placeholder text when no date is selected",
"max_score": 10
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-vantdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10