From c7fa45053368590e45efb313ef641e8a16037990 Mon Sep 17 00:00:00 2001 From: Harri Sarsa Date: Thu, 29 Aug 2013 12:01:53 +0300 Subject: [PATCH] datepicker plugin --- DatePicker/README.md | 81 ++++++++++++++++++++++++++++++++++++ DatePicker/www/datepicker.js | 64 ++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 DatePicker/README.md create mode 100644 DatePicker/www/datepicker.js diff --git a/DatePicker/README.md b/DatePicker/README.md new file mode 100644 index 0000000..319ae41 --- /dev/null +++ b/DatePicker/README.md @@ -0,0 +1,81 @@ +# DatePicker plugin + +Forked from https://github.com/phonegap/phonegap-plugins/tree/master/Android/DatePicker + +Modified for Steroids by AppGyver. + +##Configuration in Steroids + +The DatePicker plugin is bundled in with AppGyver Scanner for Android, so there's no need to install it separately. Simply copy the JavaScript files in the `www` directory to your project and load them in your app, e.g. with a `" tag. + +You also need to make sure that your `config.android.xml` file has the correct tag defined: + +* config.android.xml: + `` + +##Usage + +1. Copy the .js file to your 'www' folder +2. Create a package com.phonegap.plugins +3. Copy the .java file into this package +4. Update your res/xml/plugins.xml file with the following line: + + `` + +5. Add the JavaScript file to your HTML page where you want to use the DatePicker: + + `` + +6. Add a class="nativedatepicker" to your element for which you want the native datepicker +7. Add the following jQuery fragment to handle the click on these input elements: + +``` + $('.nativedatepicker').focus(function(event) { + var currentField = $(this); + var myNewDate = Date.parse(currentField.val()) || new Date(); + + // Same handling for iPhone and Android + window.plugins.datePicker.show({ + date : myNewDate, + mode : 'date', // date or time or blank for both + allowOldDates : true + }, function(returnDate) { + var newDate = new Date(returnDate); + currentField.val(newDate.toString("dd/MMM/yyyy")); + + // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus. + currentField.blur(); + }); + }); + + $('.nativetimepicker').focus(function(event) { + var currentField = $(this); + var time = currentField.val(); + var myNewTime = new Date(); + + myNewTime.setHours(time.substr(0, 2)); + myNewTime.setMinutes(time.substr(3, 2)); + + // Same handling for iPhone and Android + plugins.datePicker.show({ + date : myNewTime, + mode : 'time', // date or time or blank for both + allowOldDates : true + }, function(returnDate) { + // returnDate is generated by .toLocaleString() in Java so it will be relative to the current time zone + var newDate = new Date(returnDate); + currentField.val(newDate.toString("HH:mm")); + + currentField.blur(); + }); + }); +``` + +8. It is recommended to prefil these input fields and make these fields read only with a standard date format, preferably with three letter month so it can always be parsed. + +9. You may need to convert the result of date.parse() back to an object to get the picker to work a second or third time around. If so, try inserting this code after the myNewDate declaration: + +``` if(typeof myNewDate === "number"){ + myNewDate = new Date (myNewDate); + } + ``` \ No newline at end of file diff --git a/DatePicker/www/datepicker.js b/DatePicker/www/datepicker.js new file mode 100644 index 0000000..e8f2237 --- /dev/null +++ b/DatePicker/www/datepicker.js @@ -0,0 +1,64 @@ +/** + * Phonegap DatePicker Plugin Copyright (c) Greg Allen 2011 MIT Licensed + * Reused and ported to Android plugin by Daniel van 't Oever + */ +var DatePicker = (function (gap) { + /** + * Constructor + */ + function DatePicker() { + this._callback; + } + + /** + * show - true to show the ad, false to hide the ad + */ + DatePicker.prototype.show = function(options, cb) { + if (options.date) { + options.date = (options.date.getMonth() + 1) + "/" + (options.date.getDate()) + "/" + (options.date.getFullYear()) + "/" + + (options.date.getHours()) + "/" + (options.date.getMinutes()); + } + var defaults = { + mode : 'date', + date : '', + allowOldDates : true + }; + + for ( var key in defaults) { + if (typeof options[key] !== "undefined") + defaults[key] = options[key]; + } + this._callback = cb; + + return gap.exec(cb, failureCallback, 'DatePickerPlugin', defaults.mode, new Array(defaults)); + }; + + DatePicker.prototype._dateSelected = function(date) { + var d = new Date(parseFloat(date) * 1000); + if (this._callback) + this._callback(d); + }; + + function failureCallback(err) { + console.log("datePickerPlugin.js failed: " + err); + } + + /** + * Load DatePicker + */ + gap.addConstructor(function () { + if (gap.addPlugin) { + gap.addPlugin("datePicker", DatePicker); + } else { + if (!window.plugins) { + window.plugins = {}; + } + + window.plugins.datePicker = new DatePicker(); + } + }); + + return DatePicker; + + +})(window.cordova || window.Cordova || window.PhoneGap);