Styling UIDatePicker Programmatically

Axemasta

I have a register form which contains age, when a user enters their age a UIDatePicker will pop up and they can select a date. I am running the following code in the viewDidLoad to achieve this:

- (void)configureAgePicker {

    //Initialise date picker
    UIDatePicker *datePicker = [[UIDatePicker alloc] init];
    datePicker.datePickerMode = UIDatePickerModeDate;
    datePicker.locale = [[NSLocale alloc] initWithLocaleIdentifier:@"en_UK"];

    //Add toolbar to keyboard
    UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
    UIBarButtonItem *doneBtn=[[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStylePlain target:self action:@selector(resignKeyboards)];
    UIBarButtonItem *space=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    [toolBar setItems:[NSArray arrayWithObjects:space,doneBtn, nil]];

    //style popup
    toolBar.barTintColor = kPrimaryHighlightGradient;
    datePicker.backgroundColor = kPrimaryHighlight;
    datePicker.tintColor = kTextColor4;

    self.ageTextfield.inputAccessoryView = toolBar;
    self.ageTextfield.inputView = datePicker;

}

My problem is that I cannot change the colour properties of the date picker itself. I can set the colour of the toolbar (that works fine) but datePicker.backgroundColor & datePicker.tintColor don't appear to be doing anything. Here is an image of the textfield,

Popup UIDatePicker

I really want to change the colours of this popup to match the colour scheme of my app. I have styled UIDatePickers before through storyboards and remember having to use runtime variables to set the colour schemes (I couldn't through code). Since I am creating this date picker through code and adding it to the textfields keyboard, is there more I have to do to change the colour scheme?

Axemasta

Ok so I've figured out how to set the colours, You cannot use the .backgroundColor or .tintColor properties in this case. Instead you have to set the value for key (which is the same as the environmental variables!

[datePicker setValue:kTextColor4 forKey:@"textColor"];

A̶n̶d̶ ̶t̶o̶ ̶s̶e̶t̶ ̶t̶h̶e̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶u̶r̶ ̶(̶a̶f̶t̶e̶r̶ ̶m̶u̶c̶h̶ ̶f̶r̶u̶s̶t̶r̶a̶t̶i̶o̶n̶)̶ ̶I̶ ̶f̶o̶u̶n̶d̶ ̶y̶o̶u̶ ̶c̶a̶n̶ ̶s̶e̶t̶ ̶a̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶u̶r̶ ̶o̶n̶ ̶t̶h̶e̶ ̶d̶a̶t̶e̶ ̶p̶i̶c̶k̶e̶r̶'̶s̶ ̶l̶a̶y̶e̶r̶ ̶(̶d̶u̶h̶)̶,̶ ̶ ̶ ̶ ̶ ̶ ̶_̶d̶a̶t̶e̶P̶i̶c̶k̶e̶r̶.̶l̶a̶y̶e̶r̶.̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶C̶o̶l̶o̶r̶ ̶=̶ ̶k̶B̶a̶c̶k̶g̶r̶o̶u̶n̶d̶C̶o̶l̶o̶r̶1̶.̶C̶G̶C̶o̶l̶o̶r̶;̶ ̶ ̶N̶o̶w̶ ̶m̶y̶ ̶d̶a̶t̶e̶p̶i̶c̶k̶e̶r̶ ̶p̶o̶p̶u̶p̶ ̶i̶s̶ ̶s̶t̶y̶l̶e̶d̶ ̶c̶o̶r̶r̶e̶c̶t̶l̶y̶!̶

the solution above did set a background colour but not the right colour (it had a whiteish tint) and I could not for the life of me find the layer responsible. What I found is that I had my textfield configured wrong (style set to dark instead of default) as to set the background colour you MUST set the keyboard to default.

_datePicker.backgroundColor = kBackgroundColor1;

enter image description here

And then your date picker will look nice and fancy like so: enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related