{"id":13696968,"url":"https://github.com/HsuanXyz/ion2-calendar","last_synced_at":"2025-05-03T17:32:43.001Z","repository":{"id":15244879,"uuid":"77778527","full_name":"hsuanxyz/ion2-calendar","owner":"hsuanxyz","description":"📅 A date picker components for ionic2 ／ionic3 / ionic4","archived":false,"fork":false,"pushed_at":"2022-12-08T22:14:55.000Z","size":3304,"stargazers_count":554,"open_issues_count":167,"forks_count":278,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-28T09:33:34.068Z","etag":null,"topics":["angular","angular2","angular4","calendar","components","datepicker","daterange","daterangepicker","ionic","ionic2","ionic3","ionic4","range"],"latest_commit_sha":null,"homepage":"https://hsuanxyz.github.io/demo/ion2-calendar/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsuanxyz.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-01T12:46:36.000Z","updated_at":"2025-01-24T08:43:47.000Z","dependencies_parsed_at":"2023-01-13T20:30:09.203Z","dependency_job_id":null,"html_url":"https://github.com/hsuanxyz/ion2-calendar","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fion2-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fion2-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fion2-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fion2-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsuanxyz","download_url":"https://codeload.github.com/hsuanxyz/ion2-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252226910,"owners_count":21714894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","calendar","components","datepicker","daterange","daterangepicker","ionic","ionic2","ionic3","ionic4","range"],"created_at":"2024-08-02T18:00:50.723Z","updated_at":"2025-05-03T17:32:42.573Z","avatar_url":"https://github.com/hsuanxyz.png","language":"TypeScript","funding_links":[],"categories":["Components","UI","Complete projects"],"sub_categories":["Input - Date/Calendar","Form / Input"],"readme":"# 📅 ion2-calendar\n\n[![Build Status](https://travis-ci.org/HsuanXyz/ion2-calendar.svg?branch=master)](https://travis-ci.org/HsuanXyz/ion2-calendar)\n[![Dependency Status](https://david-dm.org/HsuanXyz/ion2-calendar.svg)](https://david-dm.org/HsuanXyz/ion2-calendar)\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][downloads-url]\n[![MIT License][license-image]][license-url]\n\n![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/calendar.png?raw=true)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"800\" src=\"https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/calendar-1.png?raw=true\"\u003e\n\u003c/p\u003e\n\n- 支持日期范围\n- 支持多选\n- 支持HTML组件\n- 可按周数禁用日期\n- 可按天设置事件\n- 支持本地化\n- Material 风格\n\n# 支持\n\n- ionic-angular `^3.0.0` [2.x](https://github.com/HsuanXyz/ion2-calendar/tree/v2)\n- @ionic/angular `4.0.0`\n\n# Demo\n\nlive demo [click me](https://www-yefjsqmtmv.now.sh/).\n\n# 使用\n\n### 安装\n\n`$ npm install ion2-calendar moment --save`\n\n### 引入模块\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { IonicApp, IonicModule } from '@ionic/angular';\nimport { MyApp } from './app.component';\n...\nimport { CalendarModule } from 'ion2-calendar';\n\n@NgModule({\n  declarations: [\n    MyApp,\n    ...\n  ],\n  imports: [\n    IonicModule.forRoot(),\n    CalendarModule\n  ],\n  bootstrap: [MyApp],\n  ...\n})\nexport class AppModule {}\n```\n\n# HTML 组件模式\n\n### 基本\n\n```html\n\u003cion-calendar [(ngModel)]=\"date\"\n              (change)=\"onChange($event)\"\n              [type]=\"type\"\n              [format]=\"'YYYY-MM-DD'\"\u003e\n\u003c/ion-calendar\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  date: string;\n  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'\n  constructor() { }\n\n  onChange($event) {\n    console.log($event);\n  }\n  ...\n}\n```\n\n### 日期范围\n\n```html\n\u003cion-calendar [(ngModel)]=\"dateRange\"\n              [options]=\"optionsRange\"\n              [type]=\"type\"\n              [format]=\"'YYYY-MM-DD'\"\u003e\n\u003c/ion-calendar\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CalendarComponentOptions } from 'ion2-calendar';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  dateRange: { from: string; to: string; };\n  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'\n  optionsRange: CalendarComponentOptions = {\n    pickMode: 'range'\n  };\n\n  constructor() { }\n  ...\n}\n```\n\n### 日期多选\n\n```html\n\u003cion-calendar [(ngModel)]=\"dateMulti\"\n              [options]=\"optionsMulti\"\n              [type]=\"type\"\n              [format]=\"'YYYY-MM-DD'\"\u003e\n\u003c/ion-calendar\u003e\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CalendarComponentOptions } from 'ion2-calendar';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  dateMulti: string[];\n  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'\n  optionsMulti: CalendarComponentOptions = {\n    pickMode: 'multi'\n  };\n\n  constructor() { }\n  ...\n}\n```\n\n### 输入属性\n\n| Name     | Type                     | Default      | Description  |\n| -------- | ------------------------ | ------------ | ------------ |\n| options  | CalendarComponentOptions | null         | 配置选项对象 |\n| format   | string                   | 'YYYY-MM-DD' | 格式         |\n| type     | string                   | 'string'     | 类型         |\n| readonly | boolean                  | false        | 只读         |\n\n### 输出属性\n\n| Name        | Type         | Description |\n| ----------- | ------------ | ----------- |\n| change      | EventEmitter | 模型被改变  |\n| monthChange | EventEmitter | 月份被改变  |\n| select      | EventEmitter | 点击天按钮  |\n| selectStart | EventEmitter | 点击天按钮  |\n| selectEnd   | EventEmitter | 点击天按钮  |\n\n### CalendarComponentOptions\n\n| Name              | Type                    | Default                                                                                | Description                                            |\n| ----------------- | ----------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------ |\n| from              | Date                    | `new Date()`                                                                           | 开始日期                                               |\n| to                | Date                    | 0 (Infinite)                                                                           | 结束日期                                               |\n| color             | string                  | `'primary'`                                                                            | 颜色 'primary', 'secondary', 'danger', 'light', 'dark' |\n| pickMode          | string                  | `single`                                                                               | 模式 'multi', 'range', 'single'                        |\n| showToggleButtons | boolean                 | `true`                                                                                 | 显示月份切换按钮                                       |\n| showMonthPicker   | boolean                 | `true`                                                                                 | 显示月份选择器                                         |\n| monthPickerFormat | Array\u003cstring\u003e           | `['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']` | 月份选择器格式                                         |\n| defaultTitle      | string                  | ''                                                                                     | 每天的默认标题                                         |\n| defaultSubtitle   | string                  | ''                                                                                     | 每天的默认副标题                                       |\n| disableWeeks      | Array\u003cnumber\u003e           | `[]`                                                                                   | 按周数禁用 (0-6)                                       |\n| monthFormat       | string                  | `'MMM YYYY'`                                                                           | 标题格式                                               |\n| weekdays          | Array\u003cstring\u003e           | `['S', 'M', 'T', 'W', 'T', 'F', 'S']`                                                  | 每周显示文本                                           |\n| weekStart         | number                  | `0` (0 or 1)                                                                           | 每周从星期几开始                                       |\n| daysConfig        | Array\u003c**_DaysConfig_**\u003e | `[]`                                                                                   | 按天配置                                               |\n\n# 模态框模式\n\n### 基本\n\n引入 ion2-calendar 到你的组件控制器。\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport {\n  CalendarModal,\n  CalendarModalOptions,\n  DayConfig,\n  CalendarResult\n} from 'ion2-calendar';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  constructor(public modalCtrl: ModalController) {}\n\n  openCalendar() {\n    const options: CalendarModalOptions = {\n      title: 'BASIC'\n    };\n\n    const myCalendar = await this.modalCtrl.create({\n      component: CalendarModal,\n      componentProps: { options }\n    });\n\n    myCalendar.present();\n\n    const event: any = await myCalendar.onDidDismiss();\n    const date: CalendarResult = event.data;\n    console.log(date);\n  }\n}\n```\n\n### 日期范围\n\n设置 pickMode 为 'range'.\n\n```typescript\nopenCalendar() {\n  const options: CalendarModalOptions = {\n    pickMode: 'range',\n    title: 'RANGE'\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date = event.data;\n  const from: CalendarResult = date.from;\n  const to: CalendarResult = date.to;\n\n  console.log(date, from, to);\n}\n```\n\n### 多选日期\n\n设置 pickMode 为 'multi'。\n\n```typescript\nopenCalendar() {\n  const options = {\n    pickMode: 'multi',\n    title: 'MULTI'\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: CalendarResult = event.data;\n  console.log(date);\n}\n```\n\n### 禁用周\n\n使用周索引 例子: `[0, 6]` 禁用周末.\n\n```typescript\nopenCalendar() {\n  const options: CalendarModalOptions = {\n    disableWeeks: [0, 6]\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: CalendarResult = event.data;\n  console.log(date);\n}\n```\n\n### 本地化\n\n你的根模块\n\n```typescript\nimport { NgModule, LOCALE_ID } from '@angular/core';\n...\n\n@NgModule({\n  ...\n  providers: [{ provide: LOCALE_ID, useValue: \"zh-CN\" }]\n})\n\n...\n```\n\n```typescript\nopenCalendar() {\n  const options: CalendarModalOptions = {\n    monthFormat: 'YYYY 年 MM 月 ',\n    weekdays: ['天', '一', '二', '三', '四', '五', '六'],\n    weekStart: 1,\n    defaultDate: new Date()\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: CalendarResult = event.data;\n  console.log(date);\n}\n```\n\n### Days config\n\n单独设置某一天或者多天\n\n```javascript\nopenCalendar() {\n  let _daysConfig: DayConfig[] = [];\n  for (let i = 0; i \u003c 31; i++) {\n    _daysConfig.push({\n      date: new Date(2017, 0, i + 1),\n      subTitle: `$${i + 1}`\n    })\n  }\n\n  const options: CalendarModalOptions = {\n    from: new Date(2017, 0, 1),\n    to: new Date(2017, 11.1),\n    daysConfig: _daysConfig\n  };\n\n  const myCalendar = await this.modalCtrl.create({\n    component: CalendarModal,\n    componentProps: { options }\n  });\n\n  myCalendar.present();\n\n  const event: any = await myCalendar.onDidDismiss();\n  const date: CalendarResult = event.data;\n  console.log(date);\n}\n```\n\n# API\n\n## 模态框控制器选项\n\n### Options\n\n| Name                 | Type                     | Default                               | Description                                            |\n| -------------------- | ------------------------ | ------------------------------------- | ------------------------------------------------------ |\n| from                 | Date                     | `new Date()`                          | 开始日期                                               |\n| to                   | Date                     | 0 (Infinite)                          | 结束日期                                               |\n| title                | string                   | `'CALENDAR'`                          | 标题                                                   |\n| color                | string                   | `'primary'`                           | 颜色 'primary', 'secondary', 'danger', 'light', 'dark' |\n| defaultScrollTo      | Date                     | none                                  | 使进入视图是默认滚动到指定日期位置                     |\n| defaultDate          | Date                     | none                                  | 默认选择的日期，适用于 'single' 模式                   |\n| defaultDates         | Array\u003cDate\u003e              | none                                  | 默认选择的多个日期，适用于 'multi' 模式                |\n| defaultDateRange     | { from: Date, to: Date } | none                                  | 默认选择的日期范围，适用于 'range' 模式                |\n| defaultTitle         | string                   | ''                                    | 每天的默认标题                                         |\n| defaultSubtitle      | string                   | ''                                    | 每天的默认副标题                                       |\n| cssClass             | string                   | `''`                                  | 将自定义 class 插入 模态框顶级，多个用逗号分割         |\n| canBackwardsSelected | boolean                  | `false`                               | 能否向后滚动                                           |\n| pickMode             | string                   | `single`                              | 'multi', 'range', 'single'                             |\n| disableWeeks         | Array\u003cnumber\u003e            | `[]`                                  | 按周数禁用 (0-6)                                       |\n| closeLabel           | string                   | `CANCEL`                              | 关闭按钮标题                                           |\n| doneLabel            | string                   | `DONE`                                | 完成按钮标题                                           |\n| closeIcon            | boolean                  | `false`                               | 使用关闭图标按钮                                       |\n| doneIcon             | boolean                  | `false`                               | 使用完成图标按钮                                       |\n| monthFormat          | string                   | `'MMM YYYY'`                          | 月份显示格式                                           |\n| weekdays             | Array\u003cstring\u003e            | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | 星期标题                                               |\n| weekStart            | number                   | `0` (0 or 1)                          | 设置每周开始时间                                       |\n| daysConfig           | Array\u003c**_DaysConfig_**\u003e  | `[]`                                  | 按天配置                                               |\n| step                 | number                   | `12`                                  | 滚动时每次加载的月数                                     |\n\n\n#### DaysConfig\n\n| Name     | Type    | Default  | Description             |\n| -------- | ------- | -------- | ----------------------- |\n| cssClass | string  | `''`     | 多个用逗号分开          |\n| date     | Date    | required | 被设置的那天            |\n| marked   | boolean | false    | 高亮                    |\n| disable  | boolean | false    | 禁用                    |\n| title    | string  | none     | 显示为什么 eg: `'今天'` |\n| subTitle | string  | none     | 副标题 eg: `新年`       |\n\n### onDidDismiss 返回字段 `{ data } = event`\n\n| pickMode | Type                                                     |\n| -------- | -------------------------------------------------------- |\n| single   | { date: **_CalendarResult_** }                           |\n| range    | { from: **_CalendarResult_**, to: **_CalendarResult_** } |\n| multi    | Array\u003c**_CalendarResult_**\u003e                              |\n\n### onDidDismiss 返回字段 `{ role } = event`\n\n| Value      | Description      |\n| ---------- | ---------------- |\n| 'cancel'   | 通过取消按钮关闭 |\n| 'done'     | 通过完成按钮关闭 |\n| 'backdrop' | 点击背景关闭     |\n\n### CalendarResult\n\n| Name    | Type   |\n| ------- | ------ |\n| time    | number |\n| unix    | number |\n| dateObj | Date   |\n| string  | string |\n| years   | number |\n| months  | number |\n| date    | number |\n\n## 感谢阅读\n\n[npm-url]: https://www.npmjs.com/package/ion2-calendar\n[npm-image]: https://img.shields.io/npm/v/ion2-calendar.svg\n[downloads-image]: https://img.shields.io/npm/dm/ion2-calendar.svg\n[downloads-url]: http://badge.fury.io/js/ion2-calendar\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHsuanXyz%2Fion2-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHsuanXyz%2Fion2-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHsuanXyz%2Fion2-calendar/lists"}