Coming Soon to AppExchange — 2026

Date Time

Schedule dates and times together in Salesforce. Combine multi-date selection with a visual time slot grid or dropdown pickers. Assign shared or per-date times, group slots by period (Morning, Afternoon, Evening), track statuses with color-coded slots, and detect conflicts automatically.

Notify Me at Launch See Use Cases
Salesforce date and time picker demo: selecting calendar dates plus 30-minute time slots for appointment scheduling

Overview

Date Time extends the date selection calendar with time scheduling. After selecting dates, users assign a start time (and optionally an end time) to each one using dropdown menus or a visual time slot grid. You control the time interval (any minute value; 15, 30, 60 typical), the visible time range, and whether each date can have a different time or all dates share the same time.

Use this component when your Flow or Record Page needs both a date and a time — for appointment scheduling, session booking, shift planning, interview scheduling, or any workflow where the time of day matters. All properties from the Date component are also available (recurring patterns, status colors, edit mode, date range consolidation, etc.).

On This Page

Object & Field Mapping

When configuring this component on a Lightning Page or via the Setup Wizard, these are the object and field API names you'll need to provide.

Your Record Object
Related_Object__cObject API Name
Date_Field__cDate field
Relationship_Field__cLookup to parent
Start_Time_Field__cTime field
End_Time_Field__cTime field
End_Date_Field__cDate range end (optional)
Status_Field__cPicklist field (optional)
Hover_Fields__cPopover detail fields (optional)
Sub-Block Object Optional
Sub_Block_Object__cObject API Name
Sub_Block_Parent_Lookup_Field__cLookup to parent
Sub_Block_Date_Field__cDate field
Sub_Block_Start_Time_Field__cStart time
Sub_Block_End_Time_Field__cEnd time
Sub_Block_Name_Field__cLabel field (optional)
Blocked Dates Object Optional
Blocked_Dates_Source_Object__cObject API Name
Blocked_Dates_Date_Field__cDate field
Blocked_Dates_Filter_Field__cLookup to parent (optional)

Sub-Block Use Cases

When Consolidate Time Span is enabled, gaps between selected time slots are automatically detected and saved as separate records on a child object. Users can also manually mark slots as sub-blocks.

  • Shift scheduling with breaks — Employee selects 8 AM – 5 PM; the 12 – 1 PM lunch gap auto-creates a record on a Break__c object
  • Travel itineraries — User blocks travel windows; layovers between flights become Travel_Leg__c records
  • Training schedules — Instructor selects teaching blocks; free periods between sessions save as Available_Slot__c records
  • Work schedules with appointments — Manager defines work hours; gaps for meetings or appointments auto-save to an Appointment__c object
Important: Replace the orange values with your org's record object and field API names. If you use sub-blocks, replace the purple values with your child object and fields. If you use blocked dates, replace the red values too. Everything else works as-is.

Use Cases for Date Time

The Date Time component is ideal for any scenario where users need to select dates AND assign specific times. Here are 15 real-world use cases.

1. Interview Scheduling

Recruiters schedule interviews by selecting dates and choosing 30-minute time slots from a per-date grid. Each date gets its own grid via allowDifferentTimes, allowing different interview times on different days. Status colors track Scheduled (blue), Completed (green), No Show (red), and Cancelled (gray). appendDateTimeToName auto-names each record for easy identification.

2. Appointment Booking

Clients or service reps pick appointment dates and times from a visual time slot grid. conflictBehavior = 'block' prevents overlapping appointments by greying out taken slots. minTime and maxTime limit selections to business hours. Creates one record per appointment with date, start time, and end time fields.

3. Shift Scheduling

Managers assign employee shifts across multiple days. Pick dates and set start/end times per shift using enableEndTime. groupTimeSlotsByPeriod organizes the grid into Morning, Afternoon, and Evening sections. timeInterval = 60 provides 1-hour blocks. Auto-generates one shift record per day.

4. Maintenance Windows

IT teams schedule server maintenance windows by selecting dates and assigning 1-hour time blocks. consolidateTimeSpan groups adjacent slots into a single time span (e.g., selecting 2 AM, 3 AM, 4 AM becomes one 2–4 AM window). Conflict detection prevents overlapping maintenance on the same system.

5. Delivery Time Windows

Customers select preferred delivery dates and time windows from a dropdown picker. timeDisplayMode = 'dropdown' shows clean time pickers instead of a grid. minTime = '09:00' and maxTime = '17:00' limit to business hours. allowDifferentTimes lets each delivery date have its own window.

6. Clinic & Healthcare Appointments

Patients book clinic appointments by selecting dates and 15-minute time slots. timeInterval = 15 provides granular scheduling. statusColorDisplay = 'grid' shows which slots are Booked vs. Available at a glance. preloadExistingDates shows the patient's existing appointments on the calendar.

7. Call Center Callback Scheduling

Support reps schedule customer callbacks at specific times. timeInterval = 30 gives 30-minute slots. conflictBehavior = 'block' prevents two reps from booking the same callback slot. Each callback record gets a date, time, customer, and a callback-reason field via recordNameField.

8. Customer Onboarding Sessions

Customer Success teams schedule multi-week onboarding curricula — one 60-minute session per week for 8 weeks. Recurring patterns combined with the time grid let CSMs set the cadence in two clicks. appendDateTimeToName auto-labels each session record.

9. Training Class Time Slots

Training coordinators schedule multi-day classes with specific times each day. Use allowDifferentTimes to set different morning/afternoon blocks per day. consolidateTimeSpan with sub-blocks groups the morning + afternoon into a single training-day record while preserving lunch breaks as sub-blocks.

10. Demo Request Slot Picker

Embed in your community / public site so prospects book a demo slot themselves. preloadMode = 'readonly' shows your reps' existing demos as greyed out. conflictBehavior = 'block' prevents double-booking. maxTime caps slot pickup at business hours.

11. Quarterly Business Review (QBR) Scheduling

CSMs schedule QBRs with dozens of accounts each quarter. The time grid lets them slot in 90-minute reviews. twoMonthView spans the quarter end. Status colors track Scheduled, Confirmed by Customer, Held, and Rescheduled.

12. Open House & Property Showing Tours

Real estate listings expose available showing slots to buyers' agents. timeDisplayMode = 'grid' shows 30-minute tour blocks. statusColorDisplay = 'grid' colors slots as Available (green), Booked (orange), or Hold (amber). Embed on listing record pages or community sites.

13. Service Truck Dispatch Windows

Dispatchers slot field jobs into time windows (e.g., 8-10 AM, 10-12 PM). timeInterval = 120 creates 2-hour blocks. enableEndTime lets dispatchers extend a job past its slot when needed. Pair with a status color for In Progress to track jobs that ran over.

14. Webinar Registration

Multi-session webinar series — pick which sessions to attend. timeDisplayMode = 'dropdown' shows each session's time as a dropdown picker. conflictBehavior = 'allow' lets attendees register for overlapping sessions if they choose. Auto-generates one registration record per session.

15. Multi-Day Conference Session Picker

Conference attendees pick which sessions they'll attend across a multi-day agenda. Combine with sub-blocks: each day's keynote + breakouts becomes a parent record with sub-block detail per session. Status colors mark Confirmed vs. Tentative attendance. Use groupTimeSlotsByPeriod to organize Morning / Afternoon / Evening blocks.

Specifications

Supported Salesforce editionsEnterprise, Unlimited, Performance, and Developer
Salesforce API version63.0
Supported targetsScreen Flow, Lightning Record Page, App Page, Home Page, Experience Site
Time-slot intervalsConfigurable — any minute interval (15 / 30 / 60 typical)
Time selection modesShared time across dates, or per-date times (allowDifferentTimes)
Time display modesVisual grid (click slots) or dropdown pickers; groupTimeSlotsByPeriod organizes Morning / Afternoon / Evening
Time Grid Only modetimeGridOnly hides the calendar and shows just the time grid for a single implied date (from timeGridDate, timeGridDateField, or today)
Conflict detectionconflictBehavior: block, skip, or allow; configurable look-ahead window
Output formatsselectedDates (Text Collection) and selectedDatesWithTimesJson (parsed via MultiDatePickParser invocable Apex)
Languages9 — English, Spanish, French, German, Italian, Japanese, Hindi, Brazilian Portuguese, Chinese Simplified
SetupNo-code Setup Wizard, Lightning App Builder, or Flow Builder

Lightning Page Setup

1

What You Need First

Create a child object to store date+time entries. It needs a Date field, one or two Time fields, and a Lookup back to the parent. For example, an Appointment__c object:

FieldTypePurpose
Appointment_Date__cDateStores the selected date
Start_Time__cTimeStores the start time
End_Time__cTimeStores the end time (optional)
End_Date__cDateOptional — for date range consolidation
Contact__cLookupLinks back to the parent record
Status__cPicklistOptional — for status color coding
Note: recordId is passed automatically on Record Pages. For App Pages, Home Pages, or Experience Sites, use staticRecordId.
2

Drop It In

Drag the Date Time component onto your page in App Builder and configure:

  • relatedObjectApiName — your date/time object, e.g. Appointment__c
  • dateFieldApiName — the Date field, e.g. Appointment_Date__c
  • relationshipFieldApiName — the Lookup field, e.g. Contact__c
  • startTimeField — the Start Time field, e.g. Start_Time__c
  • endTimeField — the End Time field, e.g. End_Time__c
  • enableEndTime — set to ON to show both Start and End Time pickers
  • timeDisplayMode — grid for visual time slot grid, dropdown for time pickers
  • timeInterval — slot size: any minute value (15/30/60 typical)

Or use the Setup Wizard:

  • configName — loads all settings from a saved configuration, e.g. Interview_Scheduling
3

What Comes Out

One record per date with time fields populated. When the user selects dates, assigns times, and clicks Save, the component creates one record per date with date, start time, and end time fields filled in. Enable conflict checking to automatically block time slots that overlap with existing records. The component uses additive save — inserts new records but does not delete existing ones.
4

Summary View After Save

By default the calendar and time grid stay expanded after Save. To collapse them into a small summary card (and let the user click the card to re-expand), set both:

PropertyValueEffect
showInlinetrueRenders the picker inline on the page instead of a popup modal.
showDoneButtonInlinetrueShows a Done button that collapses the picker to a summary card listing the selected dates and times. Click the card to re-expand.

Useful on busy record pages where the picker should step out of the way after the user has saved their picks.

Flow Setup

1

What You Need First

Same object setup as Record Page above. Then create Flow variables based on your use case:

Variable NameTypeCollection?Notes
{!selectedDates}TextYesDates only (no time info) — use if you just need the dates
{!dateTimesJson}TextNoDates + times as JSON — feed to MultiDatePickParser for loopable entries
2

Drop It In

Add a Screen element in Flow Builder, drag the Date Time component onto it, and configure:

  • label — button text, e.g. "Schedule Appointments"
  • modalTitle — calendar modal title, e.g. "Pick Dates & Times"
  • showInline — ON to embed the calendar directly
  • timeDisplayMode — grid or dropdown
  • timeInterval — any minute value (15/30/60 typical)
  • enableEndTime — ON to capture both start and end times
  • selectedDatesWithTimesJson (Output) — wire to {!dateTimesJson}
3

What Comes Out

Dates-only or dates+times — your choice. {!selectedDates} gives you a simple array of dates. For dates with times, feed {!dateTimesJson} to the MultiDatePickParser invocable action — it returns loopable entries with fromDate, toDate, startTime, and endTime fields. If you configured the Related Object fields, records are auto-saved with time data.
All Properties Reference

Configuration

PropertyTypeDefaultDescription
configNameString—Name of a saved Config Custom Metadata record. Loads all settings from that record.

Display Properties

Shared display properties (inherited from the base, also documented on the Date page):

PropertyTypeDefaultDescription
labelStringSelect DatesText shown on the button that opens the date picker.
modalTitleStringSelect DatesTitle displayed at the top of the calendar modal.
showInlineBooleanfalseWhen ON, the calendar is always visible without needing to click a button.
twoMonthViewBooleanfalseWhen ON, shows two months side-by-side for wider date range visibility.
calendarSizeStringmediumControls calendar size: small, medium, or large.
dayHeaderFormatString3Day header length: 3 = SUN MON TUE, 2 = SU MO TU, 1 = S M T.
weekStartsOnMondayBooleanfalseWhen ON, the calendar week begins on Monday instead of Sunday.
showRecurringPatternBooleantrueWhen ON, shows the "Add Recurring Pattern" button with day selection, week intervals, and monthly occurrence filters.
showSelectedSummaryBooleantrueWhen ON, displays a summary showing how many dates are selected and their date ranges.
showDoneButtonInlineBooleantrueWhen ON, shows a Done button that collapses the calendar to a summary view.
requiredBooleanfalseWhen ON, at least one date must be selected before the Flow can advance.

Time Selection Properties

PropertyTypeDefaultDescription
timeIntervalInteger30Minutes between time slots (any integer; 15, 30, 60 typical).
minTimeString08:00Earliest time in 24-hour format (HH:mm), e.g. 08:00.
maxTimeString18:00Latest time in 24-hour format (HH:mm), e.g. 17:00.
timeDisplayModeStringgridgrid — visual time slot grid where users click slots. dropdown — time picker dropdowns for start/end time.
allowDifferentTimesBooleanfalseWhen ON, each selected date gets its own time picker/grid instead of sharing one time across all dates.
enableEndTimeBooleanfalseWhen ON, shows a separate End Time alongside Start Time (dropdown mode) or auto-calculates end time from slot duration (grid mode).
groupTimeSlotsByPeriodBooleanfalseWhen ON, groups the time slot grid into Morning, Afternoon, and Evening sections.
startTimeFieldString—API name of the Time field for start time on the related object.
endTimeFieldString—API name of the Time field for end time on the related object.

Time Grid Only Mode

When the host record already implies the date, you can hide the calendar entirely and show only the time-slot grid for that single implied date. Users pick their slots and the records auto-save to the host record (the same record-page click-to-save behavior). Use it on a record that is a specific day — for example an Event or Day record, or a record whose date lives in a field.

PropertyTypeDefaultDescription
timeGridOnlyBooleanfalseWhen ON, the calendar is hidden and only the time-slot grid is shown, for a single implied date. The user picks slots and records save to the host record.
timeGridDateString—Optional explicit ISO date (YYYY-MM-DD) to use as the implied date for the grid.
timeGridDateFieldString—Optional API name of a Date field on the host record to read the implied date from.

Implied-date priority: timeGridDate (explicit) → timeGridDateField (host-record field) → today (fallback). Configurable via the Setup Wizard (Step 3), Lightning App Builder, or Flow.

Conflict Detection

PropertyTypeDefaultDescription
conflictLookAheadDaysInteger360Days ahead to scan for time-slot conflicts against existing records. One setting; reduce for performance on high-volume objects.
conflictBehaviorStringblockblock (default) — conflicting slots are greyed out and unclickable. skip — for batch / multi-date selection: the user picks many dates/slots at once and the component saves the open ones, silently skipping (and reporting) the ones already taken — best for "grab whatever's still open" across many dates. (For a single date, block already prevents picking a taken slot, so skip's value is the multi-date batch case.) allow — no conflict checking; overlap permitted.

Consolidated Time Span

PropertyTypeDefaultDescription
consolidateTimeSpanBooleanfalseWhen ON, adjacent selected time slots are merged into a single record with one start time and one end time.

Status & Visual Properties

PropertyTypeDefaultDescription
statusFieldString—API name of a status field on the related object for color coding.
showSuccessToastBooleanfalseDraw a success/error toast inside the component. Needed on Experience sites, where the standard Salesforce toast does not appear; also works on record pages (replaces the standard toast).
successToastMessageString—Optional custom message shown on a successful save. Leave blank to use the default message.
allowWholeDayNoTimesBooleanfalseA date selected with no time slots saves as a whole-day record (blocks or books the entire day). Dates where you pick slots still save as timed records.
statusColorsString—Comma-separated mapping: Confirmed:green,Pending:orange,Cancelled:red.
statusColorDisplayStringbothWhere to show status colors: grid (time slots only), calendar (date cells only), or both.
hideBookingsWithStatusString—Records with this status are hidden from the grid entirely.
statusFieldLabelString—Custom display label for the status field in edit mode.
secondStatusFieldString—Optional second picklist the user chooses on save (e.g. Reason__c), alongside statusField. Use it when records need two categorizations (e.g. a lifecycle status and a reason/type). It is not color-coded — statusField owns the calendar colors. Add it to hoverFields to show it in the tooltip and edit list. Works in Flow, App Builder, and Experience sites.
secondStatusFieldLabelString—Custom label for the second picklist dropdown. If blank, auto-generated from the field API name.
selectableSecondStatusesString—Comma-separated whitelist of values the second picklist may set. Leave blank to allow all. When exactly one value is listed it is auto-applied and the picker is hidden.
hoverFieldsString—Comma-separated field API names for tooltip on hover.

Edit Mode Properties

PropertyTypeDefaultDescription
enableEditModeBooleantrueWhen ON, shows an Edit Mode toggle for managing existing records inline.
editButtonLabelString—Custom label for the Edit Mode toggle button.
editRecordDisplayStringname, status, timeComma-separated keywords that set which details show for each record in the Edit Mode list, and in what order. Valid keywords: name, status, time, date, resource — rendered left-to-right in the order you list them, so time, name, status leads each row with the time. Defaults to name, status, time. resource only carries data in the Booking component; unrecognized keywords are ignored, so use only those five.

Constraint Properties

All constraint properties from Date are available: maxSelections, allowPastDates, minDate, maxDate, defaultDates, disabledDates, availableDates, autoJumpToFirstAvailable.

Record Name Properties

All from Dates: recordNameField, defaultRecordName, appendDateTimeToName.

Output Properties (Read-Only)

PropertyTypeDescription
selectedDatesString[]Array of selected dates in ISO format, without time.
selectedDatesWithTimesJsonStringJSON string with each date and its selected time(s). Feed to MultiDatePickParser for loopable entries.
selectedDateRangesJsonStringJSON of consecutive dates grouped into ranges. Only when outputAsJson is ON.

Record Page Click-to-Save Properties

All auto-save properties from Date are available: saveButtonLabel, relatedObjectApiName, dateFieldApiName, endDateField, relationshipFieldApiName, preloadExistingDates, preloadMode, staticRecordId, parentRecordIdField, blockedDatesSourceObject, blockedDatesDateField, blockedDatesFilterField.