🔹 Kt-Date

Overview

KT Date is a beautifully customizable date picker control for WinForms applications. It transforms the standard DateTimePicker into a modern, stylish component with advanced styling capabilities including gradient backgrounds, customizable borders, smooth squircle shapes, and flexible text alignment. Perfect for creating polished, professional-looking date selection interfaces in your .NET applications.

Use Cases

Modern Forms: Create sleek, contemporary data entry forms with styled date inputs
Dashboard Applications: Build visually consistent date filters and selectors with gradient backgrounds
Reporting Tools: Add elegant date range pickers for report generation
Scheduling Systems: Design intuitive appointment and event date selectors
Data Management: Enhance CRUD forms with professional-looking date fields
Theme-Aware Apps: Automatically adapt to light/dark themes with KT Color integration

Key Features

✨ Advanced Styling

Squircle Shapes: Smooth, iOS-style rounded corners with percentage-based radius (0.0-0.99) or pixel values
Gradient Backgrounds: Full KT Brush support for solid colors, linear/radial gradients
Customizable Borders: Adjustable color, width, and independent border styling
Transparent Backgrounds: Seamlessly blend with any parent container

🎨 Flexible Layout

Icon positioning (left, right, or none)
Text alignment options (left, center, right)
Adjustable text margins
Responsive sizing

🌙 Theme Intelligence

Automatic theme change detection via KT Color
Disabled state styling
Smart color fallbacks and inheritance

📅 Enhanced Functionality

Optional week number display
Auto-sizing dropdown calendar

Properties Reference

Property

Type

Default

Description

Background

KtBrush

None

Sets the background using solid colors, gradients, or patterns

Border

KtColor

Empty

Sets the border color

BorderRadius

float?

0.5

Border radius (0.0-0.99 = percentage, ≥1 = pixels, null = fully rounded)

BorderWidth

float

1.5

Border thickness in pixels

TextAlign

TextAlign

Left

Aligns date text (Left, Center, Right)

DisplayWeekNumbers

bool

false

Shows week numbers in dropdown calendar

Icon

Image

null

Custom Icon Image

IconColor

KtColor

Empty

Calendar icon color

IconAlign

Indicator

Right

Icon position (Left, Right, None)

TextMargin

int

Left padding for text

TextColor

KtColor

Empty

Date text color

Usage Examples

Example 1: Modern Squircle Date Picker

var datePicker = new KtDate();
datePicker.Background = new KtBrush(KtColor.Primary);
datePicker.Border = KtColor.Primary;
datePicker.BorderRadius = 0.5f; // 50% rounded (squircle)
datePicker.BorderWidth = 2f;
datePicker.TextColor = KtColor.White;
datePicker.IconColor = KtColor.White;
datePicker.Height = 44;

Example 2: Gradient Background Style

var datePicker = new KtDate();

// Create linear gradient background
var gradientBrush = new KtBrush();
gradientBrush.Type = KtBrush.BrushType.LinearGradient;
gradientBrush.GradientStops = new[] 
{
    new KtBrush.GradientStop(KtColor.Info, 0f),
    new KtBrush.GradientStop(KtColor.Primary, 1f)
};

datePicker.Background = gradientBrush;
datePicker.BorderRadius = 12f; // 12px radius
datePicker.BorderWidth = 0f; // No border
datePicker.TextColor = KtColor.White;
datePicker.IconColor = KtColor.White;

Example 3: Outlined Style (Border Only)

var datePicker = new KtDate();
datePicker.Background = KtBrush.None; // Transparent background
datePicker.Border = KtColor.Neutral;
datePicker.BorderWidth = 1.5f;
datePicker.BorderRadius = 8f;
datePicker.TextColor = KtColor.Neutral;
datePicker.IconColor = KtColor.Neutral;
datePicker.Height = 40;

Example 4: Pill-Shaped Design

var datePicker = new KtDate();
datePicker.Background = new KtBrush(KtColor.Success);
datePicker.BorderRadius = null; // Fully rounded (pill shape)
datePicker.BorderWidth = 0f;
datePicker.TextColor = KtColor.White;
datePicker.IconColor = KtColor.White;
datePicker.Height = 36;
datePicker.Width = 200;

Example 5: Minimalist Centered Design

var datePicker = new KtDate();
datePicker.IconLocation = KtDate.Indicator.None;
datePicker.DateTextAlign = KtDate.TextAlign.Center;
datePicker.Background = new KtBrush(KtColor.Surface);
datePicker.Border = KtColor.Border;
datePicker.BorderRadius = 6f;
datePicker.BorderWidth = 1f;
datePicker.TextMargin = 20;

Example 6: With Week Numbers

var datePicker = new KtDate();
datePicker.DisplayWeekNumbers = true;
datePicker.Background = new KtBrush(KtColor.White);
datePicker.Border = KtColor.Primary;
datePicker.BorderRadius = 10f;
datePicker.BorderWidth = 2f;
datePicker.Width = 280; // Wider for week numbers
datePicker.TextColor = KtColor.Neutral;

Example 7: Radial Gradient Effect

var datePicker = new KtDate();

// Create radial gradient
var radialBrush = new KtBrush();
radialBrush.Type = KtBrush.BrushType.RadialGradient;
radialBrush.GradientStops = new[]
{
    new KtBrush.GradientStop(KtColor.Warning, 0f),
    new KtBrush.GradientStop(KtColor.Danger, 1f)
};

datePicker.Background = radialBrush;
datePicker.BorderRadius = 0.7f; // 70% rounded
datePicker.TextColor = KtColor.White;
datePicker.IconColor = KtColor.White;

Example 8: Disabled State

var datePicker = new KtDate();
datePicker.Background = new KtBrush(KtColor.Surface);
datePicker.Border = KtColor.Border;
datePicker.DisabledColor = KtColor.Disabled;
datePicker.BorderRadius = 8f;
datePicker.Enabled = false; // Shows DisabledColor

Understanding Border Radius

KT Date uses an intelligent squircle algorithm for smooth, modern corners:

Percentage Mode (0.0 - 0.99)

Values between 0 and 0.99 are treated as percentages of control height:

0.0 = Sharp corners (0% rounded)
0.25 = 25% rounded (subtle curves)
0.5 = 50% rounded (balanced squircle) ⭐ Default
0.75 = 75% rounded (very smooth)
0.99 = 99% rounded (nearly circular)

Pixel Mode (≥ 1.0)

Values of 1.0 or greater are treated as pixel measurements:

1f = 1px corner radius
8f = 8px corner radius
16f = 16px corner radius

Fully Rounded (null)

Setting BorderRadius = null creates a perfect pill shape (100% rounded ends).

Design Guidelines

Border Radius Best Practices

For Modern Apps (Recommended)

BorderRadius = 0.5f; // Squircle shape, iOS-style
BorderRadius = 0.6f; // Smoother curves

For Traditional Apps

BorderRadius = 4f;   // Subtle 4px radius
BorderRadius = 8f;   // Standard 8px radius

For Pill Buttons

BorderRadius = null; // Fully rounded ends

Background Styling Tips

Solid Backgrounds: Use new KtBrush(KtColor.Primary) for simple, flat designs
Gradients: Create depth with linear or radial gradients
Transparent: Set Background = KtBrush.None for outline-only styles
Contrast: Ensure text remains readable against background

Icon Positioning Strategy

Right (Default): Best for LTR languages, text flows naturally
Left: Better for RTL layouts or right-aligned forms
None: Cleaner, minimalist look when icon isn't needed

Sizing Recommendations

Use Case

Height

Width

Compact Forms

32-36px

180-200px

Standard Forms

40-44px

220-250px

Touch-Friendly

48-52px

250-280px

With Week Numbers

Any

280-320px

Advanced Features

KT Brush Integration

KT Date fully supports KT Brush for advanced background rendering:

Solid Colors: Single-color fills
Linear Gradients: Horizontal, vertical, or diagonal color transitions
Radial Gradients: Circular color spreads from center
Pattern Fills: Custom brush patterns (when supported)

// Example: Diagonal gradient
var brush = new KtBrush();
brush.Type = KtBrush.BrushType.LinearGradient;
brush.Angle = 45; // Diagonal
brush.GradientStops = new[]
{
    new KtBrush.GradientStop(KtColor.Info, 0f),
    new KtBrush.GradientStop(KtColor.Success, 1f)
};
datePicker.Background = brush;

Theme-Aware Rendering

KT Date automatically responds to system theme changes through KT Color:

// Colors auto-adjust when theme changes
datePicker.Border = KtColor.Border;        // Adapts to theme
datePicker.TextColor = KtColor.Content;    // Auto-adjusts
datePicker.Background = new KtBrush(KtColor.Surface);

The dropdown calendar automatically:

Matches the control width
Adjusts for week numbers display
Optimizes height for best viewing
Respects DisplayWeekNumbers property

High-Quality Graphics

Built with:

Anti-aliasing: Smooth edges at any size
High-quality interpolation: Crisp icon rendering
Double-buffering: Flicker-free updates
DPI awareness: Sharp rendering on high-DPI displays

Methods

Render()

Manually refreshes the control's appearance. Useful when programmatically changing multiple properties:

datePicker.Border = KtColor.Primary;
datePicker.Background = new KtBrush(KtColor.Info);
datePicker.BorderRadius = 10f;
datePicker.Render(); // Force refresh

✅ Do's

Use squircle mode (0.5f) for modern, iOS-like aesthetics
Leverage KT Color for automatic theme adaptation
Set appropriate heights (minimum 32px for accessibility)
Use gradients sparingly for visual interest without overwhelming
Test disabled states to ensure clear visual feedback
Match styling across all date pickers in your form

❌ Don'ts

Avoid extreme radius values that don't match control height
Don't mix design styles (squircle vs sharp corners) in one form
Don't sacrifice contrast for aesthetics - readability first
Avoid overly complex gradients with too many color stops
Don't forget disabled styling - always set DisabledColor

Common Patterns

Pattern 1: Form Input Style

// Clean, professional form input
datePicker.Background = new KtBrush(KtColor.White);
datePicker.Border = KtColor.Border;
datePicker.BorderRadius = 8f;
datePicker.BorderWidth = 1f;
datePicker.TextColor = KtColor.Content;

Pattern 2: Accent Button Style

// Prominent, colorful date selector
datePicker.Background = new KtBrush(KtColor.Primary);
datePicker.BorderRadius = 0.5f;
datePicker.BorderWidth = 0f;
datePicker.TextColor = KtColor.White;
datePicker.IconColor = KtColor.White;

Pattern 3: Minimal Outline

// Lightweight, unobtrusive
datePicker.Background = KtBrush.None;
datePicker.Border = KtColor.Border;
datePicker.BorderRadius = 6f;
datePicker.BorderWidth = 1f;

Troubleshooting

Q: My border radius isn't working as expected

Check if you're using percentage mode (0.0-0.99) or pixel mode (≥1.0)
Ensure control height accommodates the radius value
Try BorderRadius = 0.5f for reliable squircle shape

Q: Background gradient isn't showing

Verify Background is set to a KtBrush with gradient configuration
Check that gradient stops are properly defined
Ensure BorderWidth > 0 if you want both border and background

Q: Icon color not changing

Set IconColor property explicitly
If using KtColor.Empty, icon inherits from TextColor
Call Render() after changing icon color

Q: Calendar dropdown is too narrow

Increase control Width property
For week numbers, use minimum 280px width
Dropdown auto-sizes to match control width

KT Color Utility - Advanced color management and theming
KT Brush Utility - Gradient and pattern rendering

Previous🔹 Kt-Select Next🔹 Kt-Divider

Last updated 16 days ago

Was this helpful?

Overview

Use Cases

Key Features

Properties Reference

Usage Examples

Example 1: Modern Squircle Date Picker

Example 2: Gradient Background Style

Example 3: Outlined Style (Border Only)

Example 4: Pill-Shaped Design

Example 5: Minimalist Centered Design

Example 6: With Week Numbers

Example 7: Radial Gradient Effect

Example 8: Disabled State

Understanding Border Radius

Percentage Mode (0.0 - 0.99)

Pixel Mode (≥ 1.0)

Fully Rounded (null)

Design Guidelines

Border Radius Best Practices

Background Styling Tips

Icon Positioning Strategy

Sizing Recommendations

Advanced Features

KT Brush Integration

Theme-Aware Rendering

Auto-Sizing Calendar Dropdown

High-Quality Graphics

Methods

Render()

✅ Do's

❌ Don'ts

Common Patterns

Pattern 1: Form Input Style

Pattern 2: Accent Button Style

Pattern 3: Minimal Outline

Troubleshooting

Related Resources