XcodeでUIDatePickerを追加する方法【初心者向け】

Xcodeで【UIDatePicker(デイトピッカー)を追加する】方法を初心者向けに解説した記事です。UIDatePickerを使うと、日付や時刻などをホイールで選択することができます。数値の制限や種類なども合わせて紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

iPhoneアプリ開発に役立つUIパーツの使い方を初心者向けに紹介する記事です。

今回は、Xcodeで日付などを表示する際に使う、UIDatePicker(デイトピッカー)を扱います。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UIDatePickerとは

UIDatePicker(デイトピッカー)は、ユーザーが日付や時刻等を設定するためのUIKitの部品です。日付や時間を選択するためにホイールを回転させて使います。

なお、UIDatePickerはViewのサブクラスです。

 

 

UIDatePickerの使い方

ここからはUIDatePickerの基本的な使い方をお伝えしていきます。

 

UIDatePickerを配置する

まずは配置してみます。

StoryboardのViewの上にドラッグ&ドロップで配置することができます。

DatePicker

XcodeScreenSnapz001

 

 

UIDatePickerのモード

UIDatePickerには4つのモードがあり、それぞれ表示項目が異なります。

用途に応じて使い分けてください。

 

Date and Time

iOS SimulatorScreenSnapz001

 

Date

iOS SimulatorScreenSnapz002

 

Time

iOS SimulatorScreenSnapz003

 

Count Down Timer

iOS SimulatorScreenSnapz004

 

UIDatePickerの値を制限する

UIDatePickerは指定した値で制限することも可能です。

まず、UIDatePickerからIBOutletを作成します。

Jedit XScreenSnapz001

XcodeScreenSnapz002

すると、下記のコードがヘッダーに追加されます。

@property (weak, nonatomic) IBOutlet UIDatePicker *datePicker;

 

UIDatePickerは設定なしの状態ですと、分の項目は1分刻みになります。これを自由に設定するには、minuteIntervalプロパティを利用する必要があります。

 

例えば、10分刻みにする場合は、下記のように記述します。

_datePicker.minuteInterval = 10;

するとこのように10分刻みになりました。

SafariScreenSnapz001

 

また、選択可能な日付の範囲を指定することもできます。今回は例として、今日から30日後までの範囲として指定します。

_datePicker.minimumDate = [NSDate date];
_datePicker.maximumDate = [NSDate dateWithTimeIntervalSinceNow:60*60*24*30];

すると、選択できない日はグレーアウトされて、選択できなくなります。

 

 

UIDatePickerで値を取得する

最後に、値を取得する方法を紹介します。

UIDatePickerにはdelegateメソッドがありません。そこでUIDatePickerで値が変更された場合にメソッドを呼び出すように指定する必要があります。今回は例として、pickerDidChangeと言うメソッド名にしました。

 

メソッド呼び出しの指定は次の通り行います。

[_datePicker addTarget:self action:@selector(pickerDidChange:) forControlEvents:UIControlEventValueChanged];

addTargetは自クラス内で処理するので、selfを指定します。actionには対象となるメソッドを指定しますが、メソッドを指定する時は@selector()で囲むことを忘れないでください。

 

また、pickerDidChangeメソッドは取得した日付をUIAlertViewで表示するだけと簡易なものを記述しました。UIDatePickerから取得できる値はNSDateクラスなので、表示するためにはNSDateFormatterを使った一工夫が必要です。

こちらが完成版です。

– (void)pickerDidChange:(UIDatePicker*)datePicker
{
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc]init];
[dateFormatter setDateFormat:@”yyyy/MM/dd hh:mm”];
NSString *dateString = [dateFormatter stringFromDate:datePicker.date];
UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@”取得日時” message:dateString delegate:nil cancelButtonTitle:nil otherButtonTitles:@”OK”, nil];
[alertView show];
}

この際、- (void)pickerDidChange:(UIDatePicker*)datePickerでUIDatePickerのポインターを受け取るのを忘れないように注意しましょう。

 

今回の例では、このように表示されます。

iOS SimulatorScreenSnapz007

 

今回の記事は以上です。

さらにUIパーツを使いこなしたい場合は、XcodeでUIButtonを追加する方法を合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。