display date in iphone

Question

HI, i am developing an application, where the user needs to enter the start date and end date to view the transactions within that specified date range. please suggest me the best way to display it in iphone. i saw the date picker , but it occupies most of my scren..

Answer 1

Visit the HIG and see what it has to say. iPhone HIG DOC

Answer 2

You could have fields for the start and end date and when the user taps on one of the fields, show a detail view with the picker. Checkout how you enter a date and time in the Calendar application.

I also recently saw some application where the date picker was shown as a modal view (scrolled in from the bottom, like a keyboard). Then it only occupies the screen while the user is actually choosing a date and disappears once she is done.

Update: OK, I don't have access to a Mac at the moment and typed this all up in notepad, so it probably won't work unmodified:

First, I'd create a custom UIViewController:

@interface MyDatePickerViewController : UIViewController <UIPickerViewDelegate> {
    UITextfield *textfieldBeingEdited;
    UIDatePicker *datePicker;
}
@property (nonatomic, assign) UITextfield *textfieldBeingEdited; // not sure about 'assign'
@property (nonatomic, retain) IBOutlet UIDatePicker *datePicker;
- (IBAction)dismiss:(id)sender;
@end

@implementation MyDatePickerViewController
@synthesize textfieldBeingEdited;
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)nibBundle {
    if (self = [super initWithNibName:nibName bundle:nibBundle]) {
        // do other initializations, if necessary
    }
    return self;
}
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // TODO: get the date from textfieldBeingEdited and set it in the UIDatePicker
    // You'd want the correct date preset when the view is animated in
    self.datePicker.date = /* the date */;
}
- (void)pickerView:(UIPickerView *)pickerView
      didSelectRow:(NSInteger)row
       inComponent:(NSInteger)component {
    NSDate *date = self.datePicker.date;
    // TODO: format the date
    NSString *formattedDate = ...;

    // update the text field
    textfieldBeingEdited.text = formattedDate;     
}
- (IBAction)dismiss:(id)sender {
    [self dismissModalViewControllerAnimated:YES];
}
@end

When the user taps on one of your date fields, you'd create a UIViewController and show it as a modal view:

UIViewController *datePickerViewController = [[MyDatePickerViewController alloc]
                                              initWithNibName:@"nib name goes here" bundle:nil];
datePickerViewController.textfieldBeingEdited = /*the field with the start date or end date*/;
[self presentModalViewController:datePickerViewController animated:YES];
[datePickerViewController release];

Some comments about the nib file:

• the class name of File's Owner would be MyDatePickerViewController
• add a UIDatePicker, connect it to the datePicker outlet, and set it's delegate and so on to File's Owner
• add a button so the user can dismiss the view and hook it up to the -dismiss: outlet in MyDatePickerViewController

Update 2: To prevent the keyboard from displaying, I made my view controller the delegate for the UITextField. Then, I present the modal view controller in -textFieldShouldBeginEditing: and return NO. Returning NO stops the keyboard from showing:

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
    MyDatePickerViewController *modal = [[MyDatePickerViewController alloc] initWithNibName:nil bundle:nil];
    modal.textfieldBeingEdited = self.dateField;
    [self presentModalViewController:modal animated:YES];
    [modal release];

    return NO;
}