【Swift UIKit】UIDatePickerの使い方!和暦や西暦、時間の表示方法と日本語化

この記事からわかること

  • SwiftUIKitカレンダー日付選択するビューを実装する方法
  • UIDatePicker使い方
  • ロケールなどの設定変更するには?
  • デバイスの設定に関わらず和暦西暦日本語化する方法
  • デザイン変更

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

SwiftのUIKitでUIDatePickerを使用して日付を選択できるビューを実装する方法や和暦や西暦などの指定方法をまとめていきます。

公式リファレンス:UIDatePicker

UIDatePicker

@MainActor  class UIDatePicker : UIControl

UIDatePickerUIControlを継承しているUI部品の1つ日付を選択できる機能を提供するクラスです。

SwiftUIではDatePicker使用して同じようなビューを実装します。実装方法は大きく異なるので詳しくは以下の記事を参考にしてください。

おすすめ記事:【SwiftUI】DatePickerの使い方!ロケールを日本語設定にする方法

普通のUI部品と同じでStoryboardもしくはコードから追加するだけで簡単に実装することができます。

let picker = UIDatePicker()
picker.center = self.view.center
view.addSubview(picker)
'【Swift UIKit】UIDatePickerの使い方!和暦や西暦、時間の表示方法と日本語化

プロパティから変更できる設定

UIDatePickerクラスのプロパティからロケールや設定などを変更することができます。何も設定をしないとLocalizationsに設定されている言語が適応されます。ここを「Japanese」にすることでアプリ全体を日本語化することができるのでカレンダーも日本語表記になります。

SwiftUIでSNSへのシェアボタンをクリックした時の画面

おすすめ記事:【Swift/Xcode】アプリを日本語化する方法!Localizationsの設定

ロケール(日本語化)

カレンダーの表記を明示的に日本語にするためにはlocaleプロパティにja_JPを渡します。

picker.locale = Locale(identifier: "ja_JP")

タイムゾーン

表示する時間の場所を設定できます。

picker.timeZone = TimeZone(identifier: "Asia/Tokyo")

カレンダーの種類(和暦や西暦)

カレンダーの種類(暦法)を変更するにはcalendarプロパティにCalendar構造体を渡します。西暦(2023年)はgregorian、和暦(令和5年)にしたい場合はjapaneseを指定します。

picker.calendar = Calendar(identifier: .gregorian)
// picker.calendar = Calendar(identifier: .japanese)

デバイスの設定(暦法)を無視して表示させる

カレンダーの暦法を明示的に指定していない場合デバイスの「設定」>「言語と地域」>「暦法」に指定されている値が適応されます。calendarプロパティに値を渡した場合はデバイスの設定を無視して指定した値で表示させることができます。

'【Swift UIKit】UIDatePickerの使い方!和暦や西暦、時間の表示方法と日本語化

デザインを変更する

DatePickerのデザインを変更するにはpreferredDatePickerStyleプロパティにUIDatePickerStyle型の任意の値を渡します。

公式リファレンス:UIDatePickerStyle

<č class="fas fa-check"> automatic

picker.preferredDatePickerStyle = .automatic
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

wheels

picker.preferredDatePickerStyle = .wheels
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

inline

picker.preferredDatePickerStyle = .inline
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

compact

picker.preferredDatePickerStyle = .compact
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

日付や時間のみにする

デフォルトでは日付と時間の両方が表示されていますが、日付のみや時間のみに変更する場合はdatePickerModeプロパティにUIDatePicker.Mode型の値を渡します。

enum Mode : Int, @unchecked  Sendable {
  case time           // 時間のみ
  case date           // 日付のみ
  case dateAndTime    // 両方
  case countDownTimer // カウントダウンタイマー
}

例:カウントダウンタイマーの場合

picker.datePickerMode = .countDownTimer
'【Swift UIKit】UIDatePickerの使い方!和暦や西暦、時間の表示方法と日本語化

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index