Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The Syncfusion EJ2 Calendar is a highly customizable calendar UI control that allows users to select single or multiple dates. It supports multiple views (Month, Year, Decade), navigation, week numbers, disabled dates, custom day cell rendering, localization, RTL support, and full accessibility (WCAG 2.2 compliant).
Styles not applied: Confirm CSS imports point to node_modules/@syncfusion/ej2-calendars/styles/ and are loaded before component initialization.
Value not updating: Use the change event to update component state — EJ2 components notify changes through events, not automatic binding.
Multiple date selection not working: Ensure isMultiSelection: true and use values array property for initial values.
navigateTo not working: The method requires two arguments — navigateTo(view: CalendarView, date: Date).
"Cannot find module": Run npm install @syncfusion/ej2-calendars @syncfusion/ej2-base and confirm package.json.
Week numbers not showing: Use weekNumber: true (not showWeekNumber).
DatePicker
The Syncfusion EJ2 DatePicker provides an intuitive input control with a calendar popup for selecting a single date. It features flexible formatting, masked input, min/max date validation, strict mode, multiple input formats, custom day rendering, localization, and seamless form integration.
Component Overview
The DatePicker is a Syncfusion EJ2 component for date selection with powerful features:
Calendar popup - Visual date selection with navigation
Flexible formatting - Display and input formats with pattern support
Masked input - enableMask for segment-by-segment date entry with maskPlaceholder
Range validation - Min/max dates with strictMode automatic correction
Multiple views - Month, year, and decade views via start and depth properties
Day cell customization - Disable weekends, highlight special dates via renderDayCell event
Full globalization - 150+ cultures, RTL (enableRtl), locale-specific formatting, firstDayOfWeek
WCAG 2.2 compliant - Full accessibility with keyboard navigation and ARIA attributes
Form ready - Direct DOM binding, event-driven updates, form validation integration
Programmatic control - show(), hide(), focusIn(), focusOut(), navigateTo(), currentView()
Complete API Summary
Key Properties
Property
Type
Default
Description
value
Date
null
Selected date
min
Date
1900-01-01
Minimum selectable date
max
Date
2099-12-31
Maximum selectable date
format
string
null
Display format (e.g., "dd/MM/yyyy")
inputFormats
string[]
null
Accepted input formats array
placeholder
string
null
Placeholder text for the input
enabled
boolean
true
Enable or disable the component
readonly
boolean
false
Readonly state
allowEdit
boolean
true
Allow editing the input textbox
strictMode
boolean
false
Auto-correct out-of-range dates
showClearButton
boolean
true
Show/hide the clear button
showTodayButton
boolean
true
Show/hide today button
start
CalendarView
Month
Initial view: "Month", "Year", "Decade"
depth
CalendarView
Month
Deepest navigation level
enableMask
boolean
false
Enable masked date input
maskPlaceholder
object
{...}
Segment placeholders for masked input
enableRtl
boolean
false
Right-to-left rendering
locale
string
''
Culture/locale code
firstDayOfWeek
number
0
First day of week (0=Sunday)
weekNumber
boolean
false
Show week numbers
weekRule
WeekRule
FirstDay
Rule for first week of year
calendarMode
CalendarType
Gregorian
Calendar type (Gregorian or Islamic)
dayHeaderFormat
DayHeaderFormats
Short
Day name format in header
floatLabelType
FloatLabelType
Never
Floating label behavior
fullScreenMode
boolean
false
Full screen popup on mobile
openOnFocus
boolean
false
Open popup on input focus
serverTimezoneOffset
number
null
Server timezone offset
cssClass
string
null
Custom CSS class
htmlAttributes
object
{}
Additional HTML attributes
keyConfigs
object
null
Custom key action mappings
width
string | number
null
Component width
zIndex
number
1000
Popup z-index
enablePersistence
boolean
false
Persist state between reloads
Methods
Method
Returns
Description
show()
void
Opens the calendar popup
hide()
void
Closes the calendar popup
focusIn()
void
Sets focus to the component
focusOut()
void
Removes focus from the component
navigateTo(view, date)
void
Navigates to a specific view and date
currentView()
string
Returns the current calendar view name
getPersistData()
string
Gets persisted state data
destroy()
void
Destroys the component
Events
Event
Args Type
Description
change
ChangedEventArgs
Fires when the selected date changes
focus
FocusEventArgs
Fires when input gains focus
blur
BlurEventArgs
Fires when input loses focus
open
PopupEventArgs
Fires when the popup opens
close
PopupEventArgs
Fires when the popup closes
cleared
ClearedEventArgs
Fires when value is cleared
created
Object
Fires when component is created
destroyed
Object
Fires when component is destroyed
navigated
NavigatedEventArgs
Fires when calendar view is navigated
renderDayCell
RenderDayCellEventArgs
Fires when each day cell is rendered
Documentation & Navigation Guide
When you need help with DatePicker, guide to the appropriate reference:
DatePicker opens a calendar popup on click or Alt+Down arrow
DateRangePicker
The Syncfusion EJ2 DateRangePicker enables users to select a start and end date range with built-in support for presets, validation, custom formatting, separator configuration, full-screen mobile mode, and advanced range constraints (minDays, maxDays, min, max).
The Syncfusion EJ2 DateTimePicker combines date and time selection in a single control. It offers calendar + time list popup, customizable time steps, masking, strict validation, timezone handling, format customization, and full keyboard accessibility.
The Syncfusion EJ2 TimePicker is a lightweight and feature-rich control for selecting time values. It supports 12/24-hour formats, time stepping, min/max constraints, masked input, localization, full-screen mode, and easy integration into HTML forms.
