Text Field with input from Picker : BCTextField

Hi Everyone , This post explains how to user BCTextField  ( source code is hosted on Github https://github.com/BharatJagtap/BCTextField ) in an iPhone App . This text field is capable of taking input from a picker in place of a regular keyboard. Lets  quickly see the final output .

1) Picker Text Field

First screen shot above displays a text field. When you tap on the text field , it brings the picker from the bottom instead of regular keyboard. User can then select a particular value from the picker. There is also done button which hides the picker. The code to create this text field looks like below.

    textField2 = [[BCTextField alloc]init];
    textField2.borderStyle = UITextBorderStyleRoundedRect;
    textField2.frame = CGRectMake(10, 100, 300, 30);
    textField2.bcDelegate = self;
    textField2.type = BCTextFieldTypePicker;
    textField2.items = [NSArray    arrayWithObjects:@”Red”,@”Green”,@”Blue”,@”Black”,@”White”, nil];
    textField2.placeholder = @”Color”;

[self.view addSubview: textField2];

You just need to set the type to BCTextFieldTypePicker to type property and an array of strings to the items property of the text field and rest will be taken care by the text field it self.

2) Date Picker Text Field
Second screen shot displays the date picker instead of a regular keyboard. Creating it is again very much simple . Lets check out how to do that.

    textField3 = [[BCTextField alloc]init];
    textField3.borderStyle = UITextBorderStyleRoundedRect;
    textField3.frame = CGRectMake(10, 150, 300, 30);
   // set the type of the text field as like in the above example but this time to
      BCTextFieldTypeDatePicker
     textField3.type = BCTextFieldTypeDatePicker;
  // setting the datePickerMode
    textField3.datePickerMode = UIDatePickerModeDateAndTime;
    // You can even set the dateformatter . the text displayed in the text field after selecting the date would be formatted using this date formatter object. Its an optional though . If you dont set it The default date would be displayed in the default format as in the screen shot
   NSDateFormatter * dtFormatter = [[NSDateFormatter alloc]init];
    [dtFormatter setDateFormat:@”dd-MM-yyyy”];
    textField3.dateFormatter = dtFormatter;
    [self.view addSubview:textField3];
Later on when you submit the form or anywhere in your controller , if you want to access the date then you can access the date property of the textField
   NSDate * date = textField3.date ;
BCTextField on iPad

BCTextField created on iPad will show popover for the picker and datePicker instead of bringing it from the bottom in place of the regular keyboard. This behavior makes more sense on ipad . It would look like like below on ipad.
Input Type Date Picker on 
The sample demo code and the source code is available on githubhttps://github.com/BharatJagtap/BCTextField . Download and drag the below files to your project . Thats it , you are good to use them.
1) BCTextField.h
2) BCTextField.m
3) left.png
4) right.png

Input Type Picker on Ipad
The sample demo code and the source code is available on githubhttps://github.com/BharatJagtap/BCTextField . Download and drag the below files to your project . Thats it , you are good to use them.
1) BCTextField.h
2) BCTextField.m
3) left.png
4) right.png

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>