how to insert date picker in ios using phonegap - jquery-mobile

Question

Please help me in implementing the date picker in IOS .I try three things
1) Type ="Date " it is working fine but there is no done button.
2) I take date box there is of focus and fluctuation.
Now i thought to insert Native plugin of date picker in iOS(Latest).
Or provide some example of mobile scroll in IOS

Answer 1

Js code:
/**
* Cordova DatePicker Plugin
* Copyright (c) Greg Allen 2011
* MIT Licensed
*
* Updated for Cordova 2.1 by Robert (Jamie) Munro
*/
if (typeof cordova !== "undefined") {
/**
* Constructor
*/
function DatePicker() {
this._callback;
}
/**
* show - true to show the ad, false to hide the ad
*/
DatePicker.prototype.show = function(options, cb) {
var padDate = function(date) {
if (date.length == 1) {
return ("0" + date);
}
return date;
};
if (options.date) {
options.date = options.date.getFullYear() + "-" +
padDate(options.date.getMonth()+1) + "-" +
padDate(options.date.getDate()) +
"T" + padDate(options.date.getHours()) + ":" +
padDate(options.date.getMinutes()) + ":00Z";
}
var defaults = {
mode : 'datetime',
date : '',
allowOldDates : true,
allowFutureDates : true
};
for (var key in defaults) {
if (typeof options[key] !== "undefined")
defaults[key] = options[key];
}
this._callback = cb;
cordova.exec("DatePicker.show", defaults);
};
DatePicker.prototype._dateSelected = function(date) {
var d = new Date(parseFloat(date) * 1000);
if (this._callback)
this._callback(d);
}
cordova.addConstructor(function() {
if (!window.plugins) {
window.plugins = {};
}
window.plugins.datePicker = new DatePicker();
});
};
datepicker.m code:
// Phonegap DatePicker Plugin
// Copyright (c) Greg Allen 2011
// MIT Licensed
//
// Additional refactoring by Sam de Freyssinet
#import "DatePicker.h"
#interface DatePicker (Private)
// Initialize the UIActionSheet with ID <UIActionSheetDelegate> delegate UIDatePicker datePicker (UISegmentedControl)closeButton
- (void)initActionSheet:(id <UIActionSheetDelegate>)delegateOrNil datePicker:(UIDatePicker *)datePicker closeButton:(UISegmentedControl *)closeButton;
// Creates the NSDateFormatter with NSString format and NSTimeZone timezone
- (NSDateFormatter *)createISODateFormatter:(NSString *)format timezone:(NSTimeZone *)timezone;
// Creates the UIDatePicker with NSMutableDictionary options
- (UIDatePicker *)createDatePicker:(CGRect)pickerFrame;
// Creates the UISegmentedControl with UIView parentView, NSString title, ID target and SEL action
- (UISegmentedControl *)createActionSheetCloseButton:(NSString *)title target:(id)target action:(SEL)action;
// Configures the UIDatePicker with the NSMutableDictionary options
- (void)configureDatePicker:(NSMutableDictionary *)optionsOrNil;
#end
#implementation DatePicker
#synthesize datePickerSheet = _datePickerSheet;
#synthesize datePicker = _datePicker;
#synthesize isoDateFormatter = _isoDateFormatter;
#pragma mark - Public Methods
- (CDVPlugin *)initWithWebView:(UIWebView *)theWebView
{
self = (DatePicker *)[super initWithWebView:theWebView];
if (self)
{
UIDatePicker *userDatePicker = [self createDatePicker:CGRectMake(0, 40, 0, 0)];
UISegmentedControl *datePickerCloseButton = [self createActionSheetCloseButton:#"Close" target:self action:#selector(dismissActionSheet:)];
NSDateFormatter *isoTimeFormatter = [self createISODateFormatter:k_DATEPICKER_DATETIME_FORMAT timezone:[NSTimeZone defaultTimeZone]];
self.datePicker = userDatePicker;
self.isoDateFormatter = isoTimeFormatter;
userDatePicker.datePickerMode=UIDatePickerModeCountDownTimer;
[self initActionSheet:self datePicker:userDatePicker closeButton:datePickerCloseButton];
}
return self;
}
- (void)show:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options
{
if (isVisible) {
return;
}
[self configureDatePicker:options];
[self.datePickerSheet showInView:[[super webView] superview]];
[self.datePickerSheet setBounds:CGRectMake(0, 0, 320, 485)];
isVisible = YES;
}
- (void)dismissActionSheet:(id)sender {
[self.datePickerSheet dismissWithClickedButtonIndex:0 animated:YES];
}
- (void)onMemoryWarning
{
// It could be better to close the datepicker before the system
// clears memory. But in reality, other non-visible plugins should
// be tidying themselves at this point. This could cause a fatal
// at runtime.
if (isVisible) {
return;
}
[self release];
}
- (void)dealloc
{
[_datePicker release];
[_datePickerSheet release];
[_isoDateFormatter release];
[super dealloc];
}
#pragma mark - UIActionSheetDelegate methods
- (void)actionSheet:(UIActionSheet *)actionSheet willDismissWithButtonIndex:(NSInteger)buttonIndex
{
NSString* jsCallback = [NSString stringWithFormat:#"window.plugins.datePicker._dateSelected(\"%i\");", (int)[self.datePicker.date timeIntervalSince1970]];
[super writeJavascript:jsCallback];
}
- (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex
{
isVisible = NO;
}
#pragma mark - Private Methods
- (void)initActionSheet:(id <UIActionSheetDelegate>)delegateOrNil datePicker:(UIDatePicker *)datePicker closeButton:(UISegmentedControl *)closeButton
{
UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil
delegate:delegateOrNil
cancelButtonTitle:nil
destructiveButtonTitle:nil
otherButtonTitles:nil];
[actionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];
[actionSheet addSubview:datePicker];
[actionSheet addSubview:closeButton];
self.datePickerSheet = actionSheet;
[actionSheet release];
}
- (UIDatePicker *)createDatePicker:(CGRect)pickerFrame
{
UIDatePicker *datePickerControl = [[UIDatePicker alloc] initWithFrame:pickerFrame];
datePickerControl.datePickerMode=UIDatePickerModeCountDownTimer;
return [datePickerControl autorelease];
}
- (NSDateFormatter *)createISODateFormatter:(NSString *)format timezone:(NSTimeZone *)timezone;
{
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setTimeZone:timezone];
[dateFormatter setDateFormat:format];
return [dateFormatter autorelease];
}
- (UISegmentedControl *)createActionSheetCloseButton:(NSString *)title target:(id)target action:(SEL)action
{
UISegmentedControl *closeButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:title]];
closeButton.momentary = YES;
closeButton.frame = CGRectMake(260, 7.0f, 50.0f, 30.0f);
closeButton.segmentedControlStyle = UISegmentedControlStyleBar;
closeButton.tintColor = [UIColor blackColor];
[closeButton addTarget:target action:action forControlEvents:UIControlEventValueChanged];
return [closeButton autorelease];
}
- (void)configureDatePicker:(NSMutableDictionary *)optionsOrNil;
{
NSString *mode = [optionsOrNil objectForKey:#"mode"];
NSString *dateString = [optionsOrNil objectForKey:#"date"];
BOOL allowOldDates = NO;
BOOL allowFutureDates = YES;
if ([[optionsOrNil objectForKey:#"allowOldDates"] intValue] == 1) {
allowOldDates = YES;
}
if ( ! allowOldDates) {
self.datePicker.minimumDate = [NSDate date];
}
if ([[optionsOrNil objectForKey:#"allowFutureDates"] intValue] == 0) {
allowFutureDates = NO;
}
if ( ! allowFutureDates) {
self.datePicker.maximumDate = [NSDate date];
}
self.datePicker.date = [self.isoDateFormatter dateFromString:dateString];
if ([mode isEqualToString:#"date"]) {
self.datePicker.datePickerMode = UIDatePickerModeDate;
}
else if ([mode isEqualToString:#"time"])
{
self.datePicker.datePickerMode = UIDatePickerModeCountDownTimer;
}
else
{
self.datePicker.datePickerMode = UIDatePickerModeDateAndTime;
}
}
#end
Datepicker.h code:
// Phonegap DatePicker Plugin
// Copyright (c) Greg Allen 2011
// MIT Licensed
#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>
#ifndef k_DATEPICKER_DATETIME_FORMAT
#define k_DATEPICKER_DATETIME_FORMAT #"yyyy-MM-dd'T'HH:mm:ss'Z'"
#endif
#interface DatePicker : CDVPlugin <UIActionSheetDelegate> {
UIActionSheet *_datePickerSheet;
UIDatePicker *_datePicker;
NSDateFormatter *_isoDateFormatter;
BOOL isVisible;
}
#property (nonatomic, retain) UIActionSheet* datePickerSheet;
#property (nonatomic, retain) UIDatePicker* datePicker;
#property (nonatomic, retain) NSDateFormatter* isoDateFormatter;
//- (void) prepare:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
- (void) show:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
#end

Answer 2

If you want native date picker use plug in:
https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/DatePicker
else use normal jquerymobile datebox:
http://dev.jtsage.com/jQM-DateBox2/