[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Finput-date":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":338,"links":339,"dates":387},"\u002Fexamples\u002Fcomponents\u002Finput-date","collection","components",true,{"example_count":9,"app_count":10},42,35,{"id":12,"title":13,"description":14},199,"Input date","Explore how forms ask people to enter a date. Look at how field labels, format hints, and calendar access communicate the expected value.",{"title":16,"description":17,"og_image":18},"Input date UI examples - Nicelydone","Input date UI design examples from SaaS apps. Explore how forms ask people to enter a date. Look at how field labels, format hints, and calendar access…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd13e8a5c-5172-45f9-9f93-3e57541fe840.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Input date UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Input date UI design examples from SaaS apps. Explore how forms ask people to enter a date. Look at how field labels, format hints, and calendar access communicate the expected value.",[32],{"title":33,"description":14,"links":34},"About Input date",[],[36],"42 UI components",[38,60,85,118,140,169,192,217,239,262,283,317],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"2c6687b4-c7a9-4734-8d9b-4d9914e7cd2e","Mixpanel UI component","A row of date and time range selectors with chart type options for data visualization.","\u002Fexamples\u002Fapps\u002Fmixpanel\u002Fcomponents",1992,320,"UI component from Mixpanel","component",[48],{"id":12,"title":13,"slug":49},"input-date",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"mixpanel","Mixpanel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6591e7aa-86c8-4da2-8c52-c70f46a86bbb.png","Product analytics for mobile, web, & more",[56],{"id":57,"title":58,"slug":59},46,"Analytics","analytics",{"uuid":61,"title":62,"description":63,"canonical_path":64,"image":65,"width":66,"height":67,"image_alt":68,"kind":46,"categories":69,"app":71},"669427ed-f22a-41e5-bd5f-112ba7489ceb","Attio UI component","A time selection interface with dropdowns for start time, end time, and timezone.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6dbae174-dae9-41e3-b0c4-4d55c3a5cfde.png",847,228,"UI component from Attio",[70],{"id":12,"title":13,"slug":49},{"slug":72,"title":73,"logo":74,"baseline":75,"categories":76},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[77,81],{"id":78,"title":79,"slug":80},53,"CRM","crm",{"id":82,"title":83,"slug":84},80,"Artificial Intelligence","artificial-intelligence",{"uuid":86,"title":87,"description":88,"canonical_path":89,"image":90,"width":91,"height":92,"image_alt":93,"kind":46,"categories":94,"app":96},"3efc8135-1c98-45fb-a672-a843ff054285","Evervault UI component","The screenshot shows a UI for setting up rules or conditions, possibly related to data access or security policies.","\u002Fexamples\u002Fapps\u002Fevervault\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc7ec12ca-9c45-4e36-a202-6e4dc211dd0b.png",1580,646,"UI component from Evervault",[95],{"id":12,"title":13,"slug":49},{"slug":97,"title":98,"logo":99,"baseline":100,"categories":101},"evervault","Evervault","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fevervault-uzcb9ksa.png","Security toolkit for developers",[102,106,110,114],{"id":103,"title":104,"slug":105},48,"Developer Tools","developer-tools",{"id":107,"title":108,"slug":109},37,"Developer APIs","developer-apis",{"id":111,"title":112,"slug":113},39,"Payments","payments",{"id":115,"title":116,"slug":117},78,"Security","security",{"uuid":119,"title":120,"description":121,"canonical_path":122,"image":123,"width":124,"height":125,"image_alt":126,"kind":46,"categories":127,"app":129},"9dc47487-98a1-44aa-b5ee-f3bd9299c124","Lemni UI component","A date picker modal.","\u002Fexamples\u002Fapps\u002Flemni\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F20772be4-cf78-4b00-95d1-4d5e7de70d32.png",550,539,"UI component from Lemni",[128],{"id":12,"title":13,"slug":49},{"slug":130,"title":131,"logo":132,"baseline":133,"categories":134},"lemni","Lemni","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flemni-aebad401.png","Ai agents for all your customer interactions",[135,136],{"id":82,"title":83,"slug":84},{"id":137,"title":138,"slug":139},47,"Customer Service","customer-service",{"uuid":141,"title":142,"description":143,"canonical_path":144,"image":145,"width":146,"height":147,"image_alt":148,"kind":46,"categories":149,"app":151},"776beb2f-727d-481f-8e92-ba312e22f221","Height UI component","A date picker modal","\u002Fexamples\u002Fapps\u002Fheight\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5aebf101-be29-4df9-a14a-c8af97cea307.png",719,1200,"UI component from Height",[150],{"id":12,"title":13,"slug":49},{"slug":152,"title":153,"logo":154,"baseline":155,"categories":156},"height","Height","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fheight-29b426a4.png","Manage projects across engineering, product, design, and other teams",[157,161,165],{"id":158,"title":159,"slug":160},86,"Product management","product-management",{"id":162,"title":163,"slug":164},29,"Task Management","task-management",{"id":166,"title":167,"slug":168},30,"Productivity","productivity",{"uuid":170,"title":171,"description":172,"canonical_path":173,"image":174,"width":175,"height":176,"image_alt":177,"kind":46,"categories":178,"app":180},"b54837e6-47a0-4c4c-bdca-5378b89983fd","Asana UI component","A date and time picker modal","\u002Fexamples\u002Fapps\u002Fasana\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4e92f3f6-8048-48e1-88f2-86929e102325.png",890,1209,"UI component from Asana",[179],{"id":12,"title":13,"slug":49},{"slug":181,"title":182,"logo":183,"baseline":184,"categories":185},"asana","Asana","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fasana-a1a0b7cd.png","The easiest way for teams to track their work",[186,190,191],{"id":187,"title":188,"slug":189},23,"Collaboration","collaboration",{"id":162,"title":163,"slug":164},{"id":166,"title":167,"slug":168},{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":198,"height":199,"image_alt":200,"kind":46,"categories":201,"app":203},"b857ea78-238c-4ee7-b5b4-b99b4daf7e56","Expensify UI component","A date picker modal is displayed.","\u002Fexamples\u002Fapps\u002Fexpensify\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1d2cd9af-6632-4595-9069-1be5dd6b9b1a.png",652,510,"UI component from Expensify",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"expensify","Expensify","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fexpensify-186d76c0.png","The expense management app that does it all",[209,213],{"id":210,"title":211,"slug":212},36,"Finance","finance",{"id":214,"title":215,"slug":216},56,"Accounting","accounting",{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":223,"height":224,"image_alt":225,"kind":46,"categories":226,"app":228},"e3162644-96d2-4a02-8b6b-eac46125ca42","SavvyCal UI component","A modal for setting meeting duration options.","\u002Fexamples\u002Fapps\u002Fsavvycal\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4f8d5478-f156-46d8-8dc7-8150024aa847.png",928,749,"UI component from SavvyCal",[227],{"id":12,"title":13,"slug":49},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"savvycal","SavvyCal","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsavvycal-acc21050.png","Scheduling software your recipients will love",[234,235],{"id":166,"title":167,"slug":168},{"id":236,"title":237,"slug":238},101,"Calendar","calendar",{"uuid":240,"title":241,"description":242,"canonical_path":243,"image":244,"width":245,"height":246,"image_alt":247,"kind":46,"categories":248,"app":250},"9e77c16e-32da-4d6c-950b-4c87d7ee1bca","Date range picker","A date range picker component showing two consecutive months with a selected range highlighted.","\u002Fexamples\u002Fapps\u002Fsana\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F45b27cda-555d-4b93-9f9d-2815cc286f1f.png",1096,745,"Date range picker from Sana",[249],{"id":12,"title":13,"slug":49},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"sana","Sana","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsana-f298da05.png","Your AI assistant for work",[256,257,258],{"id":82,"title":83,"slug":84},{"id":166,"title":167,"slug":168},{"id":259,"title":260,"slug":261},22,"Knowledge Management","knowledge-management",{"uuid":263,"title":264,"description":265,"canonical_path":266,"image":267,"width":268,"height":269,"image_alt":270,"kind":46,"categories":271,"app":273},"09fcf674-9118-4a2b-a8c5-6fdd5118ba1b","Date range picker button","A pill-shaped button displaying a selected date range, with a calendar icon and a dropdown arrow.","\u002Fexamples\u002Fapps\u002Fbonsai\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F65d945b6-e9c3-46c4-9836-cdd79fa722dd.png",713,216,"Date range picker button from Bonsai",[272],{"id":12,"title":13,"slug":49},{"slug":274,"title":275,"logo":276,"baseline":277,"categories":278},"bonsai","Bonsai","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbonsai-07a1ca35.png","One platform to streamline your entire business",[279,280,281,282],{"id":214,"title":215,"slug":216},{"id":210,"title":211,"slug":212},{"id":162,"title":163,"slug":164},{"id":78,"title":79,"slug":80},{"uuid":284,"title":285,"description":286,"canonical_path":287,"image":288,"width":289,"height":290,"image_alt":291,"kind":46,"categories":292,"app":294},"4dc77cdb-ba55-4ace-87a0-fde10ce2b928","Date Range Picker","A date range picker popover with preset options on the left and a two-month calendar view on the right. A date range is currently selected.","\u002Fexamples\u002Fapps\u002Farcade\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa21d8ebe-8613-4952-af30-bd904af1d6a5.png",1655,947,"Date Range Picker from Arcade",[293],{"id":12,"title":13,"slug":49},{"slug":295,"title":296,"logo":297,"baseline":298,"categories":299},"arcade","Arcade","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Farcade-661b86c8.png","Create effortlessly beautiful demos in minutes",[300,304,308,309,313],{"id":301,"title":302,"slug":303},8,"Design","design",{"id":305,"title":306,"slug":307},25,"Marketing","marketing",{"id":82,"title":83,"slug":84},{"id":310,"title":311,"slug":312},100,"Video","video",{"id":314,"title":315,"slug":316},103,"Demo Automation","demo-automation",{"uuid":318,"title":319,"description":320,"canonical_path":321,"image":322,"width":323,"height":324,"image_alt":325,"kind":46,"categories":326,"app":328},"e500d946-4d29-4901-8e5c-fa4f3e13f6db","Custom recurrence configuration","A form section for setting up a custom recurrence schedule, allowing the user to specify frequency and specific days of the week.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fec343b77-8d1d-4c44-956a-b077fca2d490.png",957,251,"Custom recurrence configuration from Amie",[327],{"id":12,"title":13,"slug":49},{"slug":329,"title":330,"logo":331,"baseline":332,"categories":333},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[334,335,336,337],{"id":236,"title":237,"slug":238},{"id":162,"title":163,"slug":164},{"id":166,"title":167,"slug":168},{"id":82,"title":83,"slug":84},[],[340,343,346,348,351,354,357,360,363,366,369,372,375,378,381,384],{"label":341,"to":342},"Date & Time","\u002Fexamples\u002Fscreens\u002Fdate-and-time",{"label":344,"to":345},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":237,"to":347},"\u002Fexamples\u002Fscreens\u002Fcalendar",{"label":349,"to":350},"Charts","\u002Fexamples\u002Fscreens\u002Fcharts",{"label":352,"to":353},"Mixpanel design examples","\u002Fexamples\u002Fapps\u002Fmixpanel",{"label":355,"to":356},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":358,"to":359},"Evervault design examples","\u002Fexamples\u002Fapps\u002Fevervault",{"label":361,"to":362},"Lemni design examples","\u002Fexamples\u002Fapps\u002Flemni",{"label":364,"to":365},"Height design examples","\u002Fexamples\u002Fapps\u002Fheight",{"label":367,"to":368},"Asana design examples","\u002Fexamples\u002Fapps\u002Fasana",{"label":370,"to":371},"Expensify design examples","\u002Fexamples\u002Fapps\u002Fexpensify",{"label":373,"to":374},"SavvyCal design examples","\u002Fexamples\u002Fapps\u002Fsavvycal",{"label":376,"to":377},"Sana design examples","\u002Fexamples\u002Fapps\u002Fsana",{"label":379,"to":380},"Bonsai design examples","\u002Fexamples\u002Fapps\u002Fbonsai",{"label":382,"to":383},"Arcade design examples","\u002Fexamples\u002Fapps\u002Farcade",{"label":385,"to":386},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"published_at":388,"updated_at":389},"2022-08-21T20:07:35.000Z","2026-09-23T12:10:20.000Z"]