/ion2-calendar

一个ionic2的日期选择组件 DatePicker

Primary LanguageJavaScriptMIT LicenseMIT

ion2-calendar

A configurable and selectable range dates calendar component for ionic2

Usage

install

$ npm install ion2-calendar --save

if you do not use moment

$ npm install moment --save

import module

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { CalendarModule } from "ion2-calendar";

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    CalendarModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Use

import { Component } from '@angular/core';

import {CalendarController} from "ion2-calendar/dist";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public calendarCtrl: CalendarController
  ) {

  }

  openCalendar(){
    this.calendarCtrl.openCalendar({
      from:new Date()
    })
    .then( res => { console.log(res) } );
  }

}

Demo

date

date

date range

date range

disable weekdays

disable weekdays

weekdays title

weekdays title

month title

month title

days config

days config

API

openCalendar(Options)

Options

Name Type Default Description
from Date new Date() start date
to Date 0 (Infinite) end date
title string 'Calendar' title
isRadio boolean true true for one day ,false for range dates
disableWeekdays Array [] week to be disabled (0-6)
closeLabel string cancel cancel button label ,can be an empty string
monthTitle string 'MMM yyyy' month title format
weekdaysTitle Array "Di_Lu_Ma_Me_Je_Ve_Sa".split("_") weeks title
daysConfig Array<DaysConfig> [] days configuration

DaysConfig

Name Type Default Description
date Date required configured days
marked boolean false highlight color
disable boolean false disable
title string none displayed title example:'today'
subTitle string none subTitle subTitle example:'christmas'

Output Promise

Name Type Description
from Day start date If isRadio it is false
to Day end date If isRadio it is false
date Day date If isRadio it is true

Day

Name Type Description
time number timestamp
marked boolean highlight color
disable boolean disable
title string displayed title
subTitle string subTitle subTitle

Environment

  • Cordova CLI: 6.4.0
  • Ionic Framework Version: 2.0.0-rc.4
  • Ionic CLI Version: 2.1.18
  • Ionic App Lib Version: 2.1.9
  • Ionic App Scripts Version: 0.0.47
  • OS: macOS Sierra
  • Node Version: v6.9.2
  • Xcode version: Xcode 8.2.1 Build version 8C1002