itsmeichigo / datetimepicker

A nicer iOS UI component for picking date and time

DateTimePicker

A nicer iOS UI component for picking date and time.

Features

• Date and Time Picker / Date Picker only / Time Picker only - your choice!
• Limit selected date within a defined range of time
• Show or hide month on date cell
• Infinite scrolling for time
• Customize colors and date format
• (v1.3) Constraint-based UI
• (v2.0) Now you can create picker view as a separate view!
• (v2.1.0) Carthage is now supported (a bit late - sorry)
• (v2.3.0) Options to select custom font and colors
• (v2.4.0) Option to show seconds column
• (v2.5.0) SPM support
• Custom TimeZone and Calendar

To-dos (HELP NEEDED! 🎯)

• Option to select month / year (UI idea needed)

Requirements

• Swift 5 & Xcode 12
• For Swift 4.2 please use branch swift4.2
• For Swift 4.1 please use branch swift4.1
• For Swift 3.0 please use version 1.1.4
• iOS 10 and later

Installation

Using Cocoapod

Just add the following to your podfile

pod 'DateTimePicker'

Using Carthage

From v2.1.0 onward, you can integrate DateTimePicker into your Xcode project using Carthage by specifying it in your Cartfile:

github "itsmeichigo/DateTimePicker" ~> 2.1.0

Run carthage update to build the framework and drag the built DateTimePicker.framework into your Xcode project.

Using Swift Package Manager

From v2.5.0 you can add DateTimePicker to your project via SPM. Paste link to this repo in SPM configuration window and you're good to go.

Manual install

Drag and drop folder Source to your project. Please make sure to update the nib files custom class module to inherit from your current target so that the custom files can be found:

Demo

Navigation to folder named DateTimePickerDemo, run pod install and open the workspace file to play around with DateTimePicker.

Usage

v2.0

Since v2.0 onward, picker view can be created separately and used to add to any view you want. Note: the picker view is built with fixed width and height, so you're not encouraged to manually update it or you will get corrupted UI for the view. If necessary, please only change the y position of the view.

let min = Date().addingTimeInterval(-60 * 60 * 24 * 4)
let max = Date().addingTimeInterval(60 * 60 * 24 * 4)
let picker = DateTimePicker.create(minimumDate: min, maximumDate: max)
picker.frame = CGRect(x: 0, y: 100, width: picker.frame.size.width, height: picker.frame.size.height)
self.view.addSubview(picker)

If you still want the old behavior (show the picker like a modal), you can call show method:

let picker = DateTimePicker()
picker.show()

v1.3 and below

For older versions, the only option is to use the built in show method, which returns an instance of DateTimePicker and also show the picker like a modal on top window. The picker can be dismissed when Cancel button is tapped.

let picker = DateTimePicker.show()

Customization

There are many options to customize picker for your own desire:

• minimumDate and maximumDate: date and time limit for the picker. You can only set these when creating the picker, default value is last 10 days for minimum date and next 10 days for maximum date. If you set these dates yourself, make sure that minimum date is an earlier time than maximum date.
• selectedDate: date to be selected when picker is first created, default is current date. Selected date has to be later than minimumDate and earlier than maximumDate.
• locale: locale for the language displayed. default is device's locale.
• dateFormat: format for the date shown in picker view. default is HH:mm dd/MM/YYYY.
• cancelButtonTitle: title for dismiss button, default is Cancel.
• todayButtonTitle: title for reset time button, default to Today.
• doneButtonTitle: title for done button, default to DONE.
• is12HourFormat: whether to display time in 12 hour format, default to false.
• isDatePickerOnly: whether to only show date in picker view, default to false.
• isTimePickerOnly: whether to show only time in picker view, default to false.
• includesMonth: whether to include month in date cells, default to false.
• includesSecond: whether to show second in time selection, default to false.
• timeInterval: time interval, in minutes, default to 1. If not default, infinite scrolling is off.
• timeZone: timezone used in picker, default is device timezone.
• dismissHandler: callback block when cancel button of picker view is tapped.
• delegate: object to be notified when a new date or time is selected.
• highlightColor: custom highlight color, default to cyan.
• darkColor: custom dark color, default to grey.
• doneBackgroundColor: custom DONE button color, default to darkColor.
• daysBackgroundColor: custom background color for date cells.
• customFontSetting: custom font settings for all labels in the component.

Contributing

Contributions for bug fixing or improvements are welcome. Feel free to submit a pull request.

Licence

DateTimePicker is available under the MIT license. See the LICENSE file for more info.

datetimepicker's Issues

How can we change to 12hr format

How can we change to the AM and PM

how to set the picker for time only??

i found , you said i can make it time only , but i dont find property for that option

Dismiss option without selecting a date

There's no way to dismiss the picker. I think there should be a cancel button to dismiss the picker without selecting a date.

Not able to get time in 24 hour format

I gave picker.is12HourFormat = true to get time in 24 hour format

but am not able to get it in 24 hour format

func dateTimePicker(_ picker: DateTimePicker, didSelectDate: Date){
print(picker.selectedDateString). // 08:53 PM 2018-04-02
instead of 08: 53 PM I need output as 20:53
}
Could any one help me regarding this ?

Change the background color of the Done button and the textColor of the Cancel Button

Changing the darkColor property does not change the Done button's background or the Cancel button's textColor. I am not sure if this was intentional or not.

I was able to fix this by adding a didSet to the darkColor's declaration in the DateTimePicker class like you did in the highlightColor's declaration.

If this is not the desired behavior you were intending then it would be very helpful if you would create a way for us to change these controls' visual properties.

Swift 4 support ?

Hi,

Please make this pod support Swift 4 at the moments. Thank you

Scrolling between minutes returns wrong hour

Issue
When selecting a time and scroll the minutes below 00, minutes reset to 59 (good) the hours don't change (error) but accepting returns wrong hour by doing this.

Reproduce

1. Open the component with a default date time to the current one
2. Scroll the minutes so that the hour is supposed to go down by 1
3. Confirm

Expected behaviour
OR the component should also change the hour in the dialog
OR it should not return another value than displayed in the dialog

[REQUEST] Please add an option to have custom time intervals say every 10 minutes for the time picker

Please add an option to have custom time intervals say every 10 minutes for the time picker. Could nto figure out a good way to do this in the code myself unfortunately.

[question / enhancement ] Only show 15 min selection in minutes table

Is it possible already to easily just select 15 minutes as selectable options in minutes table?

if not.. suggestions to easily implement that feature ( I could have some spare time to tackle that) ?

Taking some time to show DateTimePicker.

If I have following initializer. It takes some time to present.

DateTimePicker.show(selected: Date.init(), minimumDate: nil, maximumDate: nil)

And If I have following Initializer. Picker present immediately.

DateTimePicker.show()

12 hr format instead of 24

Is there a way to select from a 12 hr time picker instead of 24?

Selected Date usually does not scroll to selected date

It sometimes work but mostly does not work. Is there any fix for this ?

blur effect or dim screen effect when show dialog

hello. Thanks you for great library.
I think it would be better when implment blur effect or dim screen effect when show dialog

Please delete this

Get Only view

hello, i'm noob in swift and iOS developing
i want replace keyboard to date picker view(like: textfield.inputView = picker) when clicked button. but it's not working. picker cover textfield.
how to resolved this problem?!)

p.s 👍 good library. my isn't perfect)

Timewheel automatically scrolling to random dates after swipe select.

I am having a strange issue with DateTimePicker. When swiping the time wheel it automatically scrolls to some seemingly random date. Only happens on iOS 11, built with Xcode 9. On tapping times, it works correctly, only swiping breaks it.

Using: DateTimePicker (1.1.2) through Cocoapods, Swift 3

This is my code;

let date = self.defaultDate()
let minDate = Date().addingTimeInterval(24*60*60)

let picker = DateTimePicker.show(selected: date, minimumDate: minDate, maximumDate: nil)
picker.highlightColor = Color.pink.base
picker.tintColor = Color.pink.base
picker.doneButtonTitle = "Set date"
picker.completionHandler = { date in

let dateString = DateHelper.shared.isoDateString(date: date)
    self.currentDate = dateString
}

Default selectedDate:

picker.selectedDate

Does change the title Date that appears on the top of picker. But doesn't the change actual date that is on centre of collectionView.

Please let me know fix ASAP.

How to show DateTimePicker in viewdidload?

Hi guys!
UIApplication.shared.keyWindow?.addSubview(dateTimePicker)
How to show datetimepicker in UIview in viewdidload? Thanks!

Select date / time in the past

Hey,

how can I configure the picker so I can choose a time in the past? I've set the isTimePickerOnly value to "true" and tried to set the selected date in the future and to test it also in the past but when I want to set a time in the past it always scrolls back to the current time. Could you help me please?

Thanks in advance!

can I remove the dark in the back of the upper view

Is it possible to remove the dark shadow in the background. I know i can change the color but that does not help

Embed picker in the page

Hi,

Thanks for your work! Could you help me to figure out how to embed that picker inside the page? So it doesn't pop up on a button press but is always shown on the page.

Thanks!

Minimum Date Selected Bug

To recreate: Open the DateTimePicker control and select the minimum date, press the done button, re-open the control. I have been getting a crash in the show method (line: 220) of the DateTimePicker controller.
I have been getting intermittent results, sometimes it works with the minimum but will crash on the maximum. It will almost always crash on one or the other.

UI idea for month and year selection

We can have a switch or a selection kind of a thing on the left hand side on the current date view. Where the user can select the view he/she wants something like the Samsung calendar(Attaching screenshots for the same). The date / month / year selection will become extremely easy and the UX is gonna be brilliant.
Let me know if this works for you. I really love you library though

[Request] Custom data

Hi, I want to know if its possible to add an option to use custom data apart from dates like an array of names, it would be awesome, thanks.

Start at center when minimum date = current date?

Hi first of all , Thank you for this cool date picker !!

Is there's an easy way to handle this situation where I have current date as minimum.
ex:

let min = current
let max = Date().addingTimeInterval(60 * 60 * 24 * 365)
let picker = DateTimePicker.show(selected: self.current, minimumDate: min, maximumDate: max)

but my expected result is like this:

Thank you,

Minimum & Maximum Date Time

how to select minimum & maximum date time

Unable to simultaneously satisfy constraints

An error is shown when running the example:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"<_UILayoutSupportConstraint:0x6100000960d0 _UILayoutGuide:0x7fa16b406020.height == 0 (active)>",
"<_UILayoutSupportConstraint:0x610000092700 V:|-(0)-[_UILayoutGuide:0x7fa16b406020] (active, names: '|':UIView:0x7fa16b60e4d0 )>",
"<NSLayoutConstraint:0x610000095c20 V:[_UILayoutGuide:0x7fa16b406020]-(-20)-[UINavigationBar:0x7fa16b607d40] (active)>",
"<NSLayoutConstraint:0x610000095c70 V:|-(0)-[UINavigationBar:0x7fa16b607d40] (active, names: '|':UIView:0x7fa16b60e4d0 )>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x610000095c20 V:[_UILayoutGuide:0x7fa16b406020]-(-20)-[UINavigationBar:0x7fa16b607d40] (active)>

change interval minutes

I can change interval minutes to 30 minutes as selectable options in minutes table?

Change the date format appear on the top of the picker.

I want to change the date format that appears on the top of the picker.

How can one select year?

Is there any option to select year or month manually rather then scrolling till that year/month is there..

Simply doesn't work for me

`
@IBAction func endDatePressed(_ sender: Any) {

    let min = Date()
    let max = Date().addingTimeInterval(60 * 60 * 24 * 4)
    let picker = DateTimePicker.show(minimumDate: min, maximumDate: max)
    picker.highlightColor = UIColor(red: 255.0/255.0, green: 138.0/255.0, blue: 138.0/255.0, alpha: 1)
    picker.darkColor = UIColor.darkGray
    picker.doneButtonTitle = "Done"
    picker.todayButtonTitle = "Today"
    picker.is12HourFormat = true
    picker.dateFormat = "hh:mm aa dd/MM/YYYY"
    //        picker.isDatePickerOnly = true
    picker.completionHandler = { date in
        let formatter = DateFormatter()
        formatter.dateFormat = "hh:mm aa dd/MM/YYYY"
        self.endField.text = formatter.string(from: date)
    }
    
    
}

`
Here's a video
http://tinypic.com/player.php?v=6itsvq%3E&s=9#.Waz0OtsUW_I

How to set minimum date and time

how to set minimum date and time. I want to disable date and time less than minimum date

Disable Certain Days/Hours

Hello ,
I was wondering if there is a function in this library that allows us to disable certain days and hours?
For example in the time picker 12:30 would be disabled but not hidden. Or in a different colour?

dismissView not public

can't programmatically dismiss the view

iOS 8 support

Is there anyway that I can use this library with iOS 8 support ?

Not show today time and date in scrollview

Hide the date

Hi,

Thanks for your repo.
I wanna to use it but I need to hide date because I just need a picker for time. isDatePickerOnly is used to hide the time, is there a way to hide the date and just show the time ?

Thanks.

Cell selection totally broken with Xcode 9

Something related to ScrollView must have changed in Xcode 9 and now selected hour or minute always gets shifted. I did a quick investigation but couldn't really figure out what's going on. Could someone please take a look? This awesome library won't be any use if we can't fix the issue. Thanks.

Having a start time column on the left, and an end time column on the right

Other than that, this pod is absolutely unreal. Thanks a bunch!

Suggestion: only allow user to select time after minDate

If I set minimumDate to now, the picker still allows user to pick earlier time today.

It should restrict user to only pick time after now.

Carthage Integration

I would like to be able to integrate DateTimePicker to my project via Carthage instead of Cocoa Pods, sadly right now this is not possible: Dependency "DateTimePicker" has no shared framework schemes

I'm not experienced enough to know if this is a complex task, but maybe you can look into this.

Select time to be shown only

is it possible to show only the selected time in the Time interval?
like what i need is as follows
8:00 AM
8:30 AM
9:00 AM
9:30 AM
.
.
.
12:00 PM

Setting todayButtonTitle is pushing title to right edge of screen

I am using version 1.1.4 using cocoapods and noticed an issue while setting todayButtonTitle. If I set any text, it moves the title to right edge of screen as shown in image. I am using this version because I need only time picker without dates.

App crashes when closing and opening picker quickly

So the issue is that when you have opened the picker and close it, then quickly after opening it again (in my case by tapping UITextField), the picker crashes (see screenshot).

My setup for creating the picker:

let picker = DateTimePicker.show(selected: Date(), minimumDate: Date(), maximumDate: nil)
picker.highlightColor = CawColor.buttonAction
picker.isDatePickerOnly = false
picker.includeMonth = true
picker.todayButtonTitle = "Nu"
picker.doneButtonTitle = "Kies"
picker.cancelButtonTitle = "Annuleren"                
picker.completionHandler = { date in
  // do something after tapping done
}

Note that is not needed to close and open the picker quickly. I think this is due to the show() method that gets 2 Date() objects?

Add TimeZone

Add an API to specify a timezone.

    public var timeZone = TimeZone.current


    internal var components: DateComponents! {
        didSet {
            components.timeZone = timeZone
        }
    }

How can I hide time picker?

I want to show only Date Picker, not Time Picker?
And when Time Picker is Hide, the size of picker would be decreased.?

Range

How can I activate or deactivate time picker range? It is not allowing me to pick the time from past which i need to. (eg: Its 5:30 pm I need to pick 4:30 pm, which i cant)

The doneBackgroundColor is not working.

The doneBackgroundColor is not working. No matter what I set the color to it keeps the darkColor with a 50% alpha.

idear for pick the year and day

Add a calendar icon on the left of the label "Today". when press the icon button, the day's collectionView can be covered by a calendar collectionView, then you can scroll the collection view to picker the day you want.

Considering the needs for different application:

1. if the user will just pick a day next several month or pre several month, the calendar view may be the best choice, it just need feel click to pick the date.
2. if the user need to locate the day quite far away from today, the picker may be better

Custom handler for cancel button pressed

Hi, I would like to know when is the user press the cancel button, but it looks like to be fixed to only dismiss view when the cancel button pressed.
Is there any way to detect this event?

Thanks!

Yu-Hsiang