Instructions and Fixes

README.md

@@ -1,18 +1,18 @@
 Ionic2 Datepicker
 ======================
-#Under Development
+# Under Development
 
 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.
 
 
-##Prerequisites.
+## Prerequisites.
 
 * node, npm
 * ionic
 * gulp
 * type script
 
-##How to use:
+## How to use:
 
 1) In your project folder, please install this plugin using npm
 
@@ -22,9 +22,104 @@ This will install the latest version of this plugin and also it will save the pl
 
 `npm install ionic2-datepicker#0.1.0 --save`
 
-2) Specify the path of  `ionic2-datepicker.bundle.js` in your `index.html` file.
+2) Import IonicDatepicker and include in your module declarations and entryComponents:
+
+````ts
+import { IonicDatepicker } from 'ionic2-datepicker';
+
+...
+
+@NgModule({
+
+declarations: [
+    IonicDatepicker,
+    LaunchCalendarPage
+  ],
+
+  ...
+
+  entryComponents: [
+    IonicDatepicker,
+    LaunchCalendarPage
+  ],
+
+  ...
+
+````
+### OPTION A: Launch Datepicker in Modal window
+
+3A) Add a button to launch the calendar in your view (for example, `launch-calendar.html`)
+
+````html
+<button (click)="launchDatepicker($event)">Show Calendar</button>
+````
+
+Or, like this:
 
 ````html
-<!-- path to ionic -->
-<script src="node_modules/ionic2-datepicker/dist/ionic2-datepicker.min.js"></script>
+      <ion-item no-lines>
+        <ion-label stacked>Date</ion-label>
+        <ion-input (click)="launchDatepicker($event)" value="{{ this.selectedDate | date: config.dateFormat }}"></ion-input>
+      </ion-item>
 ````
+
+### OPTION B: Embed calendar in page WITHOUT modal window:
+
+3B) Add the datepicker in your view (for example, `launch-calendar.html`)
+
+````html
+    <datepicker isModal="false" (click)="onDatepickerChange(selectedDatePicker.selectedDate)"></datepicker>
+````
+
+### OPTION A continued
+
+4A) Add the function to launch your datepicker from the associated typescript file (for example, `launch-calendar.ts`)
+
+````ts
+import { NavController, NavParams, ModalController } from 'ionic-angular';
+import { IonicDatepicker } from 'ionic2-datepicker';
+
+@Component({
+  templateUrl: 'launch-calendar.html'
+)}
+
+export class LaunchCalendar {
+
+  datepicker = IonicDatepicker;
+  selectedDate: Date = new Date();
+  config: any = {};
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController){
+    this.selectedDate = new Date();
+    this.config.dateFormat = 'MMM dd, yyyy';
+  }
+
+  launchDatepicker(ev){
+    let val = ev.target.value;
+    let dp = this.modalCtrl.create(this.datepicker);
+    dp.onDidDismiss((data) => {
+      // console.log(data);
+      this.selectedDate = data;
+    })
+    dp.present();
+  }
+
+}
+
+````
+
+(We're actually not using navParams in this example, but you may want it to pass the date config, or something else.)
+
+### Option B:
+
+4B) Same as above, except define the `onDatepickerChange()` function instead of `launchDatepicker()`
+
+````ts
+  onDatepickerChange(selectedDate: Date) {
+    //this.selectedDate = new Date(selectedDate);
+
+  }
+````
+
+5) Adjust styles and settings as needed.
+

datepicker.html

@@ -0,0 +1,54 @@
+<ion-toolbar class="sidebar-datepicker">
+  <!--<ion-title>{{ this.selectedDate | date: config.dateFormat }}</ion-title>-->
+</ion-toolbar>
+<ion-list [class.modal_content]='isModal'>
+  <ion-row class="center calendar-header">
+    <ion-col width-25 (click)="prevMonth(daysList[daysList.length - 1])" [ngClass]="{disabled: (prevDisabled)}">
+      <ion-icon name="arrow-back"></ion-icon>
+    </ion-col>
+    <ion-col width-25>
+      <!-- 
+      <ion-label>Month</ion-label>
+      <ion-select [(ngModel)]="selectedMonth" (ionChange)="monthSelected($event,selectedMonth)">
+        <ion-option [value]="month" *ngFor="let month of config.monthsList" [innerHTML]="month"></ion-option>
+      </ion-select>
+      -->
+      <div class="month-right">
+      {{selectedMonth}}
+      </div>
+    </ion-col>
+    <ion-col width-25>
+    <!--
+    <ion-label>Year</ion-label>
+    <ion-select [(ngModel)]="selectedYear" (ionChange)="yearSelected($event,selectedYear)">
+      <ion-option [value]="year" *ngFor="let year of years" [innerHTML]="year"></ion-option>
+    </ion-select>
+    -->
+      <div>
+        {{selectedYear}}
+      </div>
+    </ion-col>
+    <ion-col width-25 (click)="nextMonth(daysList[daysList.length - 1])" [ngClass]="{disabled: (nextDisabled)}">
+      <ion-icon name="arrow-forward"></ion-icon>
+    </ion-col>
+  </ion-row>
+  <ion-row class="center">
+    <ion-col width-10 *ngFor="let week of config.weeksList" [innerHTML]="week" class="font_bold"></ion-col>
+  </ion-row>
+  <ion-row class="center" *ngFor="let row of rows">
+    <ion-col width-10 *ngFor="let col of cols">
+      <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), side_padding: (selectedDate.getDate() <= 9), first_week: (today.getDate() <= 9)}"></span>
+    </ion-col>
+  </ion-row>
+</ion-list>
+
+<!--
+<ion-toolbar>
+  <ion-buttons start (click)="setDate($event)">
+    <button ion-button color="royal" [innerHTML]="config.setLabel"></button>
+  </ion-buttons>
+  <ion-buttons center (click)="setToday($event)">
+    <button ion-button color="royal" [innerHTML]="config.todayLabel"></button>
+  </ion-buttons>
+</ion-toolbar>
+-->

datepicker.scss

@@ -0,0 +1,168 @@
+// mixins and color map typically defined in ~app/src/theme/variable.scss
+
+@mixin border-radius($radius) {		
+  -webkit-border-radius: $radius;		
+  -moz-border-radius: $radius;		
+  -ms-border-radius: $radius;		
+  border-radius: $radius;		
+}		
+@mixin text-background($bg) {		
+    $bg-lightness: lightness($bg);		
+    background-color: $bg;		
+    @if $bg-lightness > 70% { color: black; } 		
+    @else { color: white; }		
+}		
+
+$colors: (		
+  primary:    #273e54, // dark blue		
+  secondary:  #435d76, // blue-gray		
+  danger:     #e86139, // orange		
+  light:      #a1a199, // light gray		
+  dark:       #222,		
+  favorite:   #8090a3  // lighter blue-gray		
+);		
+
+.modal-wrapper {
+  background-color: white;
+  .scroll-content {
+  width: 100%;
+  left: 0%;
+  }
+}
+
+
+datepicker {
+  > ion-content {
+    left: 0px !important;
+    width: 100% !important;
+    height: calc(100% - 57px);
+    margin-top: 57px;
+    @media(max-width: 600px) {
+      .toolbar-title-md {
+        display: block;
+        font-size: 1.5rem;
+      }
+    }
+    @media(min-width: 1200px) {
+      margin-top: 0px;
+    }
+  }
+
+  > ion-toolbar {
+    &.toolbar-md{
+      min-height: 1em;
+    }
+    .toolbar-background-md{
+      background: color($colors, favorite) !important;
+    }
+  }
+
+  > ion-list.no_modal_content.list-md {
+    min-width: 284px !important; // prevent 2-digit date numbers from breaking
+  }
+  .month-right {
+    text-align: right;
+  }
+
+
+  ion-row {
+    padding: 4px;
+    &.center.calendar-header{
+      padding: 0;
+      color: white;
+    }
+  }
+  ion-col {
+    text-align: center;
+    margin: auto;
+  }
+  .font_bold {
+    font-weight: bold;
+  } 
+  ion-select{
+    max-width: 100%;
+    width: 100%;
+  }
+  .select-md {
+    padding: 5px;
+  }
+  .date_cell{
+    @media(max-width: 365px) {
+      padding: 0px;
+    }
+  }
+  .disabled{
+    pointer-events: none;
+    color: #aaa;
+  }
+  .selected_date {
+    font-weight: bold;
+    background-color: color($colors, danger);
+    @include border-radius(16px);
+    @include text-background(color($colors,danger));
+    @media(max-width: 365px) {
+      font-size: 10px;
+      font-weight: normal;
+    }
+  }
+  .selected_date.side_padding {
+    padding: 5px 9px;
+  }
+  .today{
+    background-color: white;
+    border: 1px solid color($colors, danger);
+    @include border-radius(16px);
+    @include text-background(white);
+  }
+  .today.first_week {
+    padding: 5px 9px !important;
+  }
+
+  .label-md{
+    display: block !important;
+  }
+
+  ion-row.center.calendar-header {
+    color: black;
+    padding-top: 1em;
+  }
+}
+
+ion-modal {
+  datepicker {
+    background-color: white;
+    max-width: 700px;
+    margin: 0 auto;
+    position: relative;
+    top: 56px;
+    max-height: 50px;
+    &.ion-page.show-page{
+      background-color: color($colors, favorite) !important;
+    }
+    ion-row.center.calendar-header {
+      padding-top: 0px;
+    }
+    > ion-toolbar.toolbar-md{
+      min-height: 0px !important;
+      padding: 0px;
+    }
+
+    .modal_content {
+      > ion-row {
+        &.center.calendar-header{
+          color: white;
+          ion-col {
+            padding: 6px 0px;
+            ion-icon.ion-md-arrow-back:before, .ion-md-arrow-forward:before{
+              margin: 13px 6px;
+            }
+          }
+        }
+      }
+      .month-right {
+        text-align: center;
+      }
+    }
+  }
+}
+