CustomDatePicker

CustomDatePicker is an enhanced date selection widget that provides more flexibility and customization options than Flutter's built-in date picker. It offers multiple display formats, clear button functionality, and full theming support while maintaining all the standard date selection features.

✨ Key Features

• Multiple display formats (custom date formatting)
• Customizable UI (colors, borders, icons)
• Clear date functionality
• Flexible input options (text field or custom widget)
• Label support for form integration
• Theme-aware styling
• Formatted date callback
• Responsive design for all screen sizes

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_date_picker: ^0.0.1
  intl: ^0.20.2

💡 Basic Usage

Basic TextField Implementation

CustomDatePicker(
  initialDate: selectedDate,
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  onDateSelected: (date) => setState(() => selectedDate = date),
)

With Custom Formatting

CustomDatePicker(
  dateFormat: 'MMMM dd, yyyy',
  // ... other params
)

Custom Button Style

CustomDatePicker(
  dateWidget: Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      children: [
        Icon(Icons.calendar_today, color: Colors.white),
        Text('Select Date', style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
  // ... other params
)

⚙️ Configuration Options

🌟 Best Practices

1. Date Formatting

   // Common formats:
   'MM/dd/yyyy' → 12/31/2023
   'MMMM dd, yyyy' → December 31, 2023
   'EEE, MMM d' → Sun, Dec 31
   

2. Form Integration

   CustomDatePicker(
     showLabel: true,
     labelText: 'Birth Date',
     hintText: 'Select your birth date',
     // ... other params
   )
   

3. Validation Handling

   final formKey = GlobalKey<FormState>();
      
   Form(
     key: formKey,
     child: Column(
       children: [
         CustomDatePicker(
           initialDate: _selectedDate,
           // ... other params
         ),
         ElevatedButton(
           onPressed: () {
             if (_selectedDate == null) {
               ScaffoldMessenger.of(context).showSnackBar(
                 SnackBar(content: Text('Please select a date')),
               );
             }
           },
           child: Text('Submit'),
         ),
       ],
     ),
   )
   

4. Accessibility

   • Ensure sufficient color contrast
   • Provide clear labels
   • Support screen readers with semantic widgets

🔄 Comparison with Flutter's showDatePicker