<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
import { NavController } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage {
public today = new Date();
current_iso: string;
current_date: string;
current_year: string;
yesterday_iso: string;
tomorrow_iso: string;
past100_iso: string;
past100_year: string;
future100_iso: string;
future100_year: string;
past101_iso: string;
past101_year: string;
future101_iso: string;
future101_year: string;
nexyear: string;
ngOnInit()
{
this.current_iso = this.today.toISOString();
this.current_date = this.current_iso.substring(0,10);
this.current_year = this.current_iso.substring(0,4);
console.log(this.today);
let yesterday = new Date(this.today);
yesterday.setDate(yesterday.getDate()-1));
this.yesterday_iso = yesterday.toISOString();
console.log(this.today);
let tomorrow = new Date(this.today);
tomorrow.setDate(tomorrow.getDate()+1));
this.tomorrow_iso = tomorrow.toISOString();
let past100 = new Date(this.today);
past100.setFullYear(past100.getFullYear()-100));
this.past100_iso = past100.toISOString();
this.past100_year = this.past100_iso.substring(0,4);
console.log(this.today);
let future100 = new Date(this.today);
future100.setFullYear(future100.getFullYear()+100));
this.future100_iso = future100.toISOString();
this.future100_year = this.future100_iso.substring(0,4);
console.log(this.today);
let past101 = new Date(this.today);
past101.setFullYear(past101.getFullYear()-101));
this.past101_iso = past101.toISOString();
this.past101_year = this.past101_iso.substring(0,4);
console.log(this.today);
let future101 = new Date(this.today);
future101.setFullYear(future101.getFullYear()+101));
this.future101_iso = future101.toISOString();
this.future101_year = this.future101_iso.substring(0,4);
let nextyear = new Date(this.today);
nextyear.setFullYear(nextyear.getFullYear()+1));
this.nextyear = nextyear.toISOString();
console.log(this.today);
}
})
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
.error *{
color:red !important;
}
.alert *, .alert{
color:orange!important;
}
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
constructor(private platform: Platform) {
this.rootPage = HomePage;
}
}
ionicBootstrap(MyApp);
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<ion-card>
<ion-card-content>
<p>Issues:
<br>1. Picker miss <b>day column</b> when has displayFormat or pickerFormat attr
<br>2. If pickerFormat is YYYY, display value shows <b>,YYYY</b>
</p>
<ion-item>
<ion-label>
Datetime - displayFormat="YYYY"
</ion-label>
<ion-datetime displayFormat="YYYY">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime - pickerFormat="YYYY"
</ion-label>
<ion-datetime pickerFormat="YYYY">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime - displayFormat="dd/MM/YYYY"
</ion-label>
<ion-datetime displayFormat="dd/MM/YYYY">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime - pickerFormat="dd MM YYYY"
</ion-label>
<ion-datetime pickerFormat="dd MM YYYY">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime - displayFormat/pickerFormat="dd MMM YYYY"
</ion-label>
<ion-datetime displayFormat="dd MMM YYYY" pickerFormat="dd MMM YYYY">
</ion-datetime>
</ion-item>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<p>Issues:
<br> 1. Miss month & year column in picker if <b>max attr value less then (current date - 101)</b>
<br>2. Miss month column in picker if <b>max attr value less then current date & greater then (current date - 100)</b>.<span class="alert"> After scroll in picker or select a date, missed column appear.</span>
</p>
<ion-item>
<ion-label>
Datetime w/ max({{current_year}})
</ion-label>
<ion-datetime [max]="current_year">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label>
Datetime w/ max(today - {{current_iso}})
</ion-label>
<ion-datetime [max]="current_iso">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ max(yesterday - {{yesterday_iso}})
</ion-label>
<ion-datetime [max]="yesterday_iso">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label>
Datetime w/ max(tomorrow - {{tomorrow_iso}})
</ion-label>
<ion-datetime [max]="tomorrow_iso">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ max(future - {{future100_year}})
</ion-label>
<ion-datetime [max]="future100_year">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ max(future - {{future100_iso}})
</ion-label>
<ion-datetime [max]="future100_iso">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ max(future - {{future101_year}})
</ion-label>
<ion-datetime [max]="future101_year">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ max(future - {{future101_iso}})
</ion-label>
<ion-datetime [max]="future101_iso">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ max(past - {{past100_year}})
</ion-label>
<ion-datetime [max]="past100_year">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ max(past - {{past100_iso}})
</ion-label>
<ion-datetime [max]="past100_iso">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime w/ max(past - {{past101_year}})
</ion-label>
<ion-datetime [max]="past101_year">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime w/ max(past - {{past101_iso}})
</ion-label>
<ion-datetime [max]="past100_iso">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ min({{past101_iso}}) max({{past100_iso}})
</ion-label>
<ion-datetime [min]="past101_iso" [max]="past100_iso">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ min(1915) max(1917)
</ion-label>
<ion-datetime min=1915 max=1917>
</ion-datetime>
</ion-item>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<p>Issues:
<br> 1. Miss month & year column in picker if <b>min attr value greater then current year</b>
<br>2. Miss month column in picker if <b>min attr value today, yesterday or tomorrow</b>.<span class="alert"> After scroll in picker or select a date, missed column appear.</span>
</p>
<ion-item>
<ion-label>
Datetime w/ min({{current_year}})
</ion-label>
<ion-datetime [min]="current_year">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ min(today - {{current_iso}})
</ion-label>
<ion-datetime [min]="current_iso">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ min(yesterday - {{yesterday_iso}})
</ion-label>
<ion-datetime [min]="yesterday_iso">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ min(tomorrow - {{tomorrow_iso}})
</ion-label>
<ion-datetime [min]="tomorrow_iso">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime w/ min(future - {{today.getFullYear()+1}})
</ion-label>
<ion-datetime [min]="today.getFullYear()+1">
</ion-datetime>
</ion-item>
<ion-item class="error">
<ion-label>
Datetime w/ min(future - {{nextyear}})
</ion-label>
<ion-datetime [min]="nextyear">
</ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label>
Datetime w/ min({{nextyear}}) max({{future101_iso}})
</ion-label>
<ion-datetime [min]="nextyear" [max]="future101_iso">
</ion-datetime>
</ion-item>
<ion-item class="">
<ion-label>
Datetime w/ min(2017) max(2020)
</ion-label>
<ion-datetime min=2017 max=2020>
</ion-datetime>
</ion-item>
</ion-card-content>
</ion-card>
<!-- <ion-card>
<ion-card-content>
<ion-item>
<ion-label>
Datetime w/o attributes
</ion-label>
<ion-datetime>
</ion-datetime>
</ion-item>
<ion-item>
<ion-label> Datetime - currentDate_iso()</ion-label>
<ion-datetime [(ngModel)]="currentDate_iso()"></ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label> Datetime - pastDate</ion-label>
<ion-datetime [(ngModel)]="pastDate"></ion-datetime>
</ion-item>
<ion-item class="alert">
<ion-label> Datetime - future100_iso() </ion-label>
<ion-datetime [(ngModel)]="future100_iso()"></ion-datetime>
</ion-item>
</ion-card-content>
</ion-card>-->
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Component } from '@angular/core';
@Component({
templateUrl:"page1.html"
})
export class Page1 {
constructor() {
}
}
<ion-header>
<ion-navbar primary>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
</div>
</ion-content>
import { Component } from "@angular/core";
import {HomePage} from './home.ts';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>