How to display datepicker like that in iOS 7 calendar UIDatePicker

Question

I'm new to iOS development, learning bits and pieces. I've few more queries in continuation to another thread (iOS7: How does Apple make a navigation controller look like a uiactionsheet in the calendar app) on iOS 7 new event creation in default calendar that's shown when we click + on UINavigationBar (I assume).

Does anyone know how to create UIDatePicker so that its displayed/hidden when I click on Start/End date field? I saw one video where UIActionSheet was used in XCode 4.5, but in that user needs to click on Done etc button to hide it. In iOS 7 calendar its hidden when I click outside picker i.e. on Start Date field. I hope question is clear?

Kindly advise how to achieve this feature?

Baziotes

The calendar app uses a UITableViewController. When the user taps on the start or end date, it adds a new UITableViewCell containing the UIDatePicker. While displaying the date picker, if any other cell in the table is selected, the cell containing the date picker is removed from the table. If you carefully tap on a gray area (i.e., not on a cell), you'll notice the date picker is not removed. – Gynaeco

Thank you very much @bobnoble, that makes sense. Pardon my lack of knowledge, as I mentioned I'm still learning. so asking more here I want the UI screen nearly same to the one shown on iOS 7's default calendar that I described above. So I assume, I'll add UITableViewCells in UITableViewController's table view on my storeyboard and put in required fields, is that correct ? or I need to add these programmatically? If I add at design time - how will ReusableIdentifier work? so far I was populating UITableview with data from sqlite and set this identifier to one value i.e. "Cell". – Baziotes

You can create multiple prototype UITableViewCells using storyboard, each with a unique identifier. – Gynaeco

absolutely brilliant @Gynaeco :-), thank you for guiding. – Baziotes

There is one sample source code provided by Apple, developer.apple.com/library/ios/samplecode/DateCell/… just found out. seems many people have asked for this one. #18974073 – Baziotes

Answer 1

You can try and use the OCCalendarController, Its so simple and comfortable. Just download the zipped file and get all the files named after the prefix OC.

Of which in OCCalendarViewController.m you can make the necessary changes by adding Okay or Cancel buttons programmatically, yourself.

To call the calendar view in your main file use the lines,

//Here's where the magic happens calVC = [[OCCalendarViewController alloc] initAtPoint:CGPointMake(150, 50) inView:self.view]; calVC.delegate = self; [self.view addSubview:calVC.view];

Also do include the following delegate to receive the date selection(if the user selects a date or date range)

- (void)completedWithStartDate:(NSDate *)startDate endDate:(NSDate *)endDate {

Finally you can also customize the arrow(which appears along with the calendar view) by using the code,

[OCCalendarViewController alloc] initAtPoint:insertPoint inView:self.view arrowPosition:OCArrowPositionRight]

Rest of the details can be found on the read me file. Try out yourself, It'll work like a charm.Cheers!

Gutbucket

This code is old and unsupported. You're probably better off looking elsewhere. – Neogothic

Answer 2

My open source project HSUDatePicker may help you. https://github.com/tuoxie007/HSUDatePicker

Exemplify