A nicer iOS UI component for picking date and time

Overview

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:

Screen Shot 2020-03-15 at 11 21 31 AM

Screen Shot 2020-03-15 at 11 37 20 AM

Screen Shot 2020-03-15 at 11 37 34 AM

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.

Comments
  • Time Label miscue

    Time Label miscue

    Describe the bug The datetimepicker UI displays with some time miscued just above the "Done" button. Please see the attached screenshot. The setup code is also attached as a screenshot.

    Expected behavior The datetimepicker UI should display without the miscue.

    Screenshots If applicable, add screenshots to help explain your problem. The datetimepicker UI image image

    Library and Device details (please complete the following information):

    • Library version: 2.5.0
    • Device: Simulator iPhone 11 Pro Max
    • OS: iOS14
    opened by IniongunIsaac 27
  • Scrolling not working

    Scrolling not working

    For some reason scrolling for time doesn't seem to be working for me. I have to tap one at a time-if I scroll it pretty much just randomly selects a time.

    opened by treyholt 10
  • Timewheel automatically scrolling to random dates after swipe select.

    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
    }
    
    opened by sebamisc 6
  • Selected Date Background color and AM/PM picker color not conforming to custom attribute settings.

    Selected Date Background color and AM/PM picker color not conforming to custom attribute settings.

    I changed the highlightColor, darkColor, doneBackgroundColor and daysBackgroundColor all to Black. When the picker first loads, the selected date's background color appears with what I am assuming is the default turquoise color. Selecting any of the on screen dates also produces the same turquoise background color. However, whenever you scroll right or left and select a date that was initially out of view, the selection's background will finally change to black. I have a feeling the the AM/PM dial is suffering from the same bug but since there are only two values I cannot test this theory.

    bug 
    opened by FStrout 5
  • button today not show

    button today not show

    can you help ? here is layout: [Navigation] [Customview button click] [TableView]

    Code:

    let picker = DateTimePicker.show(selected: Date().addingTimeInterval(TimeInterval(-MININUM_MONTH_TIME_SELECT)),
                                                 minimumDate: Date().addingTimeInterval(TimeInterval(-MONTH_TIME)),
                                                 maximumDate:  Date())
                picker.highlightColor = UIColor(red: 255.0/255.0, green: 138.0/255.0, blue: 138.0/255.0, alpha: 1)
                picker.doneButtonTitle = "Hoàn thành"
                picker.is12HourFormat = true
                picker.todayButtonTitle = "Hôm nay"
                picker.highlightColor = UIColor(hex: "E4A21C", alpha: 1)
                picker.doneBackgroundColor = UIColor(hex: "5DB093", alpha: 1)
                picker.backgroundViewColor = UIColor(hex: "000000", alpha: 0.7)
                picker.completionHandler = { date in
                    
                    self.btTime.setTitle(DateFormatter.sharedDateFormatter.string(from: date), for: .normal)
                    self.btTime.backgroundColor = UIColor(hex: "5DB093")
                    self.btTime.titleLabel?.textColor = .white
                    
                    
                    self.collapseViewModeButton()
                }
    

    Image: simulator screen shot - iphone 5s - 2018-07-20 at 14 02 08

    opened by fukemy 5
  • Embed picker in the page

    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!

    enhancement 
    opened by natacodes 5
  • Default selected time is clipped (24H Format)

    Default selected time is clipped (24H Format)

    Describe the bug When I open the picker, the default time selected (current time) is clipped underneath the date selection. I am using the default width / height.

     picker = DateTimePicker.create(minimumDate: min, maximumDate: max)
                picker.frame = CGRect(x: 0, y: 250, width: picker.frame.size.width, height: picker.frame.size.height)
                picker.is12HourFormat = false
                picker.dateFormat = "dd/MM/YYYY HH:mm"
    

    To Reproduce Steps to reproduce the behavior:

    1. Add DatePicker to view using 24H Format.

    Expected behavior See 2nd screenshot.

    Screenshots 1st screenshot is what I see everytime. 2nd screenshot is what I expect. Screenshot 2020-01-06 at 19 47 26 Screenshot 2020-01-06 at 19 47 43

    Library and Device details (please complete the following information): I tried multiple device simulators, iPhone SE and iPhone 8. iOS13.

    opened by GeorgeXCV 4
  • Done and Cancel buttons don't work

    Done and Cancel buttons don't work

    Describe the bug I can't dismiss this picker at all, Done button does nothing and neither does Cancel.

    To Reproduce

    func textFieldDidBeginEditing(_ textField: UITextField) {
            if textField.tag == 4 {
                let min = Date().addingTimeInterval(-60 * 60 * 24 * 4)
                let max = Date().addingTimeInterval(60 * 60 * 24 * 4)
                picker = DateTimePicker.create(minimumDate: min, maximumDate: max)
                picker.frame = CGRect(x: 0, y: 250, width: picker.frame.size.width, height: picker.frame.size.height)
                picker.is12HourFormat = false
                picker.dateFormat = "dd/MM/YYYY HH:mm"
                self.view.addSubview(picker)
            }
           }
    
    opened by GeorgeXCV 4
  • Add Infinite rolling in table view for hour and minute.

    Add Infinite rolling in table view for hour and minute.

    Hello. I download and tested your module, which is great. I assume it would be more cool if this module is able to scroll infinitely. So I added and fixed a little. Take a look, and response me if possible.

    So, what I did is, Add Infinite rolling in table view for hour and minute. Used top and bottom buffer data source which has exact same size as original datasource. When scrolling (used scrollview delegate, scrillViewDidScroll), I calculate new position with module operation if contentOffset exceeds its BUFFER DATASOURCE.

    P.S I am kind of newbie in open source project. Am I doing right?

    opened by maybeiamme 4
  • How can I disable automatic selection?

    How can I disable automatic selection?

    ... private func alignCollectionView(_ collectionView: UICollectionView) { let centerPoint = CGPoint(x: collectionView.center.x + collectionView.contentOffset.x, y: 50); if let indexPath = collectionView.indexPathForItem(at: centerPoint) { // automatically select this item and center it to the screen <<----Not to be selected! // set animated = false to avoid unwanted effects collectionView.selectItem(at: indexPath, animated: false, scrollPosition: .top) if let cell = collectionView.cellForItem(at: indexPath) { let offset = CGPoint(x: cell.center.x - collectionView.frame.width / 2, y: 0) collectionView.setContentOffset(offset, animated: false) } ...

    How can I disable automatic selection?

    opened by beom-mingyu 3
  • Not show today in scroll view If change selectedDate to 24 hours before to today 00:00

    Not show today in scroll view If change selectedDate to 24 hours before to today 00:00

    Describe the bug Not show "today" in scroll view if you change selectedDate to 24 hours before to today 00:00

    To Reproduce Steps to reproduce the behavior:

    1. Call the DateTimePicker
    func chooseDatetime(minDate: Date, maxDate: Date, selectedDate: Date?, completion: ((_ date: Date)->Void)?) {
        print("minDate: \(minDate)")
        print("maxDate: \(maxDate)")
        print("selectedDate: \(String(describing: selectedDate))")
    
        let picker = DateTimePicker.create(minimumDate: minDate, maximumDate: maxDate)
        if let selectedDate = selectedDate {
            picker.selectedDate = selectedDate
        }
        picker.delegate = self
        picker.completionHandler = {date in
            completion?(date)
        }
    
        picker.frame = CGRect(x: 0, y: 100, width: picker.frame.size.width, height: picker.frame.size.height)
        self.view.addSubview(picker)
    
        self.datetimePicker = picker
        self.datetimePicker?.show()
    }
    
    1. Choose yesterday and set time, example: If now is 1/29 12:24 PM, you should choose 1/28 12:25 PM
    screen shot 2019-01-29 at 12 24 16 pm
    minDate: 2019-01-22 20:24:04 +0000
    maxDate: 2019-01-29 20:24:05 +0000
    selectedDate: Optional(2019-01-29 20:24:04 +0000)
    
    1. Tap done and set selectedDate to the date you choose

    2. Call the DateTimePicker again, "29" disappeared

    screen shot 2019-01-29 at 12 24 34 pm
    minDate: 2019-01-21 20:25:00 +0000
    maxDate: 2019-01-29 20:24:28 +0000
    selectedDate: Optional(2019-01-28 20:25:00 +0000)
    

    Library and Device details (please complete the following information):

    • Library version: 2.1.2
    • Device: iPhone XS Max
    • OS: iOS12

    Additional context #60

    opened by damozhang 3
  • how add picker hour custom [1,2,3,4] only

    how add picker hour custom [1,2,3,4] only

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Library and Device details (please complete the following information):

    • Library version: [e.g. 2.1.0]
    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]

    Additional context Add any other context about the problem here.

    opened by masrnet2006 1
  • How do we set Hourly 8am-5pm

    How do we set Hourly 8am-5pm

    How do I set an hourly. I tried dateTimePicker.timeInterval = DateTimePicker.MinuteInterval(rawValue: 60)! but it does not like that.

    Also how do I only allow selection of 8am - 5pm

    opened by justdan0227 0
  • UI idea for month and year selection

    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 screenshot_20180625-203031_calendar screenshot_20180625-203025_calendar screenshot_20180625-203036_calendar

    opened by fitut 4
  • idear for pick the year and day

    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
    opened by Cookiezby 0
Releases(2.5.0)
Owner
Huong Do
Full-time debugger, part-time grammar nazi
Huong Do
RCalendarPicker A date picker control, Calendar calendar control, select control, calendar, date selection, the clock selection control.

RCalendarPicker RCalendarPicker Calendar calendar control, select control, calendar, date selection, the clock selection control. 日历控件 ,日历选择控件,日历,日期选择

杜耀辉 131 Jul 18, 2022
A declarative, performant, iOS calendar UI component that supports use cases ranging from simple date pickers all the way up to fully-featured calendar apps.

HorizonCalendar A declarative, performant, calendar UI component that supports use cases ranging from simple date pickers all the way up to fully-feat

Airbnb 2.2k Jan 4, 2023
SwiftUI Simple Calendar / Date Picker for iOS

RKCalendar RKCalendar is a SwiftUI Calendar / Date Picker for iOS. Features include: minimum and maximum calendar dates selectable, single date select

null 453 Dec 28, 2022
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.

RSDayFlow iOS 7 Calendar with Infinite Scrolling. Only need 4 lines of code to set up. RSDayFlow is a slim fork of DayFlow with updates and extensions

Ruslan Skorb 844 Sep 14, 2022
An easy to use SwiftUI date picker for Shamsi (Persian) calendar

ShamsiDatePicker An easy-to-use SwiftUI iOS/watchOS date picker for Shamsi (Persian) calendar. Features Pure (100%) SwiftUI implementation Full suppor

Seyyed Parsa Neshaei 20 Nov 24, 2022
A fully customizable calendar view acting as a date range picker

Demo Installation CocoaPods With CocoaPods you can simply add GLCalendarView in your Podfile: pod "GLCalendarView", "~> 1.0.0" Source File You can co

Glow Inc 860 Nov 18, 2022
Simple customizable calendar component in Swift :calendar:

Koyomi Koyomi is a simple calendar view framework for iOS, written in Swift ?? Content Features Demo App Usage introduction : Change displayed month,

Shohei Yokoyama 741 Dec 24, 2022
Calendar component with RTL languages written in swift

GDCalendar Calendar component with both RTL/LTR languages support with Swipe Gesture enabled navigation. Easy to use with Storyboard and Attributes In

Saeid 26 Jul 17, 2022
A Swift UI component for Lunar Calendar Picker

LunarYearDatePicker a Swift UI component for Lunar Calendar Picker Usage: struct

null 6 Nov 22, 2022
A calendar based heatmap which presenting a time series of data points in colors.

Calendar Heatmap Introduction CalendarHeatmap is a calendar based heatmap which presenting a time series of data points in colors, inspired by Github

null 159 Dec 21, 2022
NextEvent is a countdown widget for your Mac menu bar. It displays the time until the next event in your calendar or task list.

NextEvent NextEvent is a countdown widget for your Mac menu bar. It displays the time until the next event in your calendar or reminders. Choose the n

Paul Wong 3 Nov 26, 2022
A set of views and controllers for displaying and scheduling events on iOS

CalendarLib CalendarLib is a set of views and controllers for displaying and scheduling events on iOS. Warning: As some people may have noticed, this

Julien Martin 692 Nov 17, 2022
Calendar View - It's lightweight and simple control with supporting Locale and CalendarIdentifier.

iOS Calendar It's lightweight and simple control with supporting Locale and CalendarIdentifier. There're samples for iPhone and iPad, and also with us

Maksym Bilan 159 Dec 22, 2022
📅 Calendar for iOS, iPadOS and macOS in Swift

CalendarKit CalendarKit is a Swift calendar UI library for iOS, iPadOS and Mac Catalyst. It looks similar to the Apple Calendar app out-of-the-box, wh

Richard Topchii 2.2k Jan 5, 2023
An open source calendar framework for iOS, with support for customization, IBDesignable, Autolayout, and more.

About MBCalendarKit is a calendar control written in Objective-C with modern best practices and Swift interoperability in mind. It offers a flexible c

Moshe 563 Oct 27, 2022
A fully customizable iOS calendar library, compatible with Objective-C and Swift

Table of contents Screenshots Installation Pre-knowledge Support Contact Screenshots iPhone iPad Safe Orientation Today Extension iOS8/9 iOS10 Interac

Wenchao Ding 10.2k Jan 2, 2023
A library that expresses a github contribution calendar through an array of dates. Supports iOS and macOS.

A library that expresses a github contribution calendar through an array of dates. Supports iOS and macOS.

jasu 45 Dec 20, 2022
An iOS pre-permissions utility that lets developers ask users on their own dialog for calendar, contacts, location, photos, reminders, twitter, push notifications and more, before making the system-based permission request.

An iOS pre-permissions utility that lets developers ask users on their own dialog for calendar, contacts, location, photos, reminders, twitter, push notifications and more, before making the system-based permission request.

Joe L 420 Dec 22, 2022
The Unofficial Apple iOS Swift Calendar View. Swift calendar Library. iOS calendar Control. 100% Customizable

Q: How will my calendar dateCells look with this library? A: However you want them to look. More Images Features Range selection - select dates in a r

PatchTheCode 7.3k Jan 2, 2023