Blog

Swift Calendar & Date Picker Tutorial. How to do it?

In this post I’d like to show you how to make a very simple calendar picker - using class UICollectionView. Why? Sometimes default UIDatePicker isn’t sufficient enough. For example, when you need horizontal date picker or when there is no place for the standard date picker. OK, let’s see how to do it.

The Swift Callendar Tutorial

Collection View has two default scrolling values: horizontal and vertical. I’ll show you how to make a horizontal calendar picker, but there are no limits in modifying it. Also, we can create not only a calendar picker (with days, weeks, months) but be more detailed and play with hours & minutes or everything that you want. It’s very easy to create an array with values that suits you best.

After creating a simple view controller in our new project, you should go to your Storyboard and add UICollectionView controller. Don’t forget to set delegate and dataSource outlets. In your View Controller declare UICollectionViewDelegate and UICollectionViewDataSource protocols. Outlets for our Collection View (calendarCollectionView) and default Label (dateLabel) are also needed.

Now, let’s set variables for default current date and array where we’ll keep our objects:

Variable currentDate obviously keeps a current day, so it can set our initial value. But we’ll need some function to set values from Collection View. Let’s declare it in separate file - CalendarModel. Our function will look like this:

A few words of comment: I’ve decided that I want to have two weeks in my calendar picker. This is why the numberOfDays is set for 14. Our function will produce an array with 14 days with format “day name, day number, month number”. But first, we need to delegate our class - using, for example, CalendarDelgate.

Next, in ViewController we create func that will get arrayOfDates and transform it to array of Ints (getCalendar). Now, it’s very easy to put our array into Collection View using default func cellForItemAt.

Now we should add label into Collection View and create UICollectionViewCell for this purpose. When it’s done, just add the code that produces arrayOfDates in correct place:

After pinning dateLabel to Collection View Cell we can add func that will help us to see what date is selected on tap:

After this we’ll need to pass selected date to selectedDateLabel in ViewController. This is quite easy. In didSelectItemAt func we just assign selected date to label:

We can also set selected date in center of the view:

Now, after selection, a cell with a date will not only be highlighted, but also put in the center of the view. As you can notice, when launched, the first selected date is today date.

This is almost the end. At least I’d like to show you, how to select a date by swiping our picker. Before we had just one way to pick the date - tap on in with finger. But what if we want to select date by swiping gesture? Let’s say that we want to pick the date from the cell, that will stop in the center of the view.

For this we’ll need three simple functions:

The first one will help us know, if our calendar picker wa run from scroll view. If so, then function setSelectedItemFromScrollView is fired.

As you can see, we need to get the center position to set the picked date. Then pass data (selectedDate) to set the picker. At last we need to know, that swiping gesture did end:

So, when a swiping gesture ends, picker gets the latest cell and set it as selected. Of course we can get the selected date (as String or Int) and use it for different purpose. Collection View can be also easily put into Table View.

Tutorial - Calendar and Date Picker

Tutorial - Calendar and Date Picker

I hope this little tutorial will help you :) If you have any questions or you’ve found bugs in my code - please, give feedback.

Also, if you like this post how about checking my other articles where I'm explaining how to group values by the Core Data attribute or revealing some unusual ways to learn Swift programming

BTW the whole project is available to download on GitHub :)

Check our latest product - it's based on our experience of managing over 50-people strong company. The tool we're missing as a small company and not an enterprise.

humadroid.io is an employee and performance management software. It's an unique tool allowing everyone to be in the loop - by having up to date info about co-workers, time-off, benefits, assets, helping with one-on-ones, being a go-to place for company-wide announcements.

Check out humadroid.io
Top

Contact us

* Required fields

The controller of your personal data provided via this contact form is Prograils sp. z o.o., with a registered seat at Sczanieckiej 9A/10, 60-215 Poznań. Your personal data will be processed in order to respond to your inquiries and for our marketing purposes (e.g. when you ask us for our post-development, maintenance or ad hoc engagements for your app). You have the rights to: access your personal data, rectify or erase your personal data, restrict the processing of your personal data, data portability and to object to the processing of your personal data. Learn more.

Notice

We do not track you online. We use only session cookies and anonymous identifiers for the purposes specified in the cookie policy. No third-party trackers.

I understand
Elo Mordo!Elo Mordo!