Datepicker screen examples

Workflow

Modal where the user creates a new task, setting properties, adding a briefing, and attaching files.

• Add & Create
• Upload & Download

Notion Mail

Product page section highlighting the built-in scheduling feature with a mockup showing an interactive calendar embedded directly in the email composer.

Reflect

Content editor for a daily note showing bulleted lists, task checkboxes, a calendar sidebar, and a navigation menu with an open user settings dropdown.

• Home
• Tasks

Monarch

Settings page where the user can download their transaction history and account balances as CSVs, or delete historical data before a specific date.

• Settings
• Delete

Assembly

Inbox page where the user manages pending approvals and tracks requests they have sent, currently filtering by a date range.

• Approval Flow
• Table

Front

Combined inbox view where the user reads an email thread about design ethics while simultaneously drafting a related calendar event in the right sidebar.

• Calendar
• Messages

Flodesk

Design editor modal where the user configures product details, expiration dates, and waitlist settings for a checkout page.

• Checkout
• Payment Form

Motion

Calendar view where the user manages their weekly schedule, tasks, and connected calendars across a three-pane layout.

• Calendar
• Tasks

Secfi

Settings drawer where the user updates company valuation and employment information for tax estimation, showing a success confirmation.

• Settings
• Success

Kajabi

Product tour step demonstrating a mobile scheduling interface where users can pick a date from a calendar and confirm a time slot.

• Calendar
• Schedule

Jimo

Detail page where the user configures targeting, timing recurrence, and priority rules for a specific app tour experience.

• Publish
• Edit

Campsite

Detail page where the user views a teammate's profile and uses a modal to pause notifications until a specific date and time.

• Profile
• Edit