A lightweight, powerful javascript datetime picker
95
{
"context": "This criteria evaluates how well the engineer uses flatpickr's dynamic configuration capabilities, specifically the set() method, to update date picker options at runtime. The focus is on proper initialization, using set() to modify configuration options, and understanding which flatpickr options control different features.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Flatpickr initialization",
"description": "Uses flatpickr() constructor or factory function to create a date picker instance on the input element with initial configuration including dateFormat option set to 'Y-m-d'",
"max_score": 15
},
{
"name": "Instance access",
"description": "Stores and returns the flatpickr instance reference for later manipulation, enabling dynamic configuration changes",
"max_score": 10
},
{
"name": "set() method usage",
"description": "Uses the flatpickr instance's set() method to dynamically update configuration options after initialization (not recreating the instance or using other methods)",
"max_score": 25
},
{
"name": "dateFormat option",
"description": "Correctly uses the 'dateFormat' option with set() to change the display format (e.g., set('dateFormat', 'F j, Y') or set('dateFormat', 'm/d/Y'))",
"max_score": 15
},
{
"name": "weekNumbers option",
"description": "Correctly uses the 'weekNumbers' option with set() to toggle week number display (e.g., set('weekNumbers', true) or set('weekNumbers', false))",
"max_score": 10
},
{
"name": "enableTime option",
"description": "Correctly uses the 'enableTime' option with set() to toggle the time picker (e.g., set('enableTime', true) or set('enableTime', false))",
"max_score": 10
},
{
"name": "minDate option",
"description": "Correctly uses the 'minDate' option with set() to establish minimum date constraints (e.g., set('minDate', dateValue))",
"max_score": 5
},
{
"name": "maxDate option",
"description": "Correctly uses the 'maxDate' option with set() to establish maximum date constraints (e.g., set('maxDate', dateValue))",
"max_score": 5
},
{
"name": "Multiple options update",
"description": "Demonstrates ability to update multiple options simultaneously using set() with an object (e.g., set({ minDate: date1, maxDate: date2 })) when implementing setDateRange",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-flatpickrevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10