[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fdatepicker":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":364,"links":365,"dates":414},"\u002Fexamples\u002Fcomponents\u002Fdatepicker","collection","components",true,{"example_count":9,"app_count":10},167,97,{"id":12,"title":13,"description":14},184,"Datepicker","See how interfaces present dates for selection. Explore calendar layouts, month navigation, and selected states within date pickers used in forms and filters.",{"title":16,"description":17,"og_image":18},"Datepicker UI examples - Nicelydone","Datepicker UI design examples from SaaS apps. See how interfaces present dates for selection. Explore calendar layouts, month navigation, and selected…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b59054c-e921-4aa7-86de-e304a715613f.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Datepicker UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Datepicker UI design examples from SaaS apps. See how interfaces present dates for selection. Explore calendar layouts, month navigation, and selected states within date pickers used in forms and filters.",[32],{"title":33,"description":14,"links":34},"About Datepicker",[],[36],"167 UI components",[38,72,105,134,152,173,206,231,260,288,312,335],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"c18a8445-618f-4612-a634-6d52b66d211d","Airbnb UI component","A modal dialog displaying a date picker with calendar views for May and June 2026, offering exact or flexible date selection options for a booking search.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents",1856,1491,"UI component from Airbnb","component",[48],{"id":12,"title":13,"slug":49},"datepicker",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[56,60,64,68],{"id":57,"title":58,"slug":59},5,"Travel","travel",{"id":61,"title":62,"slug":63},12,"Hospitality","hospitality",{"id":65,"title":66,"slug":67},17,"Peer to peer","peer-to-peer",{"id":69,"title":70,"slug":71},18,"Marketplace","marketplace",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"68864f3c-f720-4e12-aebe-fd3ace77dade","Axiom UI component","A modal dialog for selecting a date and time range with predefined quick options and custom date inputs.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5fed0b14-ace3-44c3-b843-ec4d3a594b46.png",756,1059,"UI component from Axiom",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[89,93,97,101],{"id":90,"title":91,"slug":92},46,"Analytics","analytics",{"id":94,"title":95,"slug":96},57,"Big data","big-data",{"id":98,"title":99,"slug":100},16,"Monitoring","monitoring",{"id":102,"title":103,"slug":104},48,"Developer Tools","developer-tools",{"uuid":106,"title":107,"description":108,"canonical_path":109,"image":110,"width":111,"height":112,"image_alt":113,"kind":46,"categories":114,"app":116},"1e04c898-1b36-4d50-8ac1-fd9bd12d146a","Lithic UI component","A modal dialog displaying a date and time picker with a calendar view, hour and minute selectors, and an AM\u002FPM toggle.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F69aa64a8-4878-495f-996b-75a8c6b234d4.png",1136,900,"UI component from Lithic",[115],{"id":12,"title":13,"slug":49},{"slug":117,"title":118,"logo":119,"baseline":120,"categories":121},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[122,126,130],{"id":123,"title":124,"slug":125},36,"Finance","finance",{"id":127,"title":128,"slug":129},39,"Payments","payments",{"id":131,"title":132,"slug":133},37,"Developer APIs","developer-apis",{"uuid":135,"title":136,"description":137,"canonical_path":138,"image":139,"width":140,"height":141,"image_alt":142,"kind":46,"categories":143,"app":145},"6bbb64a0-bce2-47ee-b611-aa466047fe64","Date Range Filter Menu","Nested popover presenting preset date ranges for transaction filtering","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb8bdd848-5df5-467e-af47-065f97120ecc.png",1973,1208,"Date Range Filter Menu from Copilot",[144],{"id":12,"title":13,"slug":49},{"slug":146,"title":147,"logo":148,"baseline":149,"categories":150},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[151],{"id":123,"title":124,"slug":125},{"uuid":153,"title":154,"description":155,"canonical_path":156,"image":157,"width":158,"height":159,"image_alt":160,"kind":46,"categories":161,"app":163},"7116659d-d191-4768-bcd8-74da2b2fc165","Aboard UI component","A calendar date picker displaying the month of July 2026 with navigation arrows.","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F741847d1-5cc8-428d-a0c4-3959840be452.png",673,737,"UI component from Aboard",[162],{"id":12,"title":13,"slug":49},{"slug":164,"title":165,"logo":166,"baseline":167,"categories":168},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[169],{"id":170,"title":171,"slug":172},10,"Human resources","human-resources",{"uuid":174,"title":175,"description":176,"canonical_path":177,"image":178,"width":179,"height":180,"image_alt":181,"kind":46,"categories":182,"app":184},"a2221211-84c1-4548-b815-81ffcfbc4141","Navattic UI component","A date range selection interface featuring a dropdown menu for relative periods and a calendar for specific date selection.","\u002Fexamples\u002Fapps\u002Fnavattic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F769dcce9-9b0a-4448-8bf0-4007a100e825.png",967,766,"UI component from Navattic",[183],{"id":12,"title":13,"slug":49},{"slug":185,"title":186,"logo":187,"baseline":188,"categories":189},"navattic","Navattic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd26bd2f9-ee1e-4acc-9d41-1890fbd1b5c4.png","Make buying easier with demos",[190,194,198,202],{"id":191,"title":192,"slug":193},25,"Marketing","marketing",{"id":195,"title":196,"slug":197},80,"Artificial Intelligence","artificial-intelligence",{"id":199,"title":200,"slug":201},96,"No code","no-code",{"id":203,"title":204,"slug":205},103,"Demo Automation","demo-automation",{"uuid":207,"title":208,"description":209,"canonical_path":210,"image":211,"width":212,"height":213,"image_alt":214,"kind":46,"categories":215,"app":217},"d1f4dc85-0081-440a-aa47-6b778ed2d371","Missive UI component","A dropdown menu for selecting a start date and time, featuring quick selection options, a search bar, and custom input fields.","\u002Fexamples\u002Fapps\u002Fmissive\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F43bb0272-affb-4486-81d5-0a3a53e945f7.png",751,1021,"UI component from Missive",[216],{"id":12,"title":13,"slug":49},{"slug":218,"title":219,"logo":220,"baseline":221,"categories":222},"missive","Missive","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmissive-3771692f.png","Team email, chat & tasks",[223,227],{"id":224,"title":225,"slug":226},23,"Collaboration","collaboration",{"id":228,"title":229,"slug":230},92,"Email","email",{"uuid":232,"title":233,"description":234,"canonical_path":235,"image":236,"width":237,"height":238,"image_alt":239,"kind":46,"categories":240,"app":242},"e33797d0-ec6c-4e53-9426-3c4eb3a81623","Chatwoot UI component","A modal dialog for selecting a date range using a calendar and preset options.","\u002Fexamples\u002Fapps\u002Fchatwoot\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1af4bd2a-d0d6-4521-8090-439e96433766.png",1895,1154,"UI component from Chatwoot",[241],{"id":12,"title":13,"slug":49},{"slug":243,"title":244,"logo":245,"baseline":246,"categories":247},"chatwoot","Chatwoot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8a760d18-89b8-4b6e-bb53-ab1e430b5b73.png","The modern customer support tool for your business",[248,252,256],{"id":249,"title":250,"slug":251},22,"Knowledge Management","knowledge-management",{"id":253,"title":254,"slug":255},45,"Open Source","open-source",{"id":257,"title":258,"slug":259},47,"Customer Service","customer-service",{"uuid":261,"title":262,"description":263,"canonical_path":264,"image":265,"width":266,"height":267,"image_alt":268,"kind":46,"categories":269,"app":271},"8c5c21e1-9d25-459f-bd01-a999943961ec","Bird UI component","A date and time selection popover component displayed over a form input field.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa587f039-803d-4c88-85a2-9cb8bf4585f0.png",1349,700,"UI component from Bird",[270],{"id":12,"title":13,"slug":49},{"slug":272,"title":273,"logo":274,"baseline":275,"categories":276},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[277,278,279,283,287],{"id":191,"title":192,"slug":193},{"id":131,"title":132,"slug":133},{"id":280,"title":281,"slug":282},53,"CRM","crm",{"id":284,"title":285,"slug":286},68,"SMS","sms",{"id":228,"title":229,"slug":230},{"uuid":289,"title":290,"description":291,"canonical_path":292,"image":293,"width":294,"height":295,"image_alt":296,"kind":46,"categories":297,"app":299},"40542e29-172c-42ae-989d-58070685e942","Llamaindex UI component","A date range picker with a calendar modal open for selecting a date.","\u002Fexamples\u002Fapps\u002Fllamaindex\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9bdf8f1a-28b0-45d6-bd86-1e8716460fd7.png",645,778,"UI component from Llamaindex",[298],{"id":12,"title":13,"slug":49},{"slug":300,"title":301,"logo":302,"baseline":303,"categories":304},"llamaindex","Llamaindex","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1e225662-6b6d-476d-a9ed-68b03c620ee1.png",null,[305,306,307,308],{"id":253,"title":254,"slug":255},{"id":102,"title":103,"slug":104},{"id":195,"title":196,"slug":197},{"id":309,"title":310,"slug":311},105,"Workflow Automation","workflow-automation",{"uuid":313,"title":314,"description":315,"canonical_path":316,"image":317,"width":318,"height":319,"image_alt":320,"kind":46,"categories":321,"app":323},"f5711769-84c8-4c2f-91f2-70beb0343f03","Super UI component","A dashboard displaying usage data with a date range selector and a calendar popover for custom period selection.","\u002Fexamples\u002Fapps\u002Fsuper-work\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F96ef80dc-b1c7-4cf3-aeda-f04587bcfc7a.png",1435,1424,"UI component from Super",[322],{"id":12,"title":13,"slug":49},{"slug":324,"title":325,"logo":326,"baseline":327,"categories":328},"super-work","Super","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F18c1a329-f193-4400-81ba-b36a605c9c39.png","AI search and agents, across all your company tools",[329,330,334],{"id":249,"title":250,"slug":251},{"id":331,"title":332,"slug":333},55,"Search engine","search-engine",{"id":195,"title":196,"slug":197},{"uuid":336,"title":337,"description":338,"canonical_path":339,"image":340,"width":341,"height":342,"image_alt":343,"kind":46,"categories":344,"app":346},"1cff2e8f-a5c8-4880-bd8b-184070b6a1ab","Meetup UI component","A dropdown menu for filtering content or events by date, offering predefined options like 'Today', 'Tomorrow', 'This week', and a 'Custom' selection.","\u002Fexamples\u002Fapps\u002Fmeetup\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F54d4992f-a88b-4b4f-ad8b-cdb5e32bbbf4.png",661,951,"UI component from Meetup",[345],{"id":12,"title":13,"slug":49},{"slug":347,"title":348,"logo":349,"baseline":350,"categories":351},"meetup","Meetup","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F123bdad2-d673-4999-b9a4-477472b558c3.png","Find local groups, events, and activities near you",[352,356,360],{"id":353,"title":354,"slug":355},1,"Communities","communities",{"id":357,"title":358,"slug":359},14,"Social","social",{"id":361,"title":362,"slug":363},26,"Events","events",[],[366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411],{"label":367,"to":368},"Date & Time","\u002Fexamples\u002Fscreens\u002Fdate-and-time",{"label":370,"to":371},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":373,"to":374},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":376,"to":377},"Charts","\u002Fexamples\u002Fscreens\u002Fcharts",{"label":379,"to":380},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":382,"to":383},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":385,"to":386},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":388,"to":389},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":391,"to":392},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":394,"to":395},"Navattic design examples","\u002Fexamples\u002Fapps\u002Fnavattic",{"label":397,"to":398},"Missive design examples","\u002Fexamples\u002Fapps\u002Fmissive",{"label":400,"to":401},"Chatwoot design examples","\u002Fexamples\u002Fapps\u002Fchatwoot",{"label":403,"to":404},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":406,"to":407},"Llamaindex design examples","\u002Fexamples\u002Fapps\u002Fllamaindex",{"label":409,"to":410},"Super design examples","\u002Fexamples\u002Fapps\u002Fsuper-work",{"label":412,"to":413},"Meetup design examples","\u002Fexamples\u002Fapps\u002Fmeetup",{"published_at":415,"updated_at":416},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]