Text Field with input from Picker

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 .

Input type Picker

Input type DatePicker

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 Picker on Ipad

Input Type Date Picker on Ipad

The sample demo code and the source code is available on github https://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