How do you change the color of a UIDatePicker?

Question

If anyone has ever wanted to know how to change the background color of a UIDatePicker (the portion that goes around the actual spinner), see my answer below.

Answer 1

To set the color that you want just alter the createCover method to set cover to whatever color you desire.

//CustomizableDatePicker.m

#import "CustomizableDatePicker.h"
#import <QuartzCore/QuartzCore.h>

#define TOP_HEIGHT 9.7f
#define BOTTOM_HEIGHT TOP_HEIGHT
#define DATE_AND_TIME_MODE_ACTUAL_PICKER_WIDTH 302.5f
#define DATE_MODE_ACTUAL_PICKER_WIDTH 280.0f
#define TIME_MODE_ACTUAL_PICKER_WIDTH 176.0f

@interface CustomizableDatePicker()
@property (nonatomic, weak) UIView *myLeftCover;
@property (nonatomic, weak) UIView *myRightCover;
@property (nonatomic, weak) UIView *myTopCover;
@property (nonatomic, weak) UIView *myBottomCover;
@end

@implementation CustomizableDatePicker
@synthesize myLeftCover = _myLeftCover, myRightCover = _myRightCover, myTopCover = _myTopCover, myBottomCover = _myBottomCover;

- (void) setDatePickerMode:(UIDatePickerMode)datePickerMode
{
    [super setDatePickerMode:datePickerMode];

    [self setNeedsLayout];
}

- (void) awakeFromNib
{
    [self addCoverViews];
    self.layer.cornerRadius = 10;
    self.clipsToBounds = YES;
    [self setNeedsLayout];
    [self setNeedsDisplay];
}

- (id) init
{
    if(self = [super init])
    {
        [self addCoverViews];
        self.layer.cornerRadius = 10;
        self.clipsToBounds = YES;
        [self setNeedsLayout];
        [self setNeedsDisplay];
    }

    return self;
}

/*
 * Creates, but does NOT set the frames of, the 4 covers
 */
- (void) addCoverViews
{
    UIView *left = [self createCover];
    self.myLeftCover = left;
    [self addSubview:left];

    UIView *right = [self createCover];
    self.myRightCover = right;
    [self addSubview:right];

    UIView *top = [self createCover];
    self.myTopCover = top;
    [self addSubview:top];

    UIView *bottom = [self createCover];
    self.myBottomCover = bottom;
    [self addSubview:bottom];
}

/*
 * Helper function to create one cover
 */
- (UIView *) createCover;
{
    UIView *cover = [[UIView alloc] init];
    cover.backgroundColor = [UIColor whiteColor];
    cover.alpha = .55;
    return cover;
}

- (void) layoutSubviews
{
    float pickerWidth;
    if(self.datePickerMode == UIDatePickerModeDateAndTime)
    {
        pickerWidth = DATE_AND_TIME_MODE_ACTUAL_PICKER_WIDTH;
    }
    else if(self.datePickerMode == UIDatePickerModeDate)
    {
        pickerWidth = DATE_MODE_ACTUAL_PICKER_WIDTH;
    }
    else if(self.datePickerMode == UIDatePickerModeTime)
    {
        pickerWidth = TIME_MODE_ACTUAL_PICKER_WIDTH;
    }
    // Set left frame
    {
        float xOrigin = 0;
        float yOrigin = TOP_HEIGHT;
        float width = (self.frame.size.width - pickerWidth) / 2;
        float height = self.frame.size.height - TOP_HEIGHT - BOTTOM_HEIGHT ;
        self.myLeftCover.frame = CGRectMake(xOrigin, yOrigin, width, height);
    }
    // Set top frame
    {
        float xOrigin = 0;
        float yOrigin = 0;
        float width = self.frame.size.width;
        float height = TOP_HEIGHT;
        self.myTopCover.frame = CGRectMake(xOrigin, yOrigin, width, height);
    }
    // Set right frame
    {
        float xOrigin = (self.frame.size.width - pickerWidth) / 2 + pickerWidth;
        float yOrigin = TOP_HEIGHT;
        float width = (self.frame.size.width - pickerWidth) / 2;
        float height = self.frame.size.height - TOP_HEIGHT - BOTTOM_HEIGHT ;
        self.myRightCover.frame = CGRectMake(xOrigin, yOrigin, width, height);
    }
    // Set bottom frame
    {
        float xOrigin = 0;
        float yOrigin = self.frame.size.height - BOTTOM_HEIGHT;
        float width = self.frame.size.width;
        float height = BOTTOM_HEIGHT;
        self.myBottomCover.frame = CGRectMake(xOrigin, yOrigin, width, height);
    }
}

@end




//CustomizableDatePicker.h
#import <UIKit/UIKit.h>

/*
 * Allows for changing the color of UIDatePickers...Pretty useful, huh? :)
 */
@interface CustomizableDatePicker : UIDatePicker

@end