SwiftUI DatePicker でできないこと

DatePicker は使いやすく、日付と時間の両方をピッカーで選択できるようになり、とても便利です。しかしながら、できそうでできないことがいくつかあり、初心者である私は採用を見送りました。2025年12月時点の話なのと、私が個人で調査した範囲の話である点を前提としていただければと思います。

基本的な使い方

Swift

@State private var date = Date()

DatePicker(
    "日時",
    selection: $date,
    // 日付と時間のピッカーを表示する。ここに問題がある
    displayedComponents: [.date, .hourAndMinute]
)
.datePickerStyle(.compact)
.environment(.locale, Locale(identifier: "ja_JP"))

@State private var date = Date()

DatePicker(
    "日時",
    selection: $date,
    // 日付と時間のピッカーを表示する。ここに問題がある
    displayedComponents: [.date, .hourAndMinute]
)
.datePickerStyle(.compact)
.environment(.locale, Locale(identifier: "ja_JP"))

このように書くだけで、日付と時間が横並びで表示されそれぞれをピッカーで選択できます。

テキストの背景に素敵な灰色の楕円を描画してくれます。
カスタマイズしないのであれば、素晴らしいと思います。

1. 左寄せにすると謎の隙間ができる

こちらを左寄せにしようとすると、途端に難しくなりました。

Swift

HStack(spacing: 0) {
    Image(systemName: "(toDay(date)).calendar")
        .foregroundColor(.green)
        .font(.system(size: 24))
    DatePicker(
        "",
        selection: $date,
        displayedComponents: [.date, .hourAndMinute]
    )
    .datePickerStyle(.compact)
    .environment(
        .locale,
        Locale(identifier: "ja_JP")
    )
    .labelsHidden()
}

HStack(spacing: 0) {
    Image(systemName: "(toDay(date)).calendar")
        .foregroundColor(.green)
        .font(.system(size: 24))
    DatePicker(
        "",
        selection: $date,
        displayedComponents: [.date, .hourAndMinute]
    )
    .datePickerStyle(.compact)
    .environment(
        .locale,
        Locale(identifier: "ja_JP")
    )
    .labelsHidden()
}

.labelsHidden() を入れたので、本来ラベルが表示される領域がなくなるはずですが、なぜか領域が残っています。（赤線部分）
背景色を付けてもう少し分かりやすくします。

Swift

HStack(spacing: 0) {
    Image(systemName: "(toDay(date)).calendar")
        .foregroundColor(.green)
        .font(.system(size: 24))
        .background(.blue)  // 追加
    DatePicker(
        "",
        selection: $date,
        displayedComponents: [.date, .hourAndMinute]
    )
    .datePickerStyle(.compact)
    .environment(
        .locale,
        Locale(identifier: "ja_JP")
    )
    .labelsHidden()
    .background(.orange)  // 追加
}

HStack(spacing: 0) {
    Image(systemName: "(toDay(date)).calendar")
        .foregroundColor(.green)
        .font(.system(size: 24))
        .background(.blue)  // 追加
    DatePicker(
        "",
        selection: $date,
        displayedComponents: [.date, .hourAndMinute]
    )
    .datePickerStyle(.compact)
    .environment(
        .locale,
        Locale(identifier: "ja_JP")
    )
    .labelsHidden()
    .background(.orange)  // 追加
}

コードにはないスペースが存在していることが分かります。DatePicker の内部でスペースを描画しているようです。
不思議なことに、何度か再起動するとスペースが入らないこともありました。確実に再現しない点も悩ましいです。

2. タップ可能領域を調整できない

DatePicker 自体を隠して、別の表示領域を作り、そちらのタップイベントでDatePicker を呼び出す方式を考えました。Javascript ではよくあるやり方と思います。
しかし、DatePicker にPicker だけ表示するインターフェースが存在しないため、この方式実現できないようです。

3. macos は別の実装となっている

DatePicker に限りませんが、SwiftUI は全体的にmacos の見た目はios と同じレベルまで洗練されていはいない印象があります。
DatePicker については、.wheel がコンパイルレベルで選択できなくて、.compact は.graphical と同じ挙動となります。.graphical はios とは見た目が大きく異なります。
こちらも残念です。

参考 macos の見た目

まとめ

長い時間悩みましたが、私には解決できないため、独自に実装することとしました。
こちらのコードがとても綺麗で参考にさせてもらいました。
https://github.com/SimformSolutionsPvtLtd/SSDateTimePicker

また、iPhone のGoogle カレンダーアプリも、カレンダー部分は独自実装と思われます。せっかく見た目が綺麗なDatePicker なので、カスタマイズができれば少し活躍できそうな気がします

参考 iPhone 版google カレンダーアプリ

アップルさんの今後に期待しています。

【広告】

Green Code

blog