
syncfusion-winforms-datetimepicker
Implement Syncfusion Windows Forms SfDateTimeEdit - an advanced DateTime picker control for editing dates and times. Use this when working with datetime input, date range validation, or custom display patterns. Covers editing modes (text/mask), date validation, and globalization support in WinForms applications.
- Installs
- 78
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-datetimepicker- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-winforms-datetimepicker automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Windows Forms DateTime Editor (SfDateTimeEdit)
The Syncfusion Windows Forms SfDateTimeEdit control allows users to edit DateTime values in text or mask format with support for minimum and maximum value validation, watermark, custom patterns, and globalization.
When to Use This Skill
Use this skill when you need to:
- Edit date and time values with formatted input and validation
- Implement date pickers for forms, appointments, or scheduling applications
- Restrict date ranges with minimum and maximum date constraints
- Display dates in various formats (long date, short date, time, custom patterns)
- Support mask mode editing with field-by-field navigation and up-down buttons
- Handle nullable dates with watermark text display
- Validate date input with custom error messages
- Support multiple cultures and globalization requirements
- Implement RTL (Right-to-Left) date editing for international applications
- Create appointment schedulers or date-based filtering interfaces
Component Overview
Key Features:
- Editing modes: Default (text) and Mask (formatted field navigation)
- Date range validation: MinDateTime and MaxDateTime properties
- Display patterns: LongDate, ShortDate, LongTime, ShortTime, FullDateTime, MonthDay, YearMonth, Custom
- Nullable dates: AllowNull with watermark text support
- Validation: Built-in validation with error messages
- Globalization: Culture-based formatting and patterns
- Navigation: Tab, arrow keys, up-down buttons for field navigation
- Appearance: Themes, fonts, colors, borders, calendar dropdown
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
Read this reference when you need to:
- Install SfDateTimeEdit via NuGet or designer
- Add the control to a Windows Forms project
- Create SfDateTimeEdit instance programmatically
- Set basic Value property
- Configure initial datetime picker setup
- Understand assembly requirements
Date Range and Value
📄 Read: references/date-range-value.md
Read this reference when you need to:
- Set and get Value property
- Implement MinDateTime and MaxDateTime constraints
- Enable nullable dates with AllowNull
- Use DateTimeText property for text-based values
- Handle value change events
- Validate date range restrictions
Display Patterns
📄 Read: references/display-patterns.md
Read this reference when you need to:
- Set DateTimePattern (LongDate, ShortDate, LongTime, etc.)
- Create custom display formats with Format property
- Display dates in different formats
- Culture-specific date formatting
- Month/year only displays
- Time-only displays
Editing Modes
📄 Read: references/editing-modes.md
Read this reference when you need to:
- Switch between Default and Mask editing modes
- Enable field-by-field navigation
- Configure ShowUpDown buttons
- Implement keyboard shortcuts
- Handle Tab and arrow key navigation
- Increment/decrement date fields
Appearance and Styling
📄 Read: references/appearance-styling.md
Read this reference when you need to:
- Apply themes with Style and ThemeName
- Customize fonts, colors, and borders
- Configure calendar dropdown appearance
- Show/hide dropdown button
- Set control size and layout
- Add tooltips
Validation and Features
📄 Read: references/validation-features.md
Read this reference when you need to:
- Configure validation modes
- Handle ValidationCompleted event
- Display validation error messages
- Set watermark text for null values
- Implement globalization and culture support
- Enable RTL (Right-to-Left) mode
- Set ReadOnly mode
Quick Start
Basic DateTime Picker
using Syncfusion.WinForms.Input;
// Create datetime editor
SfDateTimeEdit dateTimeEdit = new SfDateTimeEdit();
dateTimeEdit.Location = new Point(20, 20);
dateTimeEdit.Size = new Size(200, 30);
dateTimeEdit.Value = DateTime.Now;
// Add to form
this.Controls.Add(dateTimeEdit);
VB.NET:
Imports Syncfusion.WinForms.Input
' Create datetime editor
Dim dateTimeEdit As New SfDateTimeEdit()
dateTimeEdit.Location = New Point(20, 20)
dateTimeEdit.Size = New Size(200, 30)
dateTimeEdit.Value = DateTime.Now
' Add to form
Me.Controls.Add(dateTimeEdit)
Common Patterns
Pattern 1: Date Picker with Range Restriction
// Appointment date picker (next 30 days only)
SfDateTimeEdit appointmentDate = new SfDateTimeEdit();
appointmentDate.Value = DateTime.Now;
appointmentDate.MinDateTime = DateTime.Now;
appointmentDate.MaxDateTime = DateTime.Now.AddDays(30);
appointmentDate.DateTimePattern = DateTimePattern.LongDate;
this.Controls.Add(appointmentDate);
Pattern 2: Time Picker Only
// Time selection control
SfDateTimeEdit timePicker = new SfDateTimeEdit();
timePicker.Value = DateTime.Now;
timePicker.DateTimePattern = DateTimePattern.LongTime;
timePicker.DateTimeEditingMode = DateTimeEditingMode.Mask;
timePicker.ShowUpDown = true;
this.Controls.Add(timePicker);
Pattern 3: Custom Format Date Editor
// Custom format: "DD-MMM-YYYY" (e.g., "25-Dec-2024")
SfDateTimeEdit customDate = new SfDateTimeEdit();
customDate.Value = DateTime.Now;
customDate.DateTimePattern = DateTimePattern.Custom;
customDate.Format = "dd-MMM-yyyy";
this.Controls.Add(customDate);
Pattern 4: Nullable Date with Watermark
// Optional date field with watermark
SfDateTimeEdit optionalDate = new SfDateTimeEdit();
optionalDate.DateTimeEditingMode = DateTimeEditingMode.Mask;
optionalDate.AllowNull = true;
optionalDate.Value = null;
optionalDate.Watermark = "Select a date...";
this.Controls.Add(optionalDate);
Pattern 5: Mask Mode with Up-Down Buttons
// Field-by-field editing with increment/decrement
SfDateTimeEdit maskEditor = new SfDateTimeEdit();
maskEditor.Value = DateTime.Now;
maskEditor.DateTimeEditingMode = DateTimeEditingMode.Mask;
maskEditor.ShowUpDown = true;
maskEditor.DateTimePattern = DateTimePattern.ShortDate;
this.Controls.Add(maskEditor);
Pattern 6: Date Range Filter
// Date range for filtering (From/To dates)
SfDateTimeEdit fromDate = new SfDateTimeEdit();
fromDate.Value = DateTime.Now.AddDays(-30);
fromDate.DateTimePattern = DateTimePattern.ShortDate;
SfDateTimeEdit toDate = new SfDateTimeEdit();
toDate.Value = DateTime.Now;
toDate.DateTimePattern = DateTimePattern.ShortDate;
toDate.MinDateTime = fromDate.Value.Value;
// Update toDate minimum when fromDate changes
fromDate.ValueChanged += (s, e) => {
if (fromDate.Value.HasValue)
toDate.MinDateTime = fromDate.Value.Value;
};
this.Controls.Add(fromDate);
this.Controls.Add(toDate);
Pattern 7: Validated Date Entry
// Date entry with validation
SfDateTimeEdit validatedDate = new SfDateTimeEdit();
validatedDate.Value = DateTime.Now;
validatedDate.MinDateTime = new DateTime(2020, 1, 1);
validatedDate.MaxDateTime = new DateTime(2030, 12, 31);
validatedDate.ValidationCompleted += (s, e) => {
if (!e.IsValid)
{
MessageBox.Show($"Invalid date: {e.ErrorMessage}");
}
};
this.Controls.Add(validatedDate);
Key Properties
| Property | Type | Description |
|---|---|---|
Value | DateTime? | Current date-time value (nullable) |
MinDateTime | DateTime | Minimum allowed date-time |
MaxDateTime | DateTime | Maximum allowed date-time |
DateTimePattern | DateTimePattern | Display format (LongDate, ShortDate, LongTime, etc.) |
Format | string | Custom date-time format string |
DateTimeEditingMode | DateTimeEditingMode | Editing mode (Default or Mask) |
AllowNull | bool | Enable null value support |
Watermark | string | Text displayed when value is null |
ShowUpDown | bool | Show up-down buttons for mask mode |
DateTimeText | string | Date-time as text string |
ValidationErrorMessage | string | Custom validation error message |
Style | SfDateTimeEditStyle | Visual style/theme |
ReadOnly | bool | Enable read-only mode |
ToolTipText | string | Tooltip text for control |
Key Events
| Event | Description |
|---|---|
ValueChanged | Occurs when Value property changes |
ValidationCompleted | Occurs after validation is completed |
DateTimeTextChanged | Occurs when DateTimeText changes |
Common Use Cases
Use Case 1: Appointment Scheduling
Select appointment date and time with business hours constraints.
Use Case 2: Date Range Filtering
Implement "From Date" to "To Date" filters for reports or data queries.
Use Case 3: Birth Date Entry
Capture birth dates with past date restrictions and custom format.
Use Case 4: Time Entry
Time-only input for shift scheduling or time tracking.
Use Case 5: Optional Date Fields
Forms with nullable date fields showing watermark when empty.
Use Case 6: International Date Input
Culture-specific date formatting with RTL support for Arabic, Hebrew, etc.
Best Practices
- Set appropriate date ranges: Use MinDateTime and MaxDateTime to prevent invalid date selection
- Choose correct pattern: Use ShortDate for space-constrained UIs, LongDate for clarity
- Enable mask mode for precision: Use DateTimeEditingMode.Mask for field-by-field editing
- Show watermark for optional dates: Set AllowNull=true and provide clear watermark text
- Validate on ValueChanged: Implement validation logic in ValueChanged event handler
- Use custom formats sparingly: Stick to standard patterns for better user familiarity
- Consider culture settings: Test with different cultures if supporting international users
- Handle null values: Always check Value.HasValue before using Value.Value
- Provide tooltips: Use ToolTipText to guide users on date format or constraints
- Test keyboard navigation: Ensure Tab and arrow keys work smoothly in mask mode
Comparison with DateTimePickerAdv
Use SfDateTimeEdit when you need:
- Modern UI with themes
- Mask mode with field navigation
- Watermark support
- Better validation features
- Culture-specific patterns
Use DateTimePickerAdv when you need:
- Custom up-down/dropdown button appearance
- Legacy application compatibility
- Specific advanced customization not in SfDateTimeEdit
FAQ
What does the syncfusion-winforms-datetimepicker skill do?
Implement Syncfusion Windows Forms SfDateTimeEdit - an advanced DateTime picker control for editing dates and times. Use this when working with datetime input, date range validation, or custom display patterns. Covers editing modes (text/mask), date validation, and globalization support in WinForms applications.
How do I install syncfusion-winforms-datetimepicker?
Run npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-datetimepicker in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winforms-datetimepicker/ (personal) or .claude/skills/syncfusion-winforms-datetimepicker/ (project).
Which AI agents can use syncfusion-winforms-datetimepicker?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is syncfusion-winforms-datetimepicker safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains syncfusion-winforms-datetimepicker?
It is published by syncfusion in syncfusion/winforms-ui-components-skills. It has 78 recorded installs.
More from syncfusion/winforms-ui-components-skills
syncfusion-winforms-datagrid
syncfusion/winforms-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-winforms-button
syncfusion/winforms-ui-components-skills
Guide developers to implement and customize the Syncfusion Windows Forms SfButton control for desktop applications. Use this when creating interactive buttons with text, images, styling, and theming in Windows Forms applications. Covers implementation, customization, and interaction handling.
syncfusion-winforms-common
syncfusion/winforms-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-winforms-contextmenustrip
syncfusion/winforms-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-winforms-docking-manager
syncfusion/winforms-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-winforms-licensing
syncfusion/winforms-ui-components-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.