IOS学习之使用PickerView制作日期选择器

由于项目中要用到时间的选择，但是自带的datePicker感觉有点丑，并且它是不支持编辑的，所以我用UIPickerView做了日期选择器和时间选择器

在字体方面参考了网上的资料

效果图如下：

picker.gif
  • 制作思路其实很简单，日期选择器和时间选择器都是一个独立的UIViewController，如下图：
屏幕快照 2016-11-16 下午6.08.17.png
  • 以日期选择器为例，xib文件如下：
屏幕快照 2016-11-16 下午6.15.17.png
  • 随后将所有要操作的组件连线进控制器
    • 创建数组，用于存储年份，月份，天数，其中天数会根据年份和天数变化，需要单独创建一个方法计算
  • 初始化UIPickerView并且设置dataSource和delegate都是self
  • 实现UIPickerView的数据源方法和代理方法
  • 设置控制器的代理，让外界控制器实现按钮事件
  • myDatePickerView.h
#import <UIKit/UIKit.h>

@protocol myDatePickerViewDelegate <NSObject>

@optional -(void)pressBackBtn;

@optional -(void)pressEnterBtn;

@end

@interface myDatePickerView : UIViewController

@property (nonatomic,strong) id<myDatePickerViewDelegate> delegate;

//包裹控件的view，与self.view上下左右保持着5dp
@property (weak, nonatomic) IBOutlet UIView *ParentView;

//我们的主角，pickerView
@property (strong, nonatomic) IBOutlet UIPickerView *pickerView;

//这三个参数放在外面，可供外界调用
@property (nonatomic,strong) NSString *year;

@property (nonatomic,strong) NSString *month;

@property (nonatomic,strong) NSString *day;

//创建一个将年月日组合起来的NSString，并返回
-(NSString *)getDateForMyMode;

@end
  • myDatePickerView.m
#import "myDatePickerView.h"

@interface myDatePickerView ()<UIPickerViewDelegate,UIPickerViewDataSource>

@property (weak, nonatomic) IBOutlet UIButton *backBtn;

@property (weak, nonatomic) IBOutlet UIButton *enterBtn;

@property (weak, nonatomic) IBOutlet UILabel *DialogTitle;

//保存年月日数据的array
@property (nonatomic,strong) NSMutableArray *yearArray;

@property (nonatomic,strong) NSMutableArray *monthArray;

@property (nonatomic,strong) NSMutableArray *dayArray;

//选中的当前行
@property (nonatomic,assign) int selectedRowYear;

@property (nonatomic,assign) int selectedRowMonth;

@property (nonatomic,assign) int selectedRowDay;

////当前选中的列
//@property (nonatomic,assign) int selectComponent;

//每个月的天数
@property (nonatomic,assign) int dayNumber;

//应该跟新天数了,当月份或年份被选择过或是刚进入为true，需要刷新day
@property (nonatomic,assign) Boolean dayShouldChangeEnable;

@end

@implementation myDatePickerView

//pickerView的懒加载
-(UIPickerView *)pickerView{
    
    if(!_pickerView){
        _pickerView = [[UIPickerView alloc] init];
    }
    return _pickerView;
}

//年份的懒加载
-(NSMutableArray *)yearArray{
    if(!_yearArray){
        _yearArray = [NSMutableArray array];
        //此处设置年份，固定的，当然你也可以提取出来，设为可变的
        for (int index=2013; index<=2050; index++) {
            [_yearArray addObject:[@(index) stringValue]];
        }
    }
    return _yearArray;
}

//根据传递进入的dayNumber计算dayArray
-(void)setDaysForMonth:(int) dayNumber{
    self.dayArray = nil;
    self.dayArray = [NSMutableArray array];
        for (int index=1; index<=_dayNumber; index++) {
              [_dayArray addObject:[@(index) stringValue]];
        }
}

//月份的懒加载
-(NSMutableArray *)monthArray{
    if(!_monthArray){
        _monthArray = [NSMutableArray array];
        for (int index=1; index<=12; index++) {
            [_monthArray addObject:[@(index) stringValue]];
        }
    }
    return _monthArray;
}

//获取当期的年月日，并且初始化pickView，及一些其他参数
-(void)getDateOfThisMonment{
    
    //获取当前的年月日
    NSCalendar *calendar = [NSCalendar currentCalendar];
    NSUInteger unitFlags = NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay;
    
    NSDateComponents *dateComponent = [calendar components:unitFlags fromDate:[NSDate date]];
    
    int year = (int)[dateComponent year];
    int month = (int)[dateComponent month];
    int day  = (int)[dateComponent day];
    
    //我根据月份和年份计算天数
    [self calculateDayWithMonth:month andYear:year];
    
    //设置dataSource和delegate
    self.pickerView.dataSource = self;
    self.pickerView.delegate = self;

    NSLog(@"%i,%i,%i",year,month,day);
    
    self.selectedRowYear = (year-2013);
    self.selectedRowMonth = (month -1);
    self.selectedRowDay = (day-1);

    //根据现在的年份和月份，初始化pickerView
    [self.pickerView selectRow:_selectedRowYear inComponent:0 animated:YES];
    [self.pickerView selectRow:_selectedRowMonth inComponent:1 animated:YES];
    [self.pickerView selectRow:_selectedRowDay inComponent:2 animated:YES];
    
   
    
    
    //将目前的日期赋值给公共参数，以便外面调用
    self.year = [@(year) stringValue];
    self.month = [@(month) stringValue];
    self.day =  [@(day) stringValue];

    
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.view.alpha = 0.0f;
    //获取当前的年月日，并且初始化
    [self getDateOfThisMonment];
    
    //边角弧度设置
    [[self.view layer] setCornerRadius:15.0];

    self.DialogTitle.text = @"日期选择器";
    [self.backBtn setTitle:@"后退" forState:UIControlStateNormal];
    [self.enterBtn setTitle:@"确定" forState:UIControlStateNormal];
    //绑定按钮事件
    [self.backBtn addTarget:self action:@selector(backClick) forControlEvents:UIControlEventTouchUpInside];
    [self.enterBtn addTarget:self action:@selector(enterClick) forControlEvents:UIControlEventTouchUpInside];
    
    self.dayShouldChangeEnable= false;

}

//按下后退按键
-(void)backClick{
    [self.delegate pressBackBtn];
}

//按下确定按键
-(void)enterClick{
    [self.delegate pressEnterBtn];
}

/*********************数据源方法**********************/
//返回的是pickerView有多少列
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    
    return  3; // 年份、月份、天
}

//表明pickerView每列的行数
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if(component == 0){ //年份行数
        return self.yearArray.count;
    }
    else if(component == 1){ //月份行数
        return self.monthArray.count;
    }
    else{ //天行数
        return self.dayArray.count;
    }

}
/*********************数据源方法**********************/

/*********************代理方法**********************/
//第row行的标题
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    if (component ==0) { //年份第row行标题
        return [NSString stringWithFormat:@"%@年",[self.yearArray objectAtIndex:row]];
    }else if(component == 1){ //月份第row行标题
        return [NSString stringWithFormat:@"%@月",[self.monthArray objectAtIndex:row]];
    }else{ //天数第row行标题
        return [NSString stringWithFormat:@"%@日",[self.dayArray objectAtIndex:row]];
    }
}

/*
  监听用户选中第component列的第row行，在这个之中，读取被选中的年月日
  因为年份和月份不同，天数都会时时改变，所以设置_dayShouldChangeEnable参数
  表示当年份和月份改变时，重新计算天数，这里有点缺陷，就是可能存在重复计算天数的情况，影响效率
 */
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    
      //NSLog(@"month = %@,year=%@",);
    
    if(component == 0){
        //当用户更改年份的时候，为防止闰年和非闰年对2月份天数的影响，_dayShouldChangeEnable = true表明需要重新计算对应月份的天数
        _dayShouldChangeEnable = true;
        self.year = _yearArray[row];//将选中的月份数赋值给公共的年份参数，以便外面调用
        self.selectedRowYear = (int)row; //将row赋值给
        [pickerView reloadComponent:0]; //为了选中的row变颜色，需要刷新整行
    }
    else if(component==1){
        //当用户更改月份的时候，_dayShouldChangeEnable = true表明需要重新计算天数
        _dayShouldChangeEnable = true;
        self.month = _monthArray[row]; //将选中的月份数赋值给公共的月份参数，以便外面调用
        self.selectedRowMonth = (int)row;
        [pickerView reloadComponent:1];
    }
    else{
        self.day = _dayArray[row];//将选中的天数赋值给公共的天数参数，以便外面调用
        NSLog(@"---------->>>>2");
        self.selectedRowDay = (int)row;
        [pickerView reloadComponent:2];
    }
    if(_dayShouldChangeEnable) //若，天数需要更新，那么执行
    {
        //调用计算天数的函数
        [self calculateDayWithMonth:[self.month intValue] andYear:[self.year intValue]];
        //由于更新的时候self.selectRowDay很可能大于 天数的最大值，比如self.selectRowDay为31，而天数最大值切换至了29，所以若超出，则需要将selectRowDay重新赋值
        if(self.selectedRowDay > _dayNumber-1){
            self.selectedRowDay = _dayNumber-1;
            NSLog(@"---------->>>>>%zi<<<<<<",self.selectedRowDay);
        }
        //重新对天数的那一列进行更新
        [pickerView reloadComponent:2];
        //false
        _dayShouldChangeEnable = false;
    }

}


//选中的项目变成绿色
-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{

    UILabel* Label = (UILabel*)view;
    if (!Label){
        Label = [[UILabel alloc] init];
        Label.minimumScaleFactor = 8;
        Label.adjustsFontSizeToFitWidth = YES;
        [Label setTextAlignment:NSTextAlignmentCenter];
        [Label setFont:[UIFont systemFontOfSize:15]];
             //当年份列，被选中的行对应变成绿色
            if (component==0&&_selectedRowYear==row) {
                
                Label.textColor=[UIColor greenColor];
                
            }else if (component==1&&_selectedRowMonth==row){
                
                Label.textColor= [UIColor greenColor];
                
            }else if(component==2&&_selectedRowDay==row){
            
                Label.textColor= [UIColor greenColor];
            }
    }
    Label.text=[self pickerView:pickerView titleForRow:row forComponent:component];
    
    return Label;
}
/*********************代理方法**********************/


//根据month和year计算对应的天数
-(void)calculateDayWithMonth:(int) month andYear:(int) year{

    
    float yearF = [self.year floatValue]/4; //能被4整除的是闰年
    float yearI = (int)yearF; //若yearI和yearF不一样，也就是说没有被整除，则不是闰年
    //当然以上计算没有包括：能被100整除，但不能被400整除的，不是闰年，因为2000年已过2100年还远....
    
    switch (month) {
        case 1:_dayNumber = 31; break;
        case 2:
            if(yearF != yearI){_dayNumber = 28;}else{
                _dayNumber = 29;}break;
        case 3:_dayNumber = 31;break;
        case 4:_dayNumber = 30;break;
        case 5:_dayNumber = 31;break;
        case 6:_dayNumber = 30;break;
        case 7:_dayNumber = 31;break;
        case 8:_dayNumber = 31;break;
        case 9:_dayNumber = 30;break;
        case 10:_dayNumber = 31;break;
        case 11:_dayNumber = 30;break;
        case 12:_dayNumber = 31;break;
        default:_dayNumber = 31;break;
    }
    [self setDaysForMonth:_dayNumber]; //此处调用函数，将dayArray重新赋值；

}

//将日期格式转化为2016-01-01这种格式
-(NSString *)getDateForMyMode{
    NSString *myMonth = @"";
    NSString *myDay = @"";
    
    if([self.month intValue] < 10){
        myMonth = [NSString stringWithFormat:@"0%@",self.month];
    }else{
        myMonth = [NSString stringWithFormat:@"%@",self.month];
    }
    if([self.day intValue] <10){
        myDay = [NSString stringWithFormat:@"0%@",self.day];
    }else{
        myDay = [NSString stringWithFormat:@"%@",self.day];
    }
    
    return [NSString stringWithFormat:@"%@-%@-%@",self.year,myMonth,myDay];
}

-(void)dealloc{
    NSLog(@"myDatePickerView dealloc");
}

@end

  • myTimePickerView.h和myTimePickerView.m类似，这里就不贴了....

  • 最后来看下主控制器，值得注意的是我创建了一个coverView，用来在日期（时间）选择器弹出的时候，覆盖主控制器的view，让用户无法在弹出状态按到主控制器的view中的按钮，由于ViewController.h中啥都没有，所以只贴ViewController.m

  • ViewController.m :

#import "ViewController.h"
#import "myDatePickerDialog.h"
#import "myDatePickerView.h"
#import "myTimePickerView.h"

@interface ViewController ()<myDatePickerViewDelegate,myTimePickerViewDelegate>

@property (nonatomic,strong) myDatePickerDialog *datePickerDialog;

@property (nonatomic,strong) myDatePickerView *datePickerView;

@property (nonatomic,strong) myTimePickerView *timePickerView;

@property (weak, nonatomic) IBOutlet UIButton *setDate;

@property (weak, nonatomic) IBOutlet UIButton *setTime;

//遮盖view
@property (nonatomic,strong) UIView *coverView;

@end

@implementation ViewController

//使用datePickerDialog 懒加载，没用到
-(myDatePickerDialog *)datePickerDialog{
    if(!_datePickerDialog){
    
        self.datePickerDialog = [[myDatePickerDialog alloc] init];
        
    }
    return _datePickerDialog;

}

-(UIView *)coverView{
    if(!_coverView){
        _coverView = [[UIView alloc] initWithFrame:self.view.frame];
        _coverView.backgroundColor = [UIColor blackColor];
        _coverView.alpha = 0.3;
    }
    return _coverView;
}

//日期选择器懒加载
-(myDatePickerView *)datePickerView{
    if(!_datePickerView){
        
        self.datePickerView = [[myDatePickerView alloc] init];
        self.datePickerView.delegate = self;
    }
    return _datePickerView;
    
}

//时间选择器懒加载
-(myTimePickerView *)timePickerView{
    if(!_timePickerView){
        
        _timePickerView = [[myTimePickerView alloc] init];
        _timePickerView.delegate = self;
    }
    return _timePickerView;
    
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //使用datePicker第一步，设置datePickerMode,默认状态下是UIDatePickerModeDateAndTime
 //   self.datePicker.datePickerMode = UIDatePickerModeDateAndTime;
    //第二步，设置其他细节问题，入最早时间，最迟时间等等，目前没有设置，跳骨
    
    [self.setDate addTarget:self action:@selector(showDateView) forControlEvents:UIControlEventTouchUpInside];

    
     [self.setTime addTarget:self action:@selector(showTimeView) forControlEvents:UIControlEventTouchUpInside];
    
    
}

//显示日期选择器
-(void)showDateView{
    
    
    
    CGRect tmp = self.datePickerView.view.frame;
    
    CGFloat xView = self.view.center.x;
    CGFloat yView = self.view.center.y;
    
    tmp.origin.x = xView - self.datePickerView.view.frame.size.width/2;
    tmp.origin.y = yView -  self.datePickerView.view.frame.size.height/2;
    
    _datePickerView.view.frame = tmp;
    
    [UIView animateWithDuration:0.5 animations:^{
        self.datePickerView.view.alpha = 1.0;
    }];
    
    [self.view addSubview:self.coverView];
    
    [self.view addSubview:self.datePickerView.view];
    
}

//显示时间选择器
-(void)showTimeView{
    
    
    CGRect tmp = self.timePickerView.view.frame;
    
    CGFloat xView = self.view.center.x;
    CGFloat yView = self.view.center.y;
    
    tmp.origin.x = xView - self.timePickerView.view.frame.size.width/2;
    tmp.origin.y = yView -  self.timePickerView.view.frame.size.height/2;
    
    _timePickerView.view.frame = tmp;
    
    [UIView animateWithDuration:0.5 animations:^{
        self.timePickerView.view.alpha = 1.0;
    }];
    
    
    [self.view addSubview:self.coverView];
    
    [self.view addSubview:self.timePickerView.view];
    
    
    
    
}

/***********myDatePickerView的代理**********/
- (void)pressEnterBtn{
    
    
    [self.setDate setTitle:[self.datePickerView getDateForMyMode] forState:UIControlStateNormal];
    [UIView animateWithDuration:0.5 animations:^{
        [self.coverView removeFromSuperview];
        self.datePickerView.view.alpha = 0.0;
    } completion:^(BOOL finished) {
        [self.datePickerView.view removeFromSuperview];
        //[self.coverView removeFromSuperview];
    }];
    
    //self.datePickerView = nil;

}

-(void)pressBackBtn{
    
    [UIView animateWithDuration:0.5 animations:^{
                         self.datePickerView.view.alpha = 0.0;
                        [self.coverView removeFromSuperview];
                     } completion:^(BOOL finished) {
                         [self.datePickerView.view removeFromSuperview];
                          //[self.coverView removeFromSuperview];
                     }];
    
 //self.datePickerView = nil;

}
/***********myDatePickerView的代理**********/

/***********myTimePickerView的代理**********/
- (void)pressEnterBtn_time{
    
    
    [self.setTime setTitle:[self.timePickerView getTimeForMyMode] forState:UIControlStateNormal];
    
    
    [UIView animateWithDuration:0.5 animations:^{
                         self.timePickerView.view.alpha = 0.0;
                        [self.coverView removeFromSuperview];
                     } completion:^(BOOL finished) {
                         [self.timePickerView.view removeFromSuperview];
                          //[self.coverView removeFromSuperview];
                     }];
    
    //self.datePickerView = nil;
    
}

-(void)pressBackBtn_time{
    
    [UIView animateWithDuration:0.5 animations:^{
                         [self.coverView removeFromSuperview];
                         self.timePickerView.view.alpha = 0.0;
                     } completion:^(BOOL finished) {
                         [self.timePickerView.view removeFromSuperview];
                         
                     }];
    //self.datePickerView = nil;
    
}
/***********myTimePickerView的代理**********/

@end
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342

推荐阅读更多精彩内容

  • UI控件及方法大集合
    废话不多说，直接上干货 ---------------------------------------------...
    小小赵纸农阅读 3,333评论 0赞 15
  • iOS自定义日期、时间、城市选择器
    选择器，我想大家都不陌生，当需要用户去选择某些范围值内的一个固定值时，我们会采用选择器的方式。选择器可以直观的提示...
    若锦阅读 15,935评论 49赞 91
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • 无标题文章
    跳吧跳吧 我的肩胛骨马上就要掉下来了 谁在烧我的肚子 腰后面有一座桥 我看到烟飘在我脸上 有趣的男人叼着烟站在车顶...
    蒙德西安阅读 125评论 1赞 0
  • 时间
    岁月茐茐，青丝变白发:，几许蹉跎，找不到你旧时模样，看那时间一点点改变，己刻留岁月的痕奕，过往的影片，在梦里不停的...
    得到必有失阅读 173评论 0赞 0