選取日期時間 UIDatePicker

UIDatePicker 可以用來選取日期或時間，以下為本節的目標，設置一個 UIDatePicker ，並在改變日期時間時同步更新 UILabel 的內容：

首先在 Xcode 裡，新建一個 Single View Application 類型的專案，取名為 ExUIDatePicker 。

先為ViewController建立兩個屬性，如下：

class ViewController: UIViewController {
    var myDatePicker: UIDatePicker!
    var myLabel: UILabel!

    // 省略
}

建立 UIDatePicker

// 使用 UIDatePicker(frame:) 建立一個 UIDatePicker
myDatePicker = UIDatePicker(frame: CGRect(
    x: 0, y: 0, width: fullScreenSize.width, height: 100))

// 設置 UIDatePicker 格式
myDatePicker.datePickerMode = .dateAndTime

// 選取時間時的分鐘間隔 這邊以 15 分鐘為一個間隔
myDatePicker.minuteInterval = 15

// 設置預設時間為現在時間
myDatePicker.date = Date()

// 設置 Date 的格式
let formatter = DateFormatter()

// 設置時間顯示的格式
formatter.dateFormat = "yyyy-MM-dd HH:mm"

// 可以選擇的最早日期時間
let fromDateTime = formatter.date(
    from: "2016-01-02 18:08")

// 設置可以選擇的最早日期時間
myDatePicker.minimumDate = fromDateTime

// 可以選擇的最晚日期時間
let endDateTime = formatter.date(
    from: "2017-12-25 10:45")

// 設置可以選擇的最晚日期時間
myDatePicker.maximumDate = endDateTime

// 設置顯示的語言環境
myDatePicker.locale = Locale(identifier: "zh_TW")

// 設置改變日期時間時會執行動作的方法
myDatePicker.addTarget(
    self, 
    action: #selector(ViewController.datePickerChanged), 
    for: .valueChanged)

// 設置位置並加入到畫面中
myDatePicker.center = CGPoint(
    x: fullScreenSize.width * 0.5, 
    y: fullScreenSize.height * 0.4)
self.view.addSubview(myDatePicker)

UIDatePicker 常用的屬性如下：

• datePickerMode：可以顯示的模式，有只顯示時間、只顯示日期、顯示日期與時間以及倒數計時器。
• minuteInterval：時間選取時的分鐘間隔，單位是分鐘。
• date：設置預設顯示的日期時間。
• minimumDate：可以選擇的最早日期時間。
• maximumDate：可以選擇的最晚日期時間。
• locale：顯示的語言環境。

Date 與 DateFormatter 會在稍後介紹。

接著建立一個 UILabel ，在 UIDatePicker 改變時可以同步更新內容：

// 建立一個 UILabel 來顯示改變日期時間後的結果
myLabel = UILabel(frame: CGRect(
    x: 0, y: 0, width: fullScreenSize.width, height: 50))
myLabel.backgroundColor = UIColor.lightGray
myLabel.textAlignment = .center
myLabel.textColor = UIColor.black
myLabel.center = CGPoint(
    x: fullScreenSize.width * 0.5, 
    y: fullScreenSize.height * 0.15)
self.view.addSubview(myLabel)

最後在ViewController中新建一個改變 UIDatePicker 時會執行動作的方法：

@objc func datePickerChanged(datePicker:UIDatePicker) {
    // 設置要顯示在 UILabel 的日期時間格式
    let formatter = DateFormatter()
    formatter.dateFormat = "yyyy-MM-dd HH:mm"

    // 更新 UILabel 的內容
    myLabel.text = formatter.string(
        from: datePicker.date)
}

Date 與 DateFormatter

在 Swift 中要處理有關於日期或時間的功能時，都是使用 Date 類別，而要怎麼呈現日期時間的顯示格式，則是需要搭配 DateFormatter 類別來使用：

// 簡單的建立了一個目前時間的常數
// 型別為 Date
let nowDate = Date()

// 你可以使用型別為 Date 的常數來對日期時間作處理
// 例如將現在時間加上一天
// addingTimeInterval 的單位是秒
let oneDayAfter = 
    nowDate.addingTimeInterval(60 * 60 * 24)

// 現在處理完後
// 如果要將這個 Date 常數轉換成字串
// 則是要利用 DateFormatter
let formatter = DateFormatter()

// 先設置日期時間顯示的格式
formatter.dateFormat = "yyyy-MM-dd HH:mm"

// 再利用 DateFormatter 的 string(from:) 方法
// 將 oneDayAfter 轉換成字串
let oneDayAfterToString = 
    formatter.string(from: oneDayAfter)

// 印出：明天這一刻的日期時間
print(oneDayAfterToString)

// 或是你要從一個顯示日期時間的字串 轉換成 Date
let xmasDate = formatter.date(from: "2016-12-25 21:30")
// 這時便可以再對這個 Date 常數作處理

UIDatePicker 的date、minimumDate及maximumDate屬性，型別都是Date，所以如果你要設置或修改這些屬性時，都必須使用 Date 及 DateFormatter 類別來做處理。

以下列出常使用到的日期時間顯示的格式，你可以用在 DateFormatter 的屬性dateFormat，依照需求來組合你要的格式：

• yyyy：西元年份，像是 2015、1998。
• yy：西元年份末兩位數，像是 15、95。
• MMMM：月份，像是 December、January。
• MMM：月份簡寫，像是 Oct、Feb。
• MM：以數字代表月份，像是 08、12。
• dd：日期，像是 07、31。
• EEEE：星期幾，像是 Saturday、Monday。
• EEE：星期幾的簡寫，像是 Sun、Wed。
• HH：24 小時制的時。
• hh：12 小時制的時。
• mm：分。
• ss：秒。

前面範例設置的格式為formatter.dateFormat = "yyyy-MM-dd HH:mm"，你也可以設置為年月日，像是formatter.dateFormat = "yyyy 年 MM 月 dd 日"。

範例

本節範例程式碼放在 uikit/uidatepicker