{"version":"1.0","type":"rich","title":"DatePicker","description":"A React-based date picker component that supports both single-date selection and date-range selection. The DatePicker button displays the selected date or date range, and clicking it opens a modal dialog containing an interactive calendar. The calendar is built with date-fns utilities and displays a month grid with weekday headers, highlighting today, selected dates, and range intervals. Users can navigate between months and select dates, with validation against optional min and max date constraints. The range picker shows a continuous highlighted range between the start and end dates, with distinct styling for the range endpoints.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-2d9994ed5b47ca45c8a8b306cb86af2c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}