Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display datepicker on tapping on textfield

Tags:

How can I display a datetimepicker control on tap of a textbox?

I have a user interface that has arrival and departure text fields, and when a user clicks on arrival textbox it should bring up a datetimepicker control up instead of a keyboard and the same with the departure textbox.

like image 858
appuser Avatar asked May 20 '11 16:05

appuser


People also ask

How do I show date picker on TextField tap and get formatted date in Flutter?

To Implement Date Picker on TextField() and TextFormField(): First of all, you need to add intl Flutter package in your dependency to get formatted date output from date picker. Add the following line in your pubspec. yaml file to add intl package to your project.

How do you customize the date picker in Flutter?

Here's how you do it: Step 1: Inside the showDatePicker function, add the builder paramter. Step 2: Inside the builder parameter, return the Theme widget. Step 3: Inside the Theme widget, add the data property and define the new theme by specifying the colorScheme for the date picker dialog.


1 Answers

You can use inputView and inputAccessoryView properties of the text field for this. Create the date picker and set it to the input views of the two text fields. Also create another view for the Done button and it as their accessory view. You will need that button to dismiss the input view.

The Done button must be wired up to function which basically does this –

if ( [textField1 isFirstResponder] ) {     [textField1 resignFirstResponder]; } else if ( [textField2 isFirstResponder] ) {     [textField2 resignFirstResponder]; } 

Another option would be to subclass UITextField and override inputView and inputAccessoryView. This is the way to go when there are loads of them.

Example

@interface CustomKeyboardAppDelegate : NSObject <UIApplicationDelegate> { ...  @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITextField *textField; @property (nonatomic, retain) IBOutlet UIToolbar *accessoryView; @property (nonatomic, retain) IBOutlet UIDatePicker *customInput;  - (IBAction)dateChanged:(id)sender; - (IBAction)doneEditing:(id)sender; @end 

In the XIB, Pull out a UIToolbar and a UIDatePicker but don't attach it to the view. Connect the outlets appropriately. dateChanged: responds to changes in the date picker and doneEditing: is called when the Done button in the tool bar is clicked. Connect them too. The methods are implemented as listed below.

@implementation CustomKeyboardAppDelegate  @synthesize window=_window; @synthesize textField = _textField; @synthesize accessoryView = _accessoryView; @synthesize customInput = _customInput;  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {     self.textField.inputView = self.customInput;     self.textField.inputAccessoryView = self.accessoryView;     ...     }  ...  - (IBAction)dateChanged:(id)sender {     UIDatePicker *picker = (UIDatePicker *)sender;      self.textField.text = [NSString stringWithFormat:@"%@", picker.date]; }  - (IBAction)doneEditing:(id)sender {     [self.textField resignFirstResponder]; } @end 

The last two methods will bloat up as more text fields depend on this picker.

like image 106
Deepak Danduprolu Avatar answered Sep 19 '22 15:09

Deepak Danduprolu