How to create a date picker in the touch bar (mac OS) like the calendar app

Question

I couldn't attach a photo of the touch bar. But if you have enabled the touch bar, when you click on the [Day Week Month Year] segments in the Calendar app, you can see the different type of date pickers in the touch bar. I have to create a same date picker. Any help is much appreciated.

Answer 1

The scrolling months might be a single NSScrubber.

There are some text-based and image-based examples of this in Apple's NSTouchBar Catalog source. Have a look at the ScrubberViewController.m file in that project.

Below is some simplified code for setting up a single NSScrubber to display the months. You'd probably want to properly localize month names, and add code to highlight the current choice.

static NSString     *kMyScrubberID  = @"com.mycompany.myapp.month.scrubber";

self.myTitlesArray                  = [NSArray arrayWithObjects:
                                       @"Jan",
                                       @"Feb",
                                       @"Mar",
                                       @"Apr",
                                       @"May",
                                       @"Jun",
                                       @"Jul",
                                       @"Aug",
                                       @"Sep",
                                       @"Oct",
                                       @"Nov",
                                       @"Dec",
                                       nil];

// NSTouchBarDelegate
- (nullable NSTouchBarItem *)touchBar:(NSTouchBar *)touchBar makeItemForIdentifier:(NSTouchBarItemIdentifier)anIDstr {
    if ([anIDstr isEqualToString:kMyScrubberID]) {
        NSCustomTouchBarItem    *theScrubberItem    = [[NSCustomTouchBarItem alloc] initWithIdentifier:anIDstr];
        NSScrubber              *theScrubber        = [[NSScrubber alloc] initWithFrame:NSMakeRect(0, 0, 300, 30)];
        theScrubber.scrubberLayout                  = [[NSScrubberFlowLayout alloc] init];
        [theScrubber registerClass:[NSScrubberTextItemView class] forItemIdentifier:anIDstr];
        theScrubber.delegate                        = (id<NSScrubberDelegate>)self;
        theScrubber.dataSource                      = (id<NSScrubberDataSource>)self;
        theScrubber.mode                            = NSScrubberModeFree;
        theScrubber.continuous                      = YES;
        theScrubber.floatsSelectionViews            = YES;
        theScrubber.showsArrowButtons               = NO;
        theScrubber.selectionOverlayStyle           = nil;
        theScrubber.selectionBackgroundStyle        = [NSScrubberSelectionStyle roundedBackgroundStyle];
        theScrubber.backgroundColor                 = [NSColor colorWithRed:51.0/255.0 green:51.0/255.0 blue:51.0/255.0 alpha:1.0];
        theScrubberItem.view                        = theScrubber;
        return theScrubberItem;
    } else {
        return nil;
    }
}

// NSScrubberDelegate
- (void)scrubber:(NSScrubber *)scrubber didSelectItemAtIndex:(NSInteger)selectedIndex {
        NSLog(@"selected month = '%@'", [self.myTitlesArray objectAtIndex[selectedIndex]);

}

// NSScrubberDataSource
- (NSInteger)numberOfItemsForScrubber:(NSScrubber *)scrubber {
    return [self.myTitlesArray count];
}

- (NSScrubberItemView *)scrubber:(NSScrubber *)scrubber viewForItemAtIndex:(NSInteger)index {
    NSScrubberTextItemView  *theItemView    = [scrubber makeItemWithIdentifier:kMyScrubberID owner:nil];
    if (index < [self.myTitlesArray count]) {
        theItemView.textField.stringValue   = [self.myTitlesArray objectAtIndex:index];
    }
    return theItemView;
}

// NSScrubberFlowLayoutDelegate
- (NSSize)scrubber:(NSScrubber *)scrubber layout:(NSScrubberFlowLayout *)layout sizeForItemAtIndex:(NSInteger)itemIndex {
    return NSMakeSize(60, 30);
}