The Ins and Outs of Dating

How to make an in-line date picker

Phoenix, AZ

I am currently working on social networking app of sorts, Collude. One of the features will be a UIDatePickerView that appears and disappears when the date above it is selected– an in-line date picker.

In-line date pickers, were a new feature in iOS7. This feature can be found in a number of Apple iOS apps such and Calendar and Reminder. While they can be elegant and intuitive to the user, they can be difficult to construct on your own. This piece will provide a step-by-step guide on how to assemble an in-line date picker.

1 |First let’s set up our view controller.

We need to create a static table view. Create a new cocoa touch class sublcassing UITableViewController. In the storyboard, chanYou will also need to call the <UITextFieldDelegate> in the h. file.

Let’s get some properties going.

//displays time on view, can be changed by datePicker
@property (weak, nonatomic) IBOutlet UITextField *timeDisplay;
//our UIDatePicker which we have connected from our storyboard
r@property (weak, nonatomic) IBOutlet UIDatePicker *datePicker;
@property (strong, nonatomic) NSDateFormatter *dateFormatter;
@property (strong, nonatomic) NSDate *selectedDate;
@property (nonatomic) BOOL datePickerIsShowing;

2 |Let’s setup our tableView delegate methods

//Since we are using a static tableview, we can use the constants to set parameters for our tableview. Using define, we can put all of our “magic numbers” in one place, in case we need to change them later.
#define kDatePickerIndex 2
#define kDatePickerCellHeight 164
//If datePickerIsShowing, set the height of the cell to 164 (the height of a date picker). If !datePickerIsShowing, set the height of the cell to 0

-(CGFloat)tableView☹UITableView *)tableView heightForRowAtIndexPath: (NSIndexPath *)indexPath 
{
CGFloat height = self.tableView.rowHeight;
   if (indexPath.row == kDatePickerIndex)
{
height = self.datePickerIsShowing ?
kDatePickerCellHeight:0.0f;
}
return height;
}
//When the row with the date displayed is selected….
-(void)tableView☹UITableView *)tableView didSelectRowAtIndexPath☹NSIndexPath *)indexPath
{
if (indexPath.row == 1)
{
//If the datePickerIsShowing…
if (self.datePickerIsShowing)
{
      //…hide it!
[self hideDatePickerCell];

//But if the !datePickerIsShowing
}else {
   //…show it!
[self showDatePickerCell];
}
}
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}

3 | Now let’s set up the datePicker

- (void)setupTimeDisplay
{
//The date formatter will inform which time options are shown on the date picker
    self.dateFormatter = [[NSDateFormatter alloc] init];
    [self.dateFormatter setDateStyle:NSDateFormatterLongStyle];
    [self.dateFormatter setTimeStyle:NSDateFormatterLongStyle];
//Set’s the the defailt date to today’s date
    NSDate *defaultDate = [NSDate date];
//set the text and tint of the date formatter
    self.timeDisplay.text = 
[self.dateFormatterstringFromDate:defaultDate];
    self.timeDisplay.textColor = [self.tableView tintColor];
//set’s the default state for the date picker to today’s date
    self.selectedDate = defaultDate;
//upon view did load, hide the date picker cell
    [self hideDatePickerCell];
}

4 | Finally, let’s set up some methods to animate the appearance and dissapearance of the datePicker

//when this method is called///
- (void)showDatePickerCell
{
//…change the BOOLEAN to indicate the the date picker is (about to be) shown…
   self.datePickerIsShowing = YES;
//…refresh the tableview…
   [self.tableView beginUpdates];
   [self.tableView endUpdates];
//…seems like a good time to stop hiding the date picker…
   self.datePicker.hidden = NO;
//Now some setup. Turn the date picker clear so we can have it fade in during our animation.
   self.datePicker.alpha = 0.0f;
//Let’s get our Walt Disney on and animate the appearance of this date picker.
   [UIView animateWithDuration:0.25 animations:^{
      self.datePicker.alpha = 1.0f;
   }];
}
- (void)hideDatePickerCell {
//Toggle the BOOL to represent the datePickerCell is (about to be) hidden
   self.datePickerIsShowing = NO;
   [self.tableView beginUpdates];
   [self.tableView endUpdates];
//Animation time again. This time were turning the date picker clear.
   [UIView animateWithDuration:0.25
   animations:^{
       self.datePicker.alpha = 0.0f;
   }
       completion:^(BOOL finished){
       //when we’re done animating, hide the picker
         self.datePicker.hidden = YES;
      }];
}
Grand Canyon, AZ
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.