├── index.ts ├── index.d.ts ├── calendar.png ├── index.js ├── index.js.map ├── src └── calendar │ ├── calendar.module.ts │ ├── calendar.module.js.map │ ├── calendar.html │ ├── calendar.scss │ ├── calendar.module.js │ ├── calendar.js.map │ ├── calendar.ts │ └── calendar.js ├── .gitignore ├── tsconfig.json ├── package.json └── README.md /index.ts: -------------------------------------------------------------------------------- 1 | export { CalendarModule } from './src/calendar/calendar.module'; -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | export { CalendarModule } from './src/calendar/calendar.module'; -------------------------------------------------------------------------------- /calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/laker007/ionic3-calendar/HEAD/calendar.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export { CalendarModule } from './src/calendar/calendar.module'; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC"} -------------------------------------------------------------------------------- /src/calendar/calendar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicModule } from 'ionic-angular'; 3 | import { Calendar } from './calendar'; 4 | @NgModule({ 5 | declarations: [ 6 | Calendar, 7 | ], 8 | imports: [ 9 | IonicModule, 10 | ], 11 | exports: [ 12 | Calendar 13 | ] 14 | }) 15 | export class CalendarModule { } -------------------------------------------------------------------------------- /src/calendar/calendar.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"calendar.module.js","sourceRoot":"","sources":["calendar.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC,IAAa,cAAc;IAA3B;IAA8B,CAAC;IAAD,qBAAC;AAAD,CAAC,AAA/B,IAA+B;AAAlB,cAAc;IAX1B,QAAQ,CAAC;QACR,YAAY,EAAE;YACZ,QAAQ;SACT;QACD,OAAO,EAAE;YACP,WAAW;SACZ;QACD,OAAO,EAAE;YACP,QAAQ;SACT;KACF,CAAC;GACW,cAAc,CAAI;SAAlB,cAAc"} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "module": "es2015", 12 | "moduleResolution": "node", 13 | "sourceMap": true, 14 | "target": "es5" 15 | }, 16 | "include": [ 17 | "src/**/*.ts", 18 | "index.ts" 19 | ], 20 | "exclude": [ 21 | "node_modules" 22 | ], 23 | "compileOnSave": false, 24 | "atom": { 25 | "rewriteTsconfig": false 26 | } 27 | } -------------------------------------------------------------------------------- /src/calendar/calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
{{displayYear}} 年 {{displayMonth + 1}} 月
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{head}} 16 | 17 | 18 | 19 | 20 | {{day.date}} 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/calendar/calendar.scss: -------------------------------------------------------------------------------- 1 | ion-calendar { 2 | font-family: "Microsoft YaHei"; 3 | .center { 4 | text-align: center; 5 | } 6 | .calendar-header-col { 7 | font-size: 1rem; 8 | color: #666; 9 | } 10 | .calendar-row { 11 | &:last-child { 12 | border-bottom: 1px solid #eee; 13 | } 14 | .calendar-col { 15 | display: flex; 16 | justify-content: center; 17 | padding: 0.8rem; 18 | font-size: 1.2rem; 19 | border-left: 1px solid #eee; 20 | border-top: 1px solid #eee; 21 | &:last-child { 22 | border-right: 1px solid #eee; 23 | } 24 | } 25 | .not-this-month { 26 | color: #fff; 27 | background: linear-gradient(#e5e5e5, #dfdfdf); 28 | } 29 | .today { 30 | color: #fff; 31 | box-shadow: inset 0 0 10px #aaa; 32 | background: radial-gradient(#c5c5c5, #c8c8c8, #ccc); 33 | } 34 | .select { 35 | box-shadow: none; 36 | color: #fff; 37 | background: radial-gradient(#5c7eda, #5e89ec, #5e89ec); 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic3-calendar", 3 | "version": "1.1.6", 4 | "description": "Calendar Component For Ionic", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/laker007/ionic3-calendar.git" 12 | }, 13 | "author": "laker007", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/laker007/ionic3-calendar/issues" 17 | }, 18 | "homepage": "https://github.com/laker007/ionic3-calendar#readme", 19 | "dependencies": { 20 | "@angular/common": "4.1.3", 21 | "@angular/compiler": "4.1.3", 22 | "@angular/compiler-cli": "4.1.3", 23 | "@angular/core": "4.1.3", 24 | "@angular/forms": "4.1.3", 25 | "@angular/http": "4.1.3", 26 | "@angular/platform-browser": "4.1.3", 27 | "@angular/platform-browser-dynamic": "4.1.3", 28 | "ionic-angular": "3.5.0", 29 | "rxjs": "5.4.0", 30 | "zone.js": "0.8.12", 31 | "lodash": "^4.17.4", 32 | "moment": "^2.18.1" 33 | }, 34 | "devDependencies": { 35 | "typescript": "2.3.4" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/calendar/calendar.module.js: -------------------------------------------------------------------------------- 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 4 | 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; 5 | return c > 3 && r && Object.defineProperty(target, key, r), r; 6 | }; 7 | import { NgModule } from '@angular/core'; 8 | import { IonicModule } from 'ionic-angular'; 9 | import { Calendar } from './calendar'; 10 | var CalendarModule = (function () { 11 | function CalendarModule() { 12 | } 13 | return CalendarModule; 14 | }()); 15 | CalendarModule = __decorate([ 16 | NgModule({ 17 | declarations: [ 18 | Calendar, 19 | ], 20 | imports: [ 21 | IonicModule, 22 | ], 23 | exports: [ 24 | Calendar 25 | ] 26 | }) 27 | ], CalendarModule); 28 | export { CalendarModule }; 29 | //# sourceMappingURL=calendar.module.js.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ionic3-calendar 2 | 3 | ![image](https://github.com/laker007/ionic3-calendar/blob/master/calendar.png?raw=true)" 4 | 5 | ## Using 6 | 7 | - npm install ionic3-calendar --save (in ionic project folder) 8 | - in app.module.ts 9 | 10 | ``` javascript 11 | import { CalendarModule } from 'ionic3-calendar'; 12 | 13 | @NgModule({ 14 | ... 15 | imports: [ 16 | ... 17 | CalendarModule, 18 | ... 19 | ] 20 | ... 21 | }) 22 | ``` 23 | 24 | - Push component to anywhere you want to display it 25 | 26 | `` 27 | 28 | - Go Today 29 | 30 | `` 31 | 32 | - Click The Day And Get The Day 33 | 34 | `` 35 | 36 | - In The End 37 | 38 | Restart Ionic Serve 39 | 40 | ## Update 41 | 42 | - 31st July 2017 43 | 44 | Update README FILE 45 | 46 | - 29th July 2017: 47 | 48 | Fix Bug: 49 | The Right Way To Get The Day: 50 | 51 | `` 52 | 53 | Sorry for my mistake. 54 | 55 | - 28th July 2017: Thanks For Smartisan Designer-[Here is the link](https://dribbble.com/smartisan_design) -------------------------------------------------------------------------------- /src/calendar/calendar.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"calendar.js","sourceRoot":"","sources":["calendar.ts"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /src/calendar/calendar.ts: -------------------------------------------------------------------------------- 1 | import { Component, Output, EventEmitter } from '@angular/core'; 2 | import * as moment from 'moment'; 3 | import * as _ from "lodash"; 4 | 5 | @Component({ 6 | selector: 'ion-calendar', 7 | template: ` 8 | 9 | 10 | 11 | 12 | 13 | 14 |
{{displayYear}} 年 {{displayMonth + 1}} 月
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | {{head}} 23 | 24 | 25 | 26 | 29 | {{day.date}} 30 | 31 | 32 | 33 | 34 | ` 35 | }) 36 | 37 | export class Calendar { 38 | 39 | @Output() onDaySelect = new EventEmitter(); 40 | 41 | currentYear: number; 42 | 43 | currentMonth: number; 44 | 45 | currentDate: number; 46 | 47 | currentDay: number; 48 | 49 | displayYear: number; 50 | 51 | displayMonth: number; 52 | 53 | dateArray: Array = []; // 本月展示的所有天的数组 54 | 55 | weekArray = [];// 保存日历每行的数组 56 | 57 | lastSelect: number = 0; // 记录上次点击的位置 58 | 59 | // weekHead: string[] = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; 60 | weekHead: string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 61 | 62 | 63 | constructor() { 64 | this.currentYear = moment().year(); 65 | this.currentMonth = moment().month(); 66 | this.currentDate = moment().date(); 67 | this.currentDay = moment().day(); 68 | } 69 | 70 | ngOnInit() { 71 | this.today() 72 | } 73 | 74 | // 跳转至今天 75 | today() { 76 | this.displayYear = this.currentYear; 77 | this.displayMonth = this.currentMonth; 78 | this.createMonth(this.currentYear, this.currentMonth); 79 | 80 | // 将今天标记为选择状态 81 | let todayIndex = _.findIndex(this.dateArray, { 82 | year: this.currentYear, 83 | month: this.currentMonth, 84 | date: this.currentDate, 85 | isThisMonth: true 86 | }) 87 | this.lastSelect = todayIndex; 88 | this.dateArray[todayIndex].isSelect = true; 89 | 90 | this.onDaySelect.emit(this.dateArray[todayIndex]); 91 | } 92 | 93 | createMonth(year: number, month: number) { 94 | this.dateArray = [];// 清除上个月的数据 95 | this.weekArray = [];// 清除数据 96 | let firstDay;//当前选择月份的 1 号星期几,决定了上个月取出几天出来。星期日不用显示上个月，星期一显示上个月一天，星期二显示上个月两天 97 | let preMonthDays;// 上个月的天数 98 | let monthDays;// 当月的天数 99 | let weekDays: Array = []; 100 | 101 | firstDay = moment({ year: year, month: month, date: 1 }).day(); 102 | // 上个月天数 103 | if (month === 0) { 104 | preMonthDays = moment({ year: year - 1, month: 11 }).daysInMonth(); 105 | } else { 106 | preMonthDays = moment({ year: year, month: month - 1 }).daysInMonth(); 107 | } 108 | // 本月天数 109 | monthDays = moment({ year: year, month: month }).daysInMonth(); 110 | 111 | // 将上个月的最后几天添加入数组 112 | if (firstDay !== 7) { //星期日不用显示上个月 113 | let lastMonthStart = preMonthDays - firstDay + 1;// 从上个月几号开始 114 | for (let i = 0; i < firstDay; i++) { 115 | if (month === 0) { 116 | this.dateArray.push({ 117 | year: year, 118 | month: 11, 119 | date: lastMonthStart + i, 120 | isThisMonth: false, 121 | isToday: false, 122 | isSelect: false, 123 | }) 124 | } else { 125 | this.dateArray.push({ 126 | year: year, 127 | month: month - 1, 128 | date: lastMonthStart + i, 129 | isThisMonth: false, 130 | isToday: false, 131 | isSelect: false, 132 | }) 133 | } 134 | 135 | } 136 | } 137 | 138 | // 将本月天数添加到数组中 139 | for (let i = 0; i < monthDays; i++) { 140 | this.dateArray.push({ 141 | year: year, 142 | month: month, 143 | date: i + 1, 144 | isThisMonth: true, 145 | isToday: false, 146 | isSelect: false, 147 | }) 148 | } 149 | 150 | if (this.currentYear === year && this.currentMonth === month) { 151 | let todayIndex = _.findIndex(this.dateArray, { 152 | year: this.currentYear, 153 | month: this.currentMonth, 154 | date: this.currentDate, 155 | isThisMonth: true 156 | }) 157 | this.dateArray[todayIndex].isToday = true; 158 | } 159 | 160 | // 将下个月天数添加到数组中，有些月份显示 6 周，有些月份显示 5 周 161 | if (this.dateArray.length % 7 !== 0) { 162 | let nextMonthAdd = 7 - this.dateArray.length % 7 163 | for (let i = 0; i < nextMonthAdd; i++) { 164 | if (month === 11) { 165 | this.dateArray.push({ 166 | year: year, 167 | month: 0, 168 | date: i + 1, 169 | isThisMonth: false, 170 | isToday: false, 171 | isSelect: false, 172 | }) 173 | } else { 174 | this.dateArray.push({ 175 | year: year, 176 | month: month + 1, 177 | date: i + 1, 178 | isThisMonth: false, 179 | isToday: false, 180 | isSelect: false, 181 | }) 182 | } 183 | 184 | } 185 | } 186 | 187 | // 至此所有日期数据都被添加入 dateArray 数组中 188 | 189 | // 将日期数据按照每 7 天插入新的数组中 190 | for (let i = 0; i < this.dateArray.length / 7; i++) { 191 | for (let j = 0; j < 7; j++) { 192 | weekDays.push(this.dateArray[i * 7 + j]); 193 | } 194 | this.weekArray.push(weekDays); 195 | weekDays = []; 196 | } 197 | } 198 | 199 | back() { 200 | // 处理跨年的问题 201 | if (this.displayMonth === 0) { 202 | this.displayYear--; 203 | this.displayMonth = 11; 204 | } else { 205 | this.displayMonth--; 206 | } 207 | this.createMonth(this.displayYear, this.displayMonth); 208 | } 209 | 210 | forward() { 211 | // 处理跨年的问题 212 | if (this.displayMonth === 11) { 213 | this.displayYear++; 214 | this.displayMonth = 0; 215 | } else { 216 | this.displayMonth++; 217 | } 218 | this.createMonth(this.displayYear, this.displayMonth); 219 | } 220 | 221 | // 选择某日期，点击事件 222 | daySelect(day, i, j) { 223 | // 首先将上次点击的状态清除 224 | this.dateArray[this.lastSelect].isSelect = false; 225 | // 保存本次点击的项 226 | this.lastSelect = i * 7 + j; 227 | this.dateArray[i * 7 + j].isSelect = true; 228 | 229 | this.onDaySelect.emit(day); 230 | } 231 | } 232 | 233 | // 日历的每个格子 234 | interface dateObj { 235 | year: number, 236 | month: number, 237 | date: number,//几号 238 | isThisMonth: boolean,//是否为当前选择的月份 239 | isToday?: boolean, 240 | isSelect?: boolean, 241 | } -------------------------------------------------------------------------------- /src/calendar/calendar.js: -------------------------------------------------------------------------------- 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 4 | 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; 5 | return c > 3 && r && Object.defineProperty(target, key, r), r; 6 | }; 7 | var __metadata = (this && this.__metadata) || function (k, v) { 8 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 9 | }; 10 | import { Component, Output, EventEmitter } from '@angular/core'; 11 | import * as moment from 'moment'; 12 | import * as _ from "lodash"; 13 | var Calendar = (function () { 14 | function Calendar() { 15 | this.onDaySelect = new EventEmitter(); 16 | this.dateArray = []; // 本月展示的所有天的数组 17 | this.weekArray = []; // 保存日历每行的数组 18 | this.lastSelect = 0; // 记录上次点击的位置 19 | // weekHead: string[] = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; 20 | this.weekHead = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 21 | this.currentYear = moment().year(); 22 | this.currentMonth = moment().month(); 23 | this.currentDate = moment().date(); 24 | this.currentDay = moment().day(); 25 | } 26 | Calendar.prototype.ngOnInit = function () { 27 | this.today(); 28 | }; 29 | // 跳转至今天 30 | Calendar.prototype.today = function () { 31 | this.displayYear = this.currentYear; 32 | this.displayMonth = this.currentMonth; 33 | this.createMonth(this.currentYear, this.currentMonth); 34 | // 将今天标记为选择状态 35 | var todayIndex = _.findIndex(this.dateArray, { 36 | year: this.currentYear, 37 | month: this.currentMonth, 38 | date: this.currentDate, 39 | isThisMonth: true 40 | }); 41 | this.lastSelect = todayIndex; 42 | this.dateArray[todayIndex].isSelect = true; 43 | this.onDaySelect.emit(this.dateArray[todayIndex]); 44 | }; 45 | Calendar.prototype.createMonth = function (year, month) { 46 | this.dateArray = []; // 清除上个月的数据 47 | this.weekArray = []; // 清除数据 48 | var firstDay; //当前选择月份的 1 号星期几,决定了上个月取出几天出来。星期日不用显示上个月，星期一显示上个月一天，星期二显示上个月两天 49 | var preMonthDays; // 上个月的天数 50 | var monthDays; // 当月的天数 51 | var weekDays = []; 52 | firstDay = moment({ year: year, month: month, date: 1 }).day(); 53 | // 上个月天数 54 | if (month === 0) { 55 | preMonthDays = moment({ year: year - 1, month: 11 }).daysInMonth(); 56 | } 57 | else { 58 | preMonthDays = moment({ year: year, month: month - 1 }).daysInMonth(); 59 | } 60 | // 本月天数 61 | monthDays = moment({ year: year, month: month }).daysInMonth(); 62 | // 将上个月的最后几天添加入数组 63 | if (firstDay !== 7) { 64 | var lastMonthStart = preMonthDays - firstDay + 1; // 从上个月几号开始 65 | for (var i = 0; i < firstDay; i++) { 66 | if (month === 0) { 67 | this.dateArray.push({ 68 | year: year, 69 | month: 11, 70 | date: lastMonthStart + i, 71 | isThisMonth: false, 72 | isToday: false, 73 | isSelect: false, 74 | }); 75 | } 76 | else { 77 | this.dateArray.push({ 78 | year: year, 79 | month: month - 1, 80 | date: lastMonthStart + i, 81 | isThisMonth: false, 82 | isToday: false, 83 | isSelect: false, 84 | }); 85 | } 86 | } 87 | } 88 | // 将本月天数添加到数组中 89 | for (var i = 0; i < monthDays; i++) { 90 | this.dateArray.push({ 91 | year: year, 92 | month: month, 93 | date: i + 1, 94 | isThisMonth: true, 95 | isToday: false, 96 | isSelect: false, 97 | }); 98 | } 99 | if (this.currentYear === year && this.currentMonth === month) { 100 | var todayIndex = _.findIndex(this.dateArray, { 101 | year: this.currentYear, 102 | month: this.currentMonth, 103 | date: this.currentDate, 104 | isThisMonth: true 105 | }); 106 | this.dateArray[todayIndex].isToday = true; 107 | } 108 | // 将下个月天数添加到数组中，有些月份显示 6 周，有些月份显示 5 周 109 | if (this.dateArray.length % 7 !== 0) { 110 | var nextMonthAdd = 7 - this.dateArray.length % 7; 111 | for (var i = 0; i < nextMonthAdd; i++) { 112 | if (month === 11) { 113 | this.dateArray.push({ 114 | year: year, 115 | month: 0, 116 | date: i + 1, 117 | isThisMonth: false, 118 | isToday: false, 119 | isSelect: false, 120 | }); 121 | } 122 | else { 123 | this.dateArray.push({ 124 | year: year, 125 | month: month + 1, 126 | date: i + 1, 127 | isThisMonth: false, 128 | isToday: false, 129 | isSelect: false, 130 | }); 131 | } 132 | } 133 | } 134 | // 至此所有日期数据都被添加入 dateArray 数组中 135 | // 将日期数据按照每 7 天插入新的数组中 136 | for (var i = 0; i < this.dateArray.length / 7; i++) { 137 | for (var j = 0; j < 7; j++) { 138 | weekDays.push(this.dateArray[i * 7 + j]); 139 | } 140 | this.weekArray.push(weekDays); 141 | weekDays = []; 142 | } 143 | }; 144 | Calendar.prototype.back = function () { 145 | // 处理跨年的问题 146 | if (this.displayMonth === 0) { 147 | this.displayYear--; 148 | this.displayMonth = 11; 149 | } 150 | else { 151 | this.displayMonth--; 152 | } 153 | this.createMonth(this.displayYear, this.displayMonth); 154 | }; 155 | Calendar.prototype.forward = function () { 156 | // 处理跨年的问题 157 | if (this.displayMonth === 11) { 158 | this.displayYear++; 159 | this.displayMonth = 0; 160 | } 161 | else { 162 | this.displayMonth++; 163 | } 164 | this.createMonth(this.displayYear, this.displayMonth); 165 | }; 166 | // 选择某日期，点击事件 167 | Calendar.prototype.daySelect = function (day, i, j) { 168 | // 首先将上次点击的状态清除 169 | this.dateArray[this.lastSelect].isSelect = false; 170 | // 保存本次点击的项 171 | this.lastSelect = i * 7 + j; 172 | this.dateArray[i * 7 + j].isSelect = true; 173 | this.onDaySelect.emit(day); 174 | }; 175 | return Calendar; 176 | }()); 177 | __decorate([ 178 | Output(), 179 | __metadata("design:type", Object) 180 | ], Calendar.prototype, "onDaySelect", void 0); 181 | Calendar = __decorate([ 182 | Component({ 183 | selector: 'ion-calendar', 184 | template: "\n \n \n \n \n \n \n
{{displayYear}} \u5E74 {{displayMonth + 1}} \u6708
\n \n \n \n \n \n\n \n {{head}}\n \n\n \n \n {{day.date}}\n \n \n\n \n" 185 | }), 186 | __metadata("design:paramtypes", []) 187 | ], Calendar); 188 | export { Calendar }; 189 | //# sourceMappingURL=calendar.js.map --------------------------------------------------------------------------------