Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Date Picker embeded in UIActionsheet with toolbar

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.00k
    Comment on it

    Sometimes a user is required to input a date in the application for example to provide the date of birth. The programmer have to make sure that the date entered by the user is in correct format that can be used by the app or the server. If a numpad is provided, the user might make a mistake and may input incorrect date or incorrect date format (For example: 30 Feb 2013). It would be a tedious and lengthy task to check the date for correct format.

    To save the programmer from all the extra work and make sure that the user inputs the correct date in the required field, XCode provides the user with a date picker. A Date picker is essentially a combination of multiple rotating wheels with numbers on them which enables the users to select the date in correct format. The date picker can be used to set time and alarms as well.

    The date Picker does not comes with a cancel button, so to implement the date picker, the programmer needs to embed the date picker in an Action sheet and attach a toolbar at the top to put the cancel button, and then program the button to hide the date picker.

    But here's another problem, if the user clicks on the text field, the keyboard is going to pop up along with the date picker. Therefore to prevent the keyboard from popping up, unselect the user interaction enabled option on the text field and place a custom transparent round rect button on the top of the text field and add IBAction on it.

    This will make sure that when the user clicks on the text field only date picker will show up.

    -(IBAction)startDateButtonTapped
    {
        [self showdatePicker];
    }
    
    -(void)showdatePicker
    {
        actionSheet = [[UIActionSheet alloc]init];
        [actionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];
        CGRect pickerFrame = CGRectMake(0, 50, 320, 500);
        datePicker = [[UIDatePicker alloc]initWithFrame:pickerFrame];
        datePicker.datePickerMode = UIDatePickerModeDate;
    
        NSDateFormatter *dateFormatter1 = [[NSDateFormatter alloc]init];
        dateFormatter1.dateStyle = NSDateFormatterShortStyle;
        [dateFormatter1 setDateFormat:@"MM/dd/yyyy"];
        NSDate *sDate = [dateFormatter1 dateFromString:[editDict objectForKey:@"startDateText"]];
            [datePicker setDate:sDate];   
        [actionSheet addSubview:datePicker];    
    
    //add toolbar on top of the Action sheet on which cancel and done buttons will be placed.
    
        UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 50)];
        [toolBar setBarStyle:UIBarStyleBlackTranslucent];    
        UIBarButtonItem *done = [[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(doneTapped:)];
        UIBarButtonItem *cancel = [[UIBarButtonItem alloc]initWithTitle:@"Cancel" style:UIBarButtonItemStyleDone target:self action:@selector(cancelTapped:)];    
           done.tag = tag;    
        NSArray *array = [[NSArray alloc]initWithObjects:done,cancel, nil];
        [toolBar setItems:array animated:YES];    
        [actionSheet addSubview:toolBar];
        [actionSheet showInView:self.view];
        [actionSheet setBounds:CGRectMake(0, 0, 320, 550)];    
    }
    
    //add functions to make the cancel and done buttons work as desired.
    
    -(void)doneTapped:(UIBarButtonItem *)sender
    {
        [actionSheet dismissWithClickedButtonIndex:0 animated:YES];
        NSDateFormatter *dateFormatter = [[NSDateFormatter alloc]init];
        dateFormatter.dateStyle = NSDateFormatterShortStyle;
        [dateFormatter setDateFormat:@"MM/dd/yyyy"];
        NSString *newDate = [NSString stringWithFormat:@"%@",[dateFormatter stringFromDate:datePicker.date]];
        [startDate setText:newDate];
     }
    
    -(void)cancelTapped:(UIBarButtonItem *)sender
    {
        [actionSheet dismissWithClickedButtonIndex:1 animated:YES];      
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: