├── .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 | <!-- path to ionic -->
29 | <script src="node_modules/ionic2-datepicker/dist/ionic2-datepicker.min.js"></script>
30 | ````
31 | 


--------------------------------------------------------------------------------
/ionic-datepicker.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 | 	<ion-toolbar>
 3 | 		<ion-title>
 4 | 			<!-- <span [innerHTML]="selectedDate"></span> -->
 5 | 			{{ selectedDate | date: config.dateFormat }}
 6 | 		</ion-title>
 7 | 	</ion-toolbar>
 8 | </ion-header>
 9 | 
10 | <ion-content class="ionic_datepicker_modal_content">
11 | 	<ion-list>
12 | 		<ion-grid>
13 | 			<ion-row class="center">
14 | 				<ion-col width-10 (click)="prevMonth(daysList[daysList.length - 1])" [ngClass]="{disabled: (prevDisabled)}">
15 | 					<ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
16 | 				</ion-col>
17 | 				<ion-col width-80>
18 | 					<!--<span [innerHTML]="months[daysList[daysList.length - 1].month]"></span>
19 |           <span> - </span>
20 |           <span [innerHTML]="daysList[daysList.length - 1].year"></span>-->
21 | 					<ion-row class="center">
22 | 						<ion-col width-50>
23 | 							<ion-item>
24 | 								<ion-label>Month</ion-label>
25 | 								<ion-select [(ngModel)]="selectedMonth" (ionChange)="monthSelected($event,selectedMonth)">
26 | 									<ion-option [value]="month" *ngFor="let month of config.monthsList" [innerHTML]="month"></ion-option>
27 | 								</ion-select>
28 | 							</ion-item>
29 | 						</ion-col>
30 | 						<ion-col width-50>
31 | 							<ion-item>
32 | 								<ion-label>Year</ion-label>
33 | 								<ion-select [(ngModel)]="selectedYear" (ionChange)="yearSelected($event,selectedYear)">
34 | 									<ion-option [value]="year" *ngFor="let year of years" [innerHTML]="year"></ion-option>
35 | 								</ion-select>
36 | 							</ion-item>
37 | 						</ion-col>
38 | 					</ion-row>
39 | 				</ion-col>
40 | 				<ion-col width-10 (click)="nextMonth(daysList[daysList.length - 1])" [ngClass]="{disabled: (nextDisabled)}">
41 | 					<ion-icon ios="ios-arrow-forward" md="md-arrow-forward"></ion-icon>
42 | 				</ion-col>
43 | 			</ion-row>
44 | 			<ion-row class="center">
45 | 				<ion-col width-10 *ngFor="let week of config.weeksList" [innerHTML]="week" class="font_bold"></ion-col>
46 | 			</ion-row>
47 | 			<ion-row class="center" *ngFor="let row of rows">
48 | 				<ion-col width-10 *ngFor="let col of cols">
49 | 					<span *ngIf="daysList[row + col]" class="date_cell" [innerHTML]="daysList[row + col].date" (click)="dateClicked(daysList[row + col])" [ngClass]="{today: (today.getTime() == daysList[row + col].epoch), selected_date: (selectedDate.getTime() == daysList[row + col].epoch), disabled: (!daysList[row + col].enabled)}"></span>
50 | 				</ion-col>
51 | 			</ion-row>
52 | 		</ion-grid>
53 | 	</ion-list>
54 | </ion-content>
55 | <ion-footer>
56 | 	<ion-toolbar>
57 | 		<ion-buttons start (click)="setDate()">
58 | 			<button ion-button color="royal" [innerHTML]="config.setLabel"></button>
59 | 		</ion-buttons>
60 | 		<ion-buttons center (click)="setToday()">
61 | 			<button ion-button color="royal" [innerHTML]="config.todayLabel"></button>
62 | 		</ion-buttons>
63 | 		<ion-buttons end (click)="dismiss()">
64 | 			<button ion-button color="royal" [innerHTML]="config.closeLabel"></button>
65 | 		</ion-buttons>
66 | 	</ion-toolbar>
67 | </ion-footer>


--------------------------------------------------------------------------------
/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    <ion-header>\n      <ion-toolbar>\n        <ion-title>\n          <!-- <span [innerHTML]=\"selectedDate\"></span> -->\n          {{ selectedDate | date: config.dateFormat }}\n        </ion-title>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ionic_datepicker_modal_content\">\n      <ion-list>\n        <ion-grid>\n          <ion-row class=\"center\">\n            <ion-col width-10 (click)=\"prevMonth(daysList[daysList.length - 1])\" [ngClass]=\"{disabled: (prevDisabled)}\">\n              <ion-icon ios=\"ios-arrow-back\" md=\"md-arrow-back\"></ion-icon>\n            </ion-col>\n            <ion-col width-80>\n              <!--<span [innerHTML]=\"months[daysList[daysList.length - 1].month]\"></span>\n              <span> - </span>\n              <span [innerHTML]=\"daysList[daysList.length - 1].year\"></span>-->\n              <ion-row class=\"center\">\n                <ion-col width-50>\n                  <ion-item>\n                    <ion-label>Month</ion-label>\n                    <ion-select [(ngModel)]=\"selectedMonth\" (ionChange)=\"monthSelected($event,selectedMonth)\">\n                      <ion-option [value]=\"month\" *ngFor=\"let month of config.monthsList\" [innerHTML]=\"month\"></ion-option>\n                    </ion-select>\n                  </ion-item>\n                </ion-col>\n                <ion-col width-50>\n                  <ion-item>\n                    <ion-label>Year</ion-label>\n                    <ion-select [(ngModel)]=\"selectedYear\" (ionChange)=\"yearSelected($event,selectedYear)\">\n                      <ion-option [value]=\"year\" *ngFor=\"let year of years\" [innerHTML]=\"year\"></ion-option>\n                    </ion-select>\n                  </ion-item>\n                </ion-col>\n              </ion-row>\n            </ion-col>\n            <ion-col width-10 (click)=\"nextMonth(daysList[daysList.length - 1])\" [ngClass]=\"{disabled: (nextDisabled)}\">\n              <ion-icon ios=\"ios-arrow-forward\" md=\"md-arrow-forward\"></ion-icon>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"center\">\n            <ion-col width-10 *ngFor=\"let week of config.weeksList\" [innerHTML]=\"week\" class=\"font_bold\"></ion-col>\n          </ion-row>\n          <ion-row class=\"center\" *ngFor=\"let row of rows\">\n            <ion-col width-10 *ngFor=\"let col of cols\">\n              <span *ngIf=\"daysList[row + col]\" class=\"date_cell\" [innerHTML]=\"daysList[row + col].date\" (click)=\"dateClicked(daysList[row + col])\" [ngClass]=\"{today: (today.getTime() == daysList[row + col].epoch), selected_date: (selectedDate.getTime() == daysList[row + col].epoch), disabled: (!daysList[row + col].enabled)}\"></span>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-list>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n        <ion-buttons start (click)=\"setDate()\">\n          <button ion-button color=\"royal\" [innerHTML]=\"config.setLabel\"></button>\n        </ion-buttons>\n        <ion-buttons center (click)=\"setToday()\">\n          <button ion-button color=\"royal\" [innerHTML]=\"config.todayLabel\"></button>\n        </ion-buttons>\n        <ion-buttons end (click)=\"dismiss()\">\n          <button ion-button color=\"royal\" [innerHTML]=\"config.closeLabel\"></button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\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 |     <ion-header>
 51 |       <ion-toolbar>
 52 |         <ion-title>
 53 |           <!-- <span [innerHTML]="selectedDate"></span> -->
 54 |           {{ selectedDate | date: config.dateFormat }}
 55 |         </ion-title>
 56 |       </ion-toolbar>
 57 |     </ion-header>
 58 |     <ion-content class="ionic_datepicker_modal_content">
 59 |       <ion-list>
 60 |         <ion-grid>
 61 |           <ion-row class="center">
 62 |             <ion-col width-10 (click)="prevMonth(daysList[daysList.length - 1])" [ngClass]="{disabled: (prevDisabled)}">
 63 |               <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
 64 |             </ion-col>
 65 |             <ion-col width-80>
 66 |               <!--<span [innerHTML]="months[daysList[daysList.length - 1].month]"></span>
 67 |               <span> - </span>
 68 |               <span [innerHTML]="daysList[daysList.length - 1].year"></span>-->
 69 |               <ion-row class="center">
 70 |                 <ion-col width-50>
 71 |                   <ion-item>
 72 |                     <ion-label>Month</ion-label>
 73 |                     <ion-select [(ngModel)]="selectedMonth" (ionChange)="monthSelected($event,selectedMonth)">
 74 |                       <ion-option [value]="month" *ngFor="let month of config.monthsList" [innerHTML]="month"></ion-option>
 75 |                     </ion-select>
 76 |                   </ion-item>
 77 |                 </ion-col>
 78 |                 <ion-col width-50>
 79 |                   <ion-item>
 80 |                     <ion-label>Year</ion-label>
 81 |                     <ion-select [(ngModel)]="selectedYear" (ionChange)="yearSelected($event,selectedYear)">
 82 |                       <ion-option [value]="year" *ngFor="let year of years" [innerHTML]="year"></ion-option>
 83 |                     </ion-select>
 84 |                   </ion-item>
 85 |                 </ion-col>
 86 |               </ion-row>
 87 |             </ion-col>
 88 |             <ion-col width-10 (click)="nextMonth(daysList[daysList.length - 1])" [ngClass]="{disabled: (nextDisabled)}">
 89 |               <ion-icon ios="ios-arrow-forward" md="md-arrow-forward"></ion-icon>
 90 |             </ion-col>
 91 |           </ion-row>
 92 |           <ion-row class="center">
 93 |             <ion-col width-10 *ngFor="let week of config.weeksList" [innerHTML]="week" class="font_bold"></ion-col>
 94 |           </ion-row>
 95 |           <ion-row class="center" *ngFor="let row of rows">
 96 |             <ion-col width-10 *ngFor="let col of cols">
 97 |               <span *ngIf="daysList[row + col]" class="date_cell" [innerHTML]="daysList[row + col].date" (click)="dateClicked(daysList[row + col])" [ngClass]="{today: (today.getTime() == daysList[row + col].epoch), selected_date: (selectedDate.getTime() == daysList[row + col].epoch), disabled: (!daysList[row + col].enabled)}"></span>
 98 |             </ion-col>
 99 |           </ion-row>
100 |         </ion-grid>
101 |       </ion-list>
102 |     </ion-content>
103 |     <ion-footer>
104 |       <ion-toolbar>
105 |         <ion-buttons start (click)="setDate()">
106 |           <button ion-button color="royal" [innerHTML]="config.setLabel"></button>
107 |         </ion-buttons>
108 |         <ion-buttons center (click)="setToday()">
109 |           <button ion-button color="royal" [innerHTML]="config.todayLabel"></button>
110 |         </ion-buttons>
111 |         <ion-buttons end (click)="dismiss()">
112 |           <button ion-button color="royal" [innerHTML]="config.closeLabel"></button>
113 |         </ion-buttons>
114 |       </ion-toolbar>
115 |     </ion-footer>
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 | 


--------------------------------------------------------------------------------