├── .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 |
--------------------------------------------------------------------------------