iPhone Date Range Editor
Date range editing is a useful when dealing with calendars or time periods, the iPhone calendar provides a nice simple way of editing a date range. Just open up the Calendar hit the + button and edit the events date range, you get a lovely screen that looks like the image below:
Calendar Date Rang Editor
Unfortunately UIkit does not provide a basic control to edit a date range editor, it does provide the UIDatePicker which can be used to build your own date range editor and this is what I have set about to do. The basic idea is to emulate the basic functionality implemented in the calendar date range editor, i.e. The start and end dates can be selected which in turn alters the date displayed in the UIDatePicker and the control provides basic error detection changing the start date red when invalid and prevent savings if there is an invalid date range.
The following is the result of my attempt to recreate this control in a simple and customisable way, the header file below is rather long but there are only a few items exposed to interface builder to make it easy to setup.
//
// UIViewControllerDateRangeEditor.h
// UIViewControllerDateRangeEditor
//
#import
@interface UIViewControllerDateRangeEditor : UIViewController
{
@private
// ----------------------------------------
// control objects
// ----------------------------------------
IBOutlet UIBarButtonItem * leftBarButton; // Navigation Button to be used on the left : Cancel
IBOutlet UIBarButtonItem * rightBarButton; // Navigation Button to be used on the right : Save
// ----------------------------------------
// ----------------------------------------
// Display Content
// ----------------------------------------
IBOutlet UILabel * startLabel; // start label : used for highlighting and is not altered
IBOutlet UILabel * startDate; // start date label : used for highlighting and contains the current start date
IBOutlet UILabel * endLabel; // end label : used for highlighting and is not altered
IBOutlet UILabel * endDate; // end date label : used for highlighting and contains the current end date
// ----------------------------------------
// ----------------------------------------
// control objects
// ----------------------------------------
IBOutlet UIDatePicker * datePicker; // date picker : link the value change to the dateChanged action
// ----------------------------------------
// ----------------------------------------
// Start Date Colors
// ----------------------------------------
UIColor * normalColor;
UIColor * highlightColor;
// ----------------------------------------
// ----------------------------------------
// Buttons
// ----------------------------------------
IBOutlet UIButton * buttonStart; // button that is to be highlighted at the start
UIButton * buttonSelected;
UIImage * buttonImage;
// ----------------------------------------
// ----------------------------------------
// Date Formatter
// ----------------------------------------
NSDateFormatter * dateFormatter;
// ----------------------------------------
// ----------------------------------------
// current dateValue
// ----------------------------------------
NSTimeInterval startTimeInterval;
NSTimeInterval endTimeInterval;
NSTimeInterval minTimeInterval;
NSTimeInterval maxTimeInterval;
// ----------------------------------------
// ----------------------------------------
Boolean editingStartDate;
Boolean savePressed;
Boolean delayReset;
// ----------------------------------------
}
@property (nonatomic) NSTimeInterval startTimeInterval;
@property (nonatomic) NSTimeInterval endTimeInterval;
@property (nonatomic) NSTimeInterval minTimeInterval;
@property (nonatomic) NSTimeInterval maxTimeInterval;
@property (nonatomic, readonly) Boolean savePressed;
- (void) reset;
- (IBAction) cancel:(id)sender;
- (IBAction) save:(id)sender;
- (IBAction) dateChanged:(id)sender;
- (IBAction) selectStartDate:(id)sender;
- (IBAction) selectEndDate:(id)sender;
@end
The View controller provided with this article should permit you to create your own custom date range editor using interface builder, this can either be loaded manually or via the main nib. The sample project provide demonstrates how the view controller is setup and how you can use it in your own project.
Sample Images
Download : UIViewControllerDateRangeEditor.h, UIViewControllerDateRangeEditor.m
Sample Project : UIViewControllerDateRangeEditor
Example Usage :
// -------------------------------------------------------------------
// load the date range editor and push it onto the view stack
// -------------------------------------------------------------------
- (IBAction) editDateRange:(id)sender
{
if ( editor == nil )
{
editor = [[UIViewControllerDateRangeEditor alloc] initWithNibName:@"UIViewControllerDateRangeEditor" bundle:nil];
editor.title = @"Edit";
}
editor.startTimeInterval = startTime;
editor.endTimeInterval = endTime;
[[self navigationController] pushViewController:editor animated:TRUE];
}
// -------------------------------------------------------------------
// when the controller returns from the editor copy the date out if save has been
// pressed and reset the controller.
// -------------------------------------------------------------------
- (void) viewWillAppear:(BOOL)animated
{
if ( editor )
{
if ( editor.savePressed )
{
startTime = editor.startTimeInterval;
endTime = editor.endTimeInterval;
}
[editor reset];
}
}
As always the source is provided as is and use it at your own risk, feel free to alter and extend as you see fit. Have fun.
