├── .github └── FUNDING.yml ├── LICENSE.md ├── README.md ├── ionic-datepicker.html ├── ionic-datepicker.js ├── ionic-datepicker.scss ├── ionic-datepicker.ts └── package.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: ["https://www.paypal.me/rajeshwarpatlolla"] 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Rajeshwar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Ionic2 Datepicker 2 | ====================== 3 | #Under Development 4 | 5 | This is an ionic-datepicker component, which can be used in any Ionic v2 framework's applications. No additional plugins required, in order to use this component. This is an open source project. 6 | 7 | 8 | ##Prerequisites. 9 | 10 | * node, npm 11 | * ionic 12 | * gulp 13 | * type script 14 | 15 | ##How to use: 16 | 17 | 1) In your project folder, please install this plugin using npm 18 | 19 | `npm install ionic2-datepicker --save` 20 | 21 | This will install the latest version of this plugin and also it will save the plugin name in package.json, as we are using `--save`. If you wish to install any specific version then 22 | 23 | `npm install ionic2-datepicker#0.1.0 --save` 24 | 25 | 2) Specify the path of `ionic2-datepicker.bundle.js` in your `index.html` file. 26 | 27 | ````html 28 | 29 | 30 | ```` 31 | -------------------------------------------------------------------------------- /ionic-datepicker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ selectedDate | date: config.dateFormat }} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | Month 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | Year 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /ionic-datepicker.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var core_1 = require("@angular/core"); 9 | var IonicDatepicker = (function () { 10 | function IonicDatepicker(viewCtrl, params) { 11 | this.viewCtrl = viewCtrl; 12 | this.params = params; 13 | this.selectedDate = new Date(); 14 | var weeks = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; 15 | var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 16 | this.years = this.getYearsList(); 17 | this.rows = [0, 7, 14, 21, 28, 35]; 18 | this.cols = [0, 1, 2, 3, 4, 5, 6]; 19 | this.config = this.params.data.datepickerConfig || {}; 20 | this.config.inputDate = this.config.inputDate ? this.resetHMSM(new Date(this.config.inputDate)) : this.resetHMSM(new Date()); 21 | this.config.fromDate = this.config.fromDate ? this.resetHMSM(new Date(this.config.fromDate)) : null; 22 | this.config.toDate = this.config.toDate ? this.resetHMSM(new Date(this.config.toDate)) : null; 23 | this.config.disabledDates = this.config.disabledDates ? this.prepareDisabledDates(this.config.disabledDates) : []; 24 | this.config.setLabel = this.config.setLabel ? this.config.setLabel : 'Set'; 25 | this.config.todayLabel = this.config.todayLabel ? this.config.todayLabel : 'Today'; 26 | this.config.closeLabel = this.config.closeLabel ? this.config.closeLabel : 'Close'; 27 | this.config.mondayFirst = this.config.mondayFirst ? this.config.mondayFirst : false; 28 | this.config.weeksList = this.config.weeksList ? this.config.weeksList : weeks; 29 | this.config.monthsList = this.config.monthsList ? this.config.monthsList : months; 30 | this.config.dateFormat = this.config.dateFormat ? this.config.dateFormat : 'dd MMMM yyyy'; 31 | this.config.showTodayButton = this.config.showTodayButton ? this.config.showTodayButton : true; 32 | this.config.closeOnSelect = this.config.closeOnSelect ? this.config.closeOnSelect : false; 33 | this.today = this.resetHMSM(new Date()); 34 | var currentDate = this.resetHMSM(new Date(this.config.inputDate)); 35 | this.selectedMonth = this.config.monthsList[currentDate.getMonth()]; 36 | this.selectedYear = currentDate.getFullYear(); 37 | this.loadDaysList(currentDate); 38 | } 39 | IonicDatepicker.prototype.prepareDisabledDates = function (disbaledDates) { 40 | var _this = this; 41 | disbaledDates.forEach(function (disbaledDate, i) { 42 | disbaledDates[i] = _this.resetHMSM(new Date(disbaledDate)).getTime(); 43 | }); 44 | return disbaledDates; 45 | }; 46 | IonicDatepicker.prototype.resetHMSM = function (currentDate) { 47 | currentDate.setHours(0); 48 | currentDate.setMinutes(0); 49 | currentDate.setSeconds(0); 50 | currentDate.setMilliseconds(0); 51 | return currentDate; 52 | }; 53 | IonicDatepicker.prototype.getYearsList = function () { 54 | var yearsList = []; 55 | for (var year = 1900; year <= 2100; year++) { 56 | yearsList.push(year); 57 | } 58 | return yearsList; 59 | }; 60 | IonicDatepicker.prototype.loadDaysList = function (ipDate) { 61 | this.daysList = []; 62 | var firstDay = new Date(ipDate.getFullYear(), ipDate.getMonth(), 1).getDate(); 63 | var lastDay = new Date(ipDate.getFullYear(), ipDate.getMonth() + 1, 0).getDate(); 64 | for (var i = firstDay; i <= lastDay; i++) { 65 | var tempDate = new Date(ipDate.getFullYear(), ipDate.getMonth(), i); 66 | if (i === firstDay) { 67 | this.prevDisabled = tempDate.getTime() < this.config.fromDate.getTime(); 68 | } 69 | if (i === lastDay) { 70 | this.nextDisabled = tempDate.getTime() > this.config.toDate.getTime(); 71 | } 72 | var isEnabled = ((this.config.fromDate && this.config.toDate) ? (this.config.fromDate.getTime() <= tempDate.getTime() && this.config.toDate.getTime() >= tempDate.getTime()) : ((this.config.fromDate && !this.config.toDate) ? (this.config.fromDate.getTime() <= tempDate.getTime()) : this.config.toDate.getTime() >= tempDate.getTime())) && (this.config.disabledDates.indexOf(tempDate.getTime()) < 0); 73 | this.daysList.push({ 74 | date: tempDate.getDate(), 75 | month: tempDate.getMonth(), 76 | year: tempDate.getFullYear(), 77 | day: tempDate.getDay(), 78 | epoch: tempDate.getTime(), 79 | enabled: isEnabled 80 | }); 81 | } 82 | firstDay = this.daysList[0].day; 83 | for (var j = 0; j < firstDay; j++) { 84 | this.daysList.unshift({}); 85 | } 86 | }; 87 | IonicDatepicker.prototype.monthSelected = function (event, selectedMonth) { 88 | this.selectedMonth = selectedMonth; 89 | this.selectedDate.setMonth(this.config.monthsList.indexOf(this.selectedMonth)); 90 | this.selectedDate.setYear(this.selectedYear); 91 | this.loadDaysList(new Date(this.selectedDate)); 92 | }; 93 | IonicDatepicker.prototype.yearSelected = function (event, selectedYear) { 94 | this.selectedYear = selectedYear; 95 | this.selectedDate.setMonth(this.config.monthsList.indexOf(this.selectedMonth)); 96 | this.selectedDate.setYear(this.selectedYear); 97 | this.loadDaysList(new Date(this.selectedDate)); 98 | }; 99 | IonicDatepicker.prototype.dateClicked = function (dateObj) { 100 | this.selectedDate = new Date(dateObj.epoch); 101 | }; 102 | IonicDatepicker.prototype.prevMonth = function (dateObj) { 103 | var date = new Date(dateObj.epoch); 104 | date.setDate(date.getDate() - dateObj.date); 105 | this.selectedMonth = this.config.monthsList[date.getMonth()]; 106 | this.selectedYear = date.getFullYear(); 107 | this.loadDaysList(new Date(date)); 108 | }; 109 | IonicDatepicker.prototype.nextMonth = function (dateObj) { 110 | var date = new Date(dateObj.epoch); 111 | date.setDate(date.getDate() + 1); 112 | this.selectedMonth = this.config.monthsList[date.getMonth()]; 113 | this.selectedYear = date.getFullYear(); 114 | this.loadDaysList(new Date(date)); 115 | }; 116 | IonicDatepicker.prototype.setDate = function () { 117 | console.log(this.selectedDate); 118 | this.dismiss(); 119 | }; 120 | IonicDatepicker.prototype.setToday = function () { 121 | this.loadDaysList(this.today); 122 | this.selectedMonth = this.config.monthsList[this.today.getMonth()]; 123 | this.selectedYear = this.today.getFullYear(); 124 | this.selectedDate = this.resetHMSM(new Date()); 125 | }; 126 | IonicDatepicker.prototype.dismiss = function () { 127 | this.viewCtrl.dismiss(); 128 | }; 129 | return IonicDatepicker; 130 | }()); 131 | IonicDatepicker = __decorate([ 132 | core_1.Component({ 133 | styles: [ 134 | "\n .ionic_datepicker_modal_content {\n ion-row {\n padding: 4px;\n }\n ion-col {\n text-align: center;\n margin: auto;\n }\n .font_bold {\n font-weight: bold;\n } \n .label-md{\n display: none;\n }\n ion-select{\n max-width: 100%;\n width: 100%;\n }\n .select-md {\n padding: 5px;\n }\n .date_cell{\n padding: 5px;\n }\n .disabled{\n pointer-events: none;\n color: #aaa;\n }\n .today{\n border: 1px solid #387ef5;\n border-radius: 2px;\n color: #000;\n }\n .selected_date{\n color: #fff;\n font-weight: bold;\n border-radius: 2px;\n background-color: #387ef5;\n }\n }\n\n " 135 | ], 136 | template: "\n \n \n \n \n {{ selectedDate | date: config.dateFormat }}\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n Month\n \n \n \n \n \n \n \n Year\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n " 137 | }) 138 | ], IonicDatepicker); 139 | exports.IonicDatepicker = IonicDatepicker; -------------------------------------------------------------------------------- /ionic-datepicker.scss: -------------------------------------------------------------------------------- 1 | .ionic_datepicker_modal_content { 2 | ion-row { 3 | padding: 4px; 4 | } 5 | ion-col { 6 | text-align: center; 7 | margin: auto; 8 | } 9 | .font_bold { 10 | font-weight: bold; 11 | } 12 | .label-md{ 13 | display: none; 14 | } 15 | ion-select{ 16 | max-width: 100%; 17 | width: 100%; 18 | } 19 | .select-md { 20 | padding: 5px; 21 | } 22 | .date_cell{ 23 | padding: 5px; 24 | } 25 | .disabled{ 26 | pointer-events: none; 27 | color: #aaa; 28 | } 29 | .today{ 30 | border: 1px solid #387ef5; 31 | border-radius: 2px; 32 | color: #000; 33 | } 34 | .selected_date{ 35 | color: #fff; 36 | font-weight: bold; 37 | border-radius: 2px; 38 | background-color: #387ef5; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /ionic-datepicker.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ViewController, NavParams } from 'ionic-angular'; 3 | 4 | @Component({ 5 | styles:[ 6 | ` 7 | .ionic_datepicker_modal_content { 8 | ion-row { 9 | padding: 4px; 10 | } 11 | ion-col { 12 | text-align: center; 13 | margin: auto; 14 | } 15 | .font_bold { 16 | font-weight: bold; 17 | } 18 | .label-md{ 19 | display: none; 20 | } 21 | ion-select{ 22 | max-width: 100%; 23 | width: 100%; 24 | } 25 | .select-md { 26 | padding: 5px; 27 | } 28 | .date_cell{ 29 | padding: 5px; 30 | } 31 | .disabled{ 32 | pointer-events: none; 33 | color: #aaa; 34 | } 35 | .today{ 36 | border: 1px solid #387ef5; 37 | border-radius: 2px; 38 | color: #000; 39 | } 40 | .selected_date{ 41 | color: #fff; 42 | font-weight: bold; 43 | border-radius: 2px; 44 | background-color: #387ef5; 45 | } 46 | } 47 | ` 48 | ], 49 | template: ` 50 | 51 | 52 | 53 | 54 | {{ selectedDate | date: config.dateFormat }} 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 69 | 70 | 71 | 72 | Month 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | Year 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | ` 117 | }) 118 | export class IonicDatepicker { 119 | weeks; 120 | months; 121 | years; 122 | daysList; 123 | rows; 124 | cols; 125 | firstDay; 126 | selectedDate; 127 | selectedMonth; 128 | selectedYear; 129 | today; 130 | config; 131 | prevDisabled; 132 | nextDisabled; 133 | 134 | constructor(public viewCtrl: ViewController, public params: NavParams) { 135 | this.selectedDate = new Date(); 136 | let weeks = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; 137 | let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 138 | this.years = this.getYearsList(); 139 | this.rows = [0, 7, 14, 21, 28, 35]; 140 | this.cols = [0, 1, 2, 3, 4, 5, 6]; 141 | 142 | this.config = this.params.data.datepickerConfig || {}; 143 | this.config.inputDate = this.config.inputDate ? this.resetHMSM(new Date(this.config.inputDate)) : this.resetHMSM(new Date()); 144 | this.config.fromDate = this.config.fromDate ? this.resetHMSM(new Date(this.config.fromDate)) : null; 145 | this.config.toDate = this.config.toDate ? this.resetHMSM(new Date(this.config.toDate)) : null; 146 | this.config.disabledDates = this.config.disabledDates ? this.prepareDisabledDates(this.config.disabledDates) : []; 147 | this.config.setLabel = this.config.setLabel ? this.config.setLabel : 'Set'; 148 | this.config.todayLabel = this.config.todayLabel ? this.config.todayLabel : 'Today'; 149 | this.config.closeLabel = this.config.closeLabel ? this.config.closeLabel : 'Close'; 150 | this.config.mondayFirst = this.config.mondayFirst ? this.config.mondayFirst : false; 151 | this.config.weeksList = this.config.weeksList ? this.config.weeksList : weeks; 152 | this.config.monthsList = this.config.monthsList ? this.config.monthsList : months; 153 | this.config.dateFormat = this.config.dateFormat ? this.config.dateFormat : 'dd MMMM yyyy'; 154 | this.config.showTodayButton = this.config.showTodayButton ? this.config.showTodayButton : true; 155 | this.config.closeOnSelect = this.config.closeOnSelect ? this.config.closeOnSelect : false; 156 | this.today = this.resetHMSM(new Date()); 157 | let currentDate = this.resetHMSM(new Date(this.config.inputDate)); 158 | this.selectedMonth = this.config.monthsList[currentDate.getMonth()]; 159 | this.selectedYear = currentDate.getFullYear(); 160 | this.loadDaysList(currentDate); 161 | } 162 | 163 | prepareDisabledDates(disbaledDates) { 164 | disbaledDates.forEach((disbaledDate,i )=> { 165 | disbaledDates[i] = this.resetHMSM(new Date(disbaledDate)).getTime(); 166 | }); 167 | return disbaledDates; 168 | } 169 | 170 | resetHMSM(currentDate) { 171 | currentDate.setHours(0); 172 | currentDate.setMinutes(0); 173 | currentDate.setSeconds(0); 174 | currentDate.setMilliseconds(0); 175 | return currentDate; 176 | } 177 | 178 | getYearsList() { 179 | let yearsList = []; 180 | for (let year = 1900; year <= 2100; year++) { 181 | yearsList.push(year); 182 | } 183 | return yearsList; 184 | } 185 | 186 | loadDaysList(ipDate) { 187 | this.daysList = []; 188 | let firstDay = new Date(ipDate.getFullYear(), ipDate.getMonth(), 1).getDate(); 189 | let lastDay = new Date(ipDate.getFullYear(), ipDate.getMonth() + 1, 0).getDate(); 190 | 191 | for (let i = firstDay; i <= lastDay; i++) { 192 | let tempDate = new Date(ipDate.getFullYear(), ipDate.getMonth(), i); 193 | if (i === firstDay) { 194 | this.prevDisabled = tempDate.getTime() < this.config.fromDate.getTime(); 195 | } 196 | if (i === lastDay) { 197 | this.nextDisabled = tempDate.getTime() > this.config.toDate.getTime(); 198 | } 199 | 200 | let isEnabled = ((this.config.fromDate && this.config.toDate) ? (this.config.fromDate.getTime() <= tempDate.getTime() && this.config.toDate.getTime() >= tempDate.getTime()) : ((this.config.fromDate && !this.config.toDate) ? (this.config.fromDate.getTime() <= tempDate.getTime()) : this.config.toDate.getTime() >= tempDate.getTime())) && (this.config.disabledDates.indexOf(tempDate.getTime()) < 0); 201 | 202 | this.daysList.push({ 203 | date: tempDate.getDate(), 204 | month: tempDate.getMonth(), 205 | year: tempDate.getFullYear(), 206 | day: tempDate.getDay(), 207 | epoch: tempDate.getTime(), 208 | enabled: isEnabled 209 | }); 210 | } 211 | 212 | firstDay = this.daysList[0].day; 213 | 214 | for (let j = 0; j < firstDay; j++) { 215 | this.daysList.unshift({}); 216 | } 217 | } 218 | 219 | monthSelected(event, selectedMonth) { 220 | this.selectedMonth = selectedMonth; 221 | this.selectedDate.setMonth(this.config.monthsList.indexOf(this.selectedMonth)); 222 | this.selectedDate.setYear(this.selectedYear); 223 | this.loadDaysList(new Date(this.selectedDate)); 224 | } 225 | 226 | yearSelected(event, selectedYear) { 227 | this.selectedYear = selectedYear; 228 | this.selectedDate.setMonth(this.config.monthsList.indexOf(this.selectedMonth)); 229 | this.selectedDate.setYear(this.selectedYear); 230 | this.loadDaysList(new Date(this.selectedDate)); 231 | } 232 | 233 | dateClicked(dateObj) { 234 | this.selectedDate = new Date(dateObj.epoch); 235 | } 236 | 237 | prevMonth(dateObj) { 238 | let date = new Date(dateObj.epoch); 239 | date.setDate(date.getDate() - dateObj.date); 240 | this.selectedMonth = this.config.monthsList[date.getMonth()]; 241 | this.selectedYear = date.getFullYear(); 242 | this.loadDaysList(new Date(date)); 243 | } 244 | 245 | nextMonth(dateObj) { 246 | let date = new Date(dateObj.epoch); 247 | date.setDate(date.getDate() + 1); 248 | this.selectedMonth = this.config.monthsList[date.getMonth()]; 249 | this.selectedYear = date.getFullYear(); 250 | this.loadDaysList(new Date(date)); 251 | } 252 | 253 | setDate() { 254 | console.log(this.selectedDate); 255 | this.dismiss(); 256 | } 257 | 258 | setToday() { 259 | this.loadDaysList(this.today); 260 | this.selectedMonth = this.config.monthsList[this.today.getMonth()]; 261 | this.selectedYear = this.today.getFullYear(); 262 | this.selectedDate = this.resetHMSM(new Date()); 263 | } 264 | 265 | dismiss() { 266 | this.viewCtrl.dismiss(); 267 | } 268 | 269 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic2-datepicker", 3 | "version": "0.1.0", 4 | "description": "A datepicker for ionic v2", 5 | "main": "ionic-datepicker.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | --------------------------------------------------------------------------------