syncfusion-angular-timepicker

Implementing Syncfusion Angular TimePicker

A comprehensive guide for implementing the Syncfusion Essential JS 2 TimePicker component in Angular applications. Learn to create time selection interfaces, manage time inputs, handle events, and customize styling.

TimePicker Overview

The Syncfusion Angular TimePicker component is a dedicated time selection widget that provides:

Time Selection: Popup list with configurable time intervals for selection
Flexible Formatting: Custom time formats, skeleton options, and locale-aware formatting
Time Intervals: Configurable step intervals (15, 30, 60 minutes, etc.) for time selection
Range Constraints: Min/max time with strict validation and boundary enforcement
Comprehensive Event System: change, focus, blur, open, close, created, destroyed, cleared, itemRender events
Masked Input Support: Optional masked input format for guided user entry
Persistence & RTL: State persistence across reloads and right-to-left language support
Advanced Features: Strict mode validation, floating labels, keyboard customization, timezone support
Accessibility: Full WCAG 2.2 compliance, keyboard navigation, WAI-ARIA support
Theme Support: Material, Bootstrap, Tailwind, Fabric with light/dark variants
Mobile Optimized: Full screen mode on mobile devices, touch-friendly interface

Package: @syncfusion/ej2-angular-calendars

Documentation Navigation

Read the following references based on your specific needs:

Getting Started

📄 Read: references/getting-started.md

Package installation via npm and ng add
NgModule vs Standalone component setup
CSS theme imports and dependencies
Basic timepicker implementation
Component initialization and running the application
Development server setup

Basic Implementation

📄 Read: references/basic-implementation.md

Simple time picker with ngModel
Two-way data binding patterns
Readonly and disabled states
Basic validation and constraints
Event handling fundamentals
ViewChild component access

Time Configuration

📄 Read: references/time-configuration.md

Time format customization (format property)
TimeFormatObject and skeleton options
Step intervals and time granularity
Min/max time constraints
ScrollTo position for time scrolling
Popup list configuration

Events & Callbacks

📄 Read: references/events-and-callbacks.md

Change event with ChangeEventArgs
Focus/blur event handling
Open/close popup events
Created/destroyed lifecycle events
Cleared event when clear button is used
ItemRender for custom time formatting

Methods & Imperative Access

📄 Read: references/methods-and-imperative-access.md

ViewChild access and component references
show() to open the time popup
hide() to close the time popup
focusIn/focusOut for focus management
getPersistData() for state persistence

Advanced Features

📄 Read: references/advanced-features.md

Masked input mode with mask placeholders
State persistence across page reloads
RTL (Right-to-Left) language support
Floating label types and behavior
Strict mode validation and error states
Keyboard shortcuts and key configuration
Timezone offset handling
Full screen mode for mobile devices
Clear button visibility and behavior
OpenOnFocus popup trigger

Styling & Customization

📄 Read: references/styling-and-customization.md

CSS class customization (cssClass property)
Theme selection and switching
Dark mode implementation
Component width and z-index configuration
HTML attribute injection (htmlAttributes)
Placeholder and enabled state styling
Disabled date styling and appearance

Accessibility & Globalization

📄 Read: references/accessibility-and-globalization.md

WCAG 2.2 and Section 508 compliance standards
WAI-ARIA attributes and roles
Keyboard navigation (arrows, enter, space, escape)
Screen reader compatibility and announcements
Localization and locale property usage
Time format variations
RTL text direction support

API Reference

📄 Read: references/api-reference.md

Complete property reference with types and defaults
All method signatures with parameters and return types
All events with event argument types
Property descriptions and use cases
Method examples and common patterns
Type interfaces and enums
Key configuration for keyboard shortcuts
Comprehensive property-by-property guide

Quick Start Example

// app.component.ts
import { Component } from '@angular/core';
import { ChangeEventArgs } from '@syncfusion/ej2-calendars';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Simple time value
  timeValue: Date = new Date();
  
  // Configuration
  minTime: Date = new Date(2026, 2, 24, 8, 0);   // 8:00 AM
  maxTime: Date = new Date(2026, 2, 24, 20, 0);  // 8:00 PM
  format: string = 'hh:mm a';
  step: number = 30;  // 30-minute intervals
  
  // Event handler
  onTimeChange(args: ChangeEventArgs): void {
    console.log('Selected Time:', args.value);
    console.log('Selected Text:', args.text);
    console.log('Is User Interaction:', args.isInteracted);
  }
  
  onPopupOpen(): void {
    console.log('Time popup opened');
  }
  
  onPopupClose(): void {
    console.log('Time popup closed');
  }
}

<!-- app.component.html -->
<div style="padding: 20px;">
  <h2>Select a Time</h2>
  
  <ejs-timepicker
    id="timepicker"
    [value]="timeValue"
    [format]="format"
    [min]="minTime"
    [max]="maxTime"
    [step]="step"
    placeholder="Select time"
    (change)="onTimeChange($event)"
    (open)="onPopupOpen()"
    (close)="onPopupClose()">
  </ejs-timepicker>
  
  <p *ngIf="timeValue">
    Selected Time: {{ timeValue | date:'shortTime' }}
  </p>
</div>

Common Patterns

Pattern 1: Business Hours Time Selection

Select time within business hours (9 AM - 6 PM):

export class AppComponent {
  minTime: Date = new Date(2026, 2, 24, 9, 0);   // 9:00 AM
  maxTime: Date = new Date(2026, 2, 24, 18, 0);  // 6:00 PM
  timeValue: Date = new Date(2026, 2, 24, 10, 0);
  format: string = 'hh:mm a';
  step: number = 15;  // 15-minute intervals
}

<ejs-timepicker
  [value]="timeValue"
  [min]="minTime"
  [max]="maxTime"
  [step]="step"
  [format]="format"
  placeholder="Select appointment time">
</ejs-timepicker>

Pattern 2: 24-Hour Format

Display time in 24-hour military format:

export class AppComponent {
  timeValue: Date = new Date();
  format: string = 'HH:mm';  // 24-hour format
  step: number = 30;
}

<ejs-timepicker
  [value]="timeValue"
  [format]="format"
  [step]="step"
  placeholder="Select time (24-hour)">
</ejs-timepicker>

Pattern 3: Masked Input for Guided Entry

Use masked input to guide users through time entry:

export class AppComponent {
  timeValue: Date;
  enableMask: boolean = true;
  maskPlaceholder = {
    hour: 'hh',
    minute: 'mm',
    second: 'ss'
  };
  format: string = 'hh:mm:ss a';
}

<ejs-timepicker
  [value]="timeValue"
  [enableMask]="enableMask"
  [maskPlaceholder]="maskPlaceholder"
  format="hh:mm:ss a">
</ejs-timepicker>

Pattern 4: Reactive Forms Integration

Integrate timepicker with Angular Reactive Forms:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class AppComponent {
  appointmentForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.appointmentForm = this.fb.group({
      appointmentTime: [
        new Date(),
        [Validators.required]
      ]
    });
  }
  
  submitForm(): void {
    if (this.appointmentForm.valid) {
      console.log(this.appointmentForm.value);
    }
  }
}

<form [formGroup]="appointmentForm">
  <ejs-timepicker
    formControlName="appointmentTime"
    format="hh:mm a"
    placeholder="Select time">
  </ejs-timepicker>
  
  <button (click)="submitForm()" [disabled]="!appointmentForm.valid">
    Submit
  </button>
</form>

Pattern 5: Time Range Selection

Select start and end times for a duration:

export class AppComponent {
  startTime: Date = new Date();
  endTime: Date = new Date(Date.now() + 3600000);  // +1 hour
  
  onStartTimeChange(args: ChangeEventArgs): void {
    // Ensure end time is after start time
    if (args.value && this.endTime <= args.value) {
      this.endTime = new Date(args.value.getTime() + 3600000);  // +1 hour
    }
  }
}

<div>
  <label>Start Time:</label>
  <ejs-timepicker
    [value]="startTime"
    format="hh:mm a"
    (change)="onStartTimeChange($event)">
  </ejs-timepicker>
  
  <label>End Time:</label>
  <ejs-timepicker
    [value]="endTime"
    [min]="startTime"
    format="hh:mm a">
  </ejs-timepicker>
</div>

Key Properties Reference

Property	Type	Purpose
`value`	Date	Selected time value for two-way binding
`format`	string	Time display format (e.g., 'hh:mm a')
`min`	Date	Minimum selectable time
`max`	Date	Maximum selectable time
`step`	number	Time interval in minutes (15, 30, 60)
`enabled`	boolean	Enable/disable the component
`readonly`	boolean	Make input readonly (select from popup only)
`placeholder`	string	Placeholder text in input
`enableMask`	boolean	Enable masked input mode
`strictMode`	boolean	Enforce valid values only
`enableRtl`	boolean	Right-to-left language support
`enablePersistence`	boolean	Persist value across page reloads
`scrollTo`	Date	Default scroll position in time list
`locale`	string	Locale for formatting (e.g., 'en-US', 'de-DE')
`cssClass`	string	Custom CSS class for styling
`width`	string	Component width
`zIndex`	number	Z-index for popup
`showClearButton`	boolean	Show/hide clear icon
`openOnFocus`	boolean	Open popup on input focus
`floatLabelType`	string	Floating label behavior (Never/Always/Auto)

Common Use Cases

Appointment Booking System

Select available time slots from a list
Restrict to business hours with min/max time
Use 15 or 30-minute step intervals
Handle form validation with required validators
Display selected time confirmation

Shift Management

Select shift start and end times
Apply shift time constraints
Support multiple timezone offsets
Handle shift transitions (spanning midnight)
Export times in ISO format

Meeting Scheduling

Select meeting time with business hours constraint
Use 30-minute step intervals for standard durations
Display time in user's locale format
Prevent double bookings with validation
Sync with calendar component for availability

Time Tracking

Record clock-in and clock-out times
Restrict to business hours
Use masked input for quick entry
Persist times for audit trail
Export times for payroll integration

Event Registration

Select event attendance time slot
Show available time ranges
Use clear button for corrections
Support multiple time formats
Accessibility for assistive technologies

Next Steps

Start with Getting Started → Install and configure the component
Build Basic Implementation → Create simple time pickers
Add Event Handling → Respond to user interactions
Implement Advanced Features → Add masked input, persistence, RTL
Customize Appearance → Apply themes and custom styles
Ensure Accessibility → Support keyboard and screen readers
Reference API → Consult complete API documentation as needed

Ready to get started? Begin with references/getting-started.md for installation and setup instructions.