From 73210b78b34a7d8b5a03ab12f3e32cbd665790bb Mon Sep 17 00:00:00 2001 From: biodiv Date: Thu, 9 Apr 2015 12:53:45 +0200 Subject: [PATCH 1/2] Initial commit --- plugin.xml | 10 +++ src/windows/DatePickerProxy.js | 123 +++++++++++++++++++++++++++++++++ www/windows/DatePicker.js | 66 ++++++++++++++++++ 3 files changed, 199 insertions(+) create mode 100644 src/windows/DatePickerProxy.js create mode 100644 www/windows/DatePicker.js diff --git a/plugin.xml b/plugin.xml index 9a5c07a..025d956 100644 --- a/plugin.xml +++ b/plugin.xml @@ -46,5 +46,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/windows/DatePickerProxy.js b/src/windows/DatePickerProxy.js new file mode 100644 index 0000000..fd5a00f --- /dev/null +++ b/src/windows/DatePickerProxy.js @@ -0,0 +1,123 @@ +/* + * + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + * +*/ + +/*global Windows:true */ + +var cordova = require('cordova'); + +var winJSDatePicker = { + + show: function(success, error, pickertype){ + var overlay = document.createElement("div"); + var overlay_id = "winjsdatepickeroverlay"; + overlay.id = overlay_id; + overlay.style.cssText = "position: fixed; left: 0; top: 0; right:0; bottom:0; width: 100%; height: 100%; z-index: 999; margin: 0 auto; background: #000;"; + + if (pickertype.indexOf("time") >= 0){ + var timePickerDiv = document.createElement("div"); + timePickerDiv.id = "winjstimepicker"; + var timePicker = new WinJS.UI.TimePicker(timePickerDiv, options); + timePicker.onchange = module.exports.checkMinMaxTime; + + } + + if (pickertype.indexOf("date") >= 0){ + var datePickerDiv = document.createElement("div"); + datePickerDiv.id = "winjsdatepicker"; + var datePicker = new WinJS.UI.DatePicker(datePickerDiv, options); + datePicker.onchange = module.exports.checkMinMaxDate; + + overlay.appendChild(datePickerDiv); + } + + overlayFooter = document.createElement("div"); + overlayFooter.style.cssText = "position: fixed; bottom:0; left:0; right:0; z-index: 1000; width: 100%; height: 10%; display: table; text-align:center; vertical-align:middle;"; + + var leftCell = document.createElement("div"); + leftCell.style.cssText = "display: table-cell; width: 50%"; + overlayFooter.appendChild(leftCell); + + var rightCell = document.createElement("div"); + rightCell.style.cssText = "display: table-cell; width: 50%"; + overlayFooter.appendChild(rightCell); + + var cancelButton = document.createElement("button"); + cancelButton.id = "cameraCaptureCancelButton"; + cancelButton.classList.add("cameraButton"); + cancelButton.innerText = "Cancel"; + cancelButton.style.cssText = "width:80%; height: 80%;"; + + cancelButton.addEventListener("click", function(){ + + var pickerEl = document.getElementById(overlay_id) + pickerEl.parentElement.removeChild(pickerEl); + + }); + + rightCell.appendChild(cancelButton); + + var useButton = document.createElement("button"); + useButton.id = "cameraCaptureTakeButton"; + useButton.classList.add("cameraButton"); + useButton.innerText = "Use"; + useButton.style.cssText = "width:80%; height: 80%;"; + + useButton.addEventListener("click", success); + + }, + + /* ms only provides maxyear and minyear */ + checkMinMaxDate: function(){ + + }, + + checkMinMaxTime : function(){ + + } +}; + +module.exports = { + + date:function(success, error, args) { + + function getDate(){ + var date = new Date(datePicker.current); + success(date); + }; + + winJSDatePicker.show(getDate, error, args); + + }, + + time:function(success, error, timeArgs) { + + winJSDatePicker.show(getTime, error, args); + + }, + + datetime:function(success, error, dateTimeArgs) { + + winJSDatePicker.show(getDateTime, error, args); + + } +}; + +require("cordova/exec/proxy").add("DatePicker",module.exports); diff --git a/www/windows/DatePicker.js b/www/windows/DatePicker.js new file mode 100644 index 0000000..87f8df1 --- /dev/null +++ b/www/windows/DatePicker.js @@ -0,0 +1,66 @@ +/** +* Phonegap DatePicker Plugin Copyright (c) Greg Allen 2011 MIT Licensed +* Reused and ported to Android plugin by Daniel van 't Oever +* Reused and ported to Windows plugin by Thomas Uher +*/ +/** +* 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 : '', + minDate: 0, + maxDate: 0, + clearText: 'Clear' + }; + for (var key in defaults) { + if (typeof options[key] !== "undefined") { + defaults[key] = options[key]; + } + } + //this._callback = cb; + var callback = function(message) { + if(message == -1){ + cb(message); + } + else { + var timestamp = Date.parse(message); + if(isNaN(timestamp) == false) { + cb(new Date(message)); + } + else { + cb(); + } + } + } + cordova.exec(callback, + null, + "DatePickerPlugin", + defaults.mode, + [defaults] + ); +}; + +var datePicker = new DatePicker(); +module.exports = datePicker; +// Make plugin work under window.plugins +if (!window.plugins) { + window.plugins = {}; +} +if (!window.plugins.datePicker) { + window.plugins.datePicker = datePicker; +} \ No newline at end of file From 88f82cb3c44c285b90e2f507ec3bf81cc73daaaf Mon Sep 17 00:00:00 2001 From: biodiv Date: Mon, 13 Apr 2015 17:16:49 +0200 Subject: [PATCH 2/2] added support for windows --- README.md | 14 +- src/windows/DatePickerProxy.js | 406 ++++++++++++++++++++++++++------- 2 files changed, 331 insertions(+), 89 deletions(-) diff --git a/README.md b/README.md index 5e0d903..7c79cf3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# DatePicker Plugin for Cordova/PhoneGap 3.0 (iOS and Android) +# DatePicker Plugin for Cordova/PhoneGap 4.0 (iOS and Android and Windows) -This is a combined version of DatePicker iOS and Android plugin for Cordova/Phonegap 3.0. +This is a combined version of DatePicker iOS and Android and Windows plugin for Cordova/Phonegap 4.0. - Original iOS version: https://github.com/sectore/phonegap3-ios-datepicker-plugin - Original Android version: https://github.com/bikasv/cordova-android-plugins/tree/master/datepicker @@ -35,23 +35,23 @@ datePicker.show(options, function(date){ ## Options -### mode - iOS, Android +### mode - iOS, Android, Windows The mode of the date picker. Type: String -Values: `date` | `time` | `datetime` (iOS only) +Values: `date` | `time` | `datetime` (iOS, Windows only) Default: `date` -### date - iOS, Android +### date - iOS, Android, Windows Selected date. Type: String Default: `new Date()` -### minDate - iOS, Android +### minDate - iOS, Android, Windows Minimum date. Type: Date | empty String @@ -61,7 +61,7 @@ Default: `(empty String)` minDate is a Date object for iOS and an integer for Android, so you need to account for that when using the plugin. -### maxDate - iOS, Android +### maxDate - iOS, Android, Windows Maximum date. Type: Date | empty String diff --git a/src/windows/DatePickerProxy.js b/src/windows/DatePickerProxy.js index fd5a00f..13925e6 100644 --- a/src/windows/DatePickerProxy.js +++ b/src/windows/DatePickerProxy.js @@ -1,4 +1,4 @@ -/* +cordova.define("com.plugin.datepicker.DatePickerProxy", function(require, exports, module) { /* * * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -19,105 +19,347 @@ * */ -/*global Windows:true */ +/*global Windows, WinJS*/ var cordova = require('cordova'); -var winJSDatePicker = { +module.exports = { - show: function(success, error, pickertype){ - var overlay = document.createElement("div"); - var overlay_id = "winjsdatepickeroverlay"; - overlay.id = overlay_id; - overlay.style.cssText = "position: fixed; left: 0; top: 0; right:0; bottom:0; width: 100%; height: 100%; z-index: 999; margin: 0 auto; background: #000;"; - - if (pickertype.indexOf("time") >= 0){ - var timePickerDiv = document.createElement("div"); - timePickerDiv.id = "winjstimepicker"; - var timePicker = new WinJS.UI.TimePicker(timePickerDiv, options); - timePicker.onchange = module.exports.checkMinMaxTime; + date: function (success, error, args) { - } + module.exports.winJSDatePicker.show(success, error, "date", args[0]); + + }, + + time: function (success, error, args) { - if (pickertype.indexOf("date") >= 0){ - var datePickerDiv = document.createElement("div"); - datePickerDiv.id = "winjsdatepicker"; - var datePicker = new WinJS.UI.DatePicker(datePickerDiv, options); - datePicker.onchange = module.exports.checkMinMaxDate; - - overlay.appendChild(datePickerDiv); - } + module.exports.winJSDatePicker.show(success, error, "time", args[0]); - overlayFooter = document.createElement("div"); - overlayFooter.style.cssText = "position: fixed; bottom:0; left:0; right:0; z-index: 1000; width: 100%; height: 10%; display: table; text-align:center; vertical-align:middle;"; - - var leftCell = document.createElement("div"); - leftCell.style.cssText = "display: table-cell; width: 50%"; - overlayFooter.appendChild(leftCell); - - var rightCell = document.createElement("div"); - rightCell.style.cssText = "display: table-cell; width: 50%"; - overlayFooter.appendChild(rightCell); - - var cancelButton = document.createElement("button"); - cancelButton.id = "cameraCaptureCancelButton"; - cancelButton.classList.add("cameraButton"); - cancelButton.innerText = "Cancel"; - cancelButton.style.cssText = "width:80%; height: 80%;"; + }, + + datetime: function (success, error, args) { - cancelButton.addEventListener("click", function(){ + module.exports.winJSDatePicker.show(success, error, "datetime", args[0]); + + }, + + winJSDatePicker : { + + show: function(success, error, pickertype, options){ + /* options = { + mode : 'date/time/datetime', + date : selected date in format "month/day/year/hours/minutes", + minDate: 0 or DateObj, + maxDate: 0 or DateObj, + clearText: 'Clear' + } + */ + + if (options.date) { + var dateParts = options.date.split("/"); + + var month = dateParts[0] <= 9 ? '0' + dateParts[0] : dateParts[0], + day = dateParts[1] <= 9 ? '0' + dateParts[1] : dateParts[1], + hours = dateParts[3] <= 9 ? '0' + dateParts[3] : dateParts[3], + minutes = dateParts[4] <= 9 ? '0' + dateParts[4] : dateParts[4]; + + var dateTimeString = "" + dateParts[2] + "-" + month + "-" + day + "T" + hours + ":" + minutes + ":00"; + + options.date = new Date(dateTimeString); + + } + else { + options.date = new Date(); + } + + if (!options.minDate) { + options.minDate = new Date ("1970-01-01T00:00:00") + } + + if (!options.maxDate) { + options.maxDate = new Date("2050-01-01T00:00:00"); + } + + var buttonCSSText = "border: 3px solid white; background:#000; color:#FFF; border-radius:0; width: 90%; height: 90%; font-size: 2em;" + + var overlay = document.createElement("div"); + var overlay_id = "winjsoverlay"; + overlay.id = overlay_id; + overlay.style.cssText = "position: fixed; left: 0; top: 0; right:0; bottom:0; width: 100%; height: 100%; z-index: 999; margin: 0 auto; background: #000; -ms-touch-action:none;"; + + + + var pickerDivTable = document.createElement("div"); + pickerDivTable.style.cssText = "width:90%; height: 90%; display: table; text-align:center; margin: 0 auto; padding:0;"; + + var pickerDiv = document.createElement("div"); + pickerDiv.id = "winjsdatetimepickerContainer"; + pickerDiv.style.cssText = "display: table-cell; vertical-align:middle; text-align:center;"; + + pickerDivTable.appendChild(pickerDiv); + + //insert timepicker if needed + if (pickertype.indexOf("time") >= 0){ + var timePickerTable = document.createElement("table"); + timePickerTable.style.cssText = "table-layout:fixed; width:100%; margin: 0 auto; padding:0;"; + + var timePickerDescriptionRow = document.createElement("tr"); + timePickerTable.appendChild(timePickerDescriptionRow); + + var timePickerInputRow = document.createElement("tr"); + timePickerTable.appendChild(timePickerInputRow); + + for (var i = 0; i < 2; i++) { + var descriptionElement = document.createElement("td"); + timePickerDescriptionRow.appendChild(descriptionElement); + + var cell = document.createElement("td"); + timePickerInputRow.appendChild(cell); + + var timePickerSelect = document.createElement("select"); + timePickerSelect.style.cssText = buttonCSSText; + + cell.appendChild(timePickerSelect); + + if (i == 0) { + timePickerSelect.id = "winjsdatepickerHours"; + descriptionElement.textContent = "hours"; + + for (var h = 0; h <= 23; h++) { + var option = document.createElement("option"); + option.textContent = h <= 9 ? "0" + h : h; + option.value = h; + + if (h == options.date.getHours()) { + option.setAttribute("selected", "selected"); + } + + timePickerSelect.appendChild(option); + } + } + else if (i == 1) { + timePickerSelect.id = "winjsdatepickerMinutes"; + descriptionElement.textContent = "minutes"; + + for (var m = 0 ; m <= 59; m++) { + var option = document.createElement("option"); + option.textContent = m <= 9 ? "0" + m : m; + option.value = m; + + if (m == options.date.getMinutes()) { + option.setAttribute("selected", "selected"); + } + + timePickerSelect.appendChild(option); + } + } + + + } + + //not supported on phone 8.1 + //var timePicker = new WinJS.UI.TimePicker(timePickerDiv, options); + + pickerDiv.appendChild(timePickerTable); + } + + //insert date picker if needed + if (pickertype.indexOf("date") >= 0) { + + var datePickerTable = document.createElement("table"); + datePickerTable.style.cssText = "table-layout:fixed; width:100%; margin: 0 auto; padding:0;"; + + var datePickerDescriptionRow = document.createElement("tr"); + datePickerTable.appendChild(datePickerDescriptionRow); + + var datePickerInputRow = document.createElement("tr"); + datePickerTable.appendChild(datePickerInputRow); + + for (var i = 0; i < 3; i++) { + + var descriptionElement = document.createElement("td"); + datePickerDescriptionRow.appendChild(descriptionElement); + + var cell = document.createElement("td"); + + var datePickerSelect = document.createElement("select"); + datePickerSelect.style.cssText = buttonCSSText; + + if (i == 0) { + datePickerSelect.id = "winjsdatepickerYear"; + descriptionElement.textContent = "year"; + + for (var y=1970; y<=2050; y++) { + var option = document.createElement("option"); + option.textContent = y; + option.value = y; + + if (y == options.date.getFullYear()) { + option.setAttribute("selected", "selected"); + } + + datePickerSelect.appendChild(option); + } + + + } + else if (i == 1) { + datePickerSelect.id = "winjsdatepickerMonth"; + descriptionElement.textContent = "month"; + + for (var m=1 ; m<=12; m++) { + var option = document.createElement("option"); + option.textContent = m <=9 ? "0" + m : m; + option.value = m; + + if (m == options.date.getMonth()+1) { + option.setAttribute("selected", "selected"); + } + + datePickerSelect.appendChild(option); + } + } + else if (i == 2) { + datePickerSelect.id = "winjsdatepickerDay"; + descriptionElement.textContent = "day"; + + for (var d=1; d<=31; d++) { + var option = document.createElement("option"); + option.textContent = d <= 9 ? "0" + d : d; + option.value = d; + + if (d == options.date.getDate()) { + option.setAttribute("selected", "selected"); + } + + datePickerSelect.appendChild(option); + } + } + + datePickerSelect.addEventListener("change", function () { + //checkMinMaxDate + var year = document.getElementById("winjsdatepickerYear"), + month = document.getElementById("winjsdatepickerMonth"), + day = document.getElementById("winjsdatepickerDay"), + maxYear = options.maxDate.getFullYear(), + minYear = options.minDate.getFullYear(), + maxMonth = options.maxDate.getMonth()+1, + minMonth = options.minDate.getMonth()+1, + maxDay = options.maxDate.getDate(), + minDay = options.minDate.getDate(); + + + if (year.value > maxYear) { + year.value = maxYear; + } + else if (year.value < minYear) { + year.value = minYear; + } + + if (year.value == maxYear) { + if (month.value > maxMonth) { + month.value = maxMonth; + } + + if (month.value == maxMonth) { + if (day.value > maxDay) { + day.value = maxDay; + } + } + + } + else if (year.value == minYear) { + if (month.value < minMonth) { + month.value = minMonth; + } + + if (month.value == minMonth) { + if (day.value < minDay) { + day.value = minDay; + } + } + } + + }, false); + + cell.appendChild(datePickerSelect); + + datePickerInputRow.appendChild(cell); + + } + + pickerDiv.appendChild(datePickerTable); + //not supported on phone 8.1 + //var datePicker = new WinJS.UI.DatePicker(datePickerDiv, options); + //datePicker.onchange = module.exports.checkMinMaxDate; + + } + + overlay.appendChild(pickerDivTable); + + overlayFooter = document.createElement("div"); + overlayFooter.style.cssText = "position: fixed; bottom:0; left:0; right:0; z-index: 1000; width: 100%; height: 10%; display: table; text-align:center; vertical-align:middle;"; + overlay.appendChild(overlayFooter); + + var leftCell = document.createElement("div"); + leftCell.style.cssText = "display: table-cell; width: 50%"; + overlayFooter.appendChild(leftCell); + + var rightCell = document.createElement("div"); + rightCell.style.cssText = "display: table-cell; width: 50%"; + overlayFooter.appendChild(rightCell); + + var cancelButton = document.createElement("button"); + cancelButton.innerText = "Cancel"; + cancelButton.style.cssText = buttonCSSText; + + cancelButton.addEventListener("click", function(){ - var pickerEl = document.getElementById(overlay_id) - pickerEl.parentElement.removeChild(pickerEl); + overlay.parentElement.removeChild(overlay); - }); + }); - rightCell.appendChild(cancelButton); + rightCell.appendChild(cancelButton); - var useButton = document.createElement("button"); - useButton.id = "cameraCaptureTakeButton"; - useButton.classList.add("cameraButton"); - useButton.innerText = "Use"; - useButton.style.cssText = "width:80%; height: 80%;"; + var useButton = document.createElement("button"); + useButton.innerText = "Use"; + useButton.style.cssText = buttonCSSText; - useButton.addEventListener("click", success); - - }, - - /* ms only provides maxyear and minyear */ - checkMinMaxDate: function(){ - - }, - - checkMinMaxTime : function(){ - - } -}; + useButton.addEventListener("click", function () { + //read input and return Date Object + var year = document.getElementById("winjsdatepickerYear"), + month = document.getElementById("winjsdatepickerMonth"), + day = document.getElementById("winjsdatepickerDay"), + hours = document.getElementById("winjsdatepickerHours"), + minutes = document.getElementById("winjsdatepickerMinutes"); -module.exports = { - - date:function(success, error, args) { - - function getDate(){ - var date = new Date(datePicker.current); - success(date); - }; - - winJSDatePicker.show(getDate, error, args); + var dateTimeStr = ""; - }, + if (pickertype.indexOf("date") >= 0) { + dateTimeStr = "" + (year.value <= 9 ? "0" + year.value : year.value) + "-" + (month.value <= 9 ? "0" + month.value : month.value) + "-" + (day.value <= 9 ? "0" + day.value : day.value); + } + else { + dateTimeStr = "1970-01-01"; + } - time:function(success, error, timeArgs) { - - winJSDatePicker.show(getTime, error, args); - - }, + if (pickertype.indexOf("time") >= 0) { + dateTimeStr = dateTimeStr + "T" + (hours.value <= 9 ? "0" + hours.value : hours.value) + ":" + (minutes.value <= 9 ? "0" + minutes.value : minutes.value) + ":00"; + } + + overlay.parentElement.removeChild(overlay); + success(dateTimeStr); - datetime:function(success, error, dateTimeArgs) { - - winJSDatePicker.show(getDateTime, error, args); + }); + + leftCell.appendChild(useButton); + + document.body.appendChild(overlay); + + } } }; -require("cordova/exec/proxy").add("DatePicker",module.exports); +require("cordova/exec/proxy").add("DatePickerPlugin",module.exports); + +});