安装 ionic 2 日期选择器答案

【问题标题】：install ionic 2 datepicker安装 ionic 2 日期选择器
【发布时间】：2019-03-27 22:53:07
【问题描述】：

我对 ionic 2 中的日期时间选择器有一些疑问：

1.当我选择它时存储日期时间的变量是什么？我从我的项目中添加了我的代码，我只是尝试将它存储在一些变量中而没有成功

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {DatePicker} from 'ionic-native';
import {Calendar} from 'ionic-native';
import {Platform} from 'ionic-angular';
import { Pipe } from '@angular/core';



/*
  Generated class for the InviteDates page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-invite-dates',
  templateUrl: 'invite-dates.html'
})
export class InviteDates {
  dateshow:any;
  newdate:any;
  d:any;
  b:any;
  year:any;
  month:any;
  day:any;
  today:Date;
  mydate: String = new Date().toISOString();


    constructor(public navCtrl: NavController,private platform:Platform) {
    this.d="";

  }

  ionViewDidLoad() {
    console.log('Hello InviteDates Page');
    this.datefun();
  }

}

html 文件

    <ion-content padding>

    <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="mydate"></ion-datetime>
        <p> the date is :{{mydate}}</p>


    </ion-item>
</ion-content>

在我的控制台中，我收到此消息“日期时间对象”，所以我想删除日期时间变量，但它显示错误

2.我想要 3datetime： - #1 当前日期的日期时间 - #2 所选日期的日期时间 - #3 datetime 用户选择的时间该怎么做？

3.如何限制日期？我的意思是，用户不能选择过去，例如从今天开始的一周。

【问题讨论】：

这取决于您的项目结构。通常你应该把它放到 app.js 中
您可以在这里发布您的项目结构，然后我可以建议更明确的答案。
您正在尝试将 Ionic 1 组件与 Ionic 2 一起使用。换句话说，您将 Angular 1 与 Angular 2 混合使用。不要这样做。您应该使用 Ionic 2s 默认日期选择器 (ionicframework.com/docs/v2/components/#datetime) 或找到要使用的 Angular 2 组件
@Pat 他之前特别提出了一个关于如何不使用日期时间选择器的问题，所以这是后续行动

标签： angular ionic-framework ionic2

【解决方案1】：

这是我认为您想要实现的最佳表现（格式和样式有限）：

组件：

    @Component({
      selector: 'page-invite-dates',
      templateUrl: 'invite-dates.html'
    })
    export class HomePage {
      date1: string = new Date().toDateString();
      date2: string;

      min: string = '';
      max: string = '';

      constructor() {
        let today = new Date();
        let oneWeek = new Date();

        oneWeek.setDate(oneWeek.getDate() + 7);

        this.min = today.toISOString();
        this.max = oneWeek.toISOString();
      }
    }

查看：

<ion-content>
  <ion-item>
    {{date1}}
  </ion-item>
  <ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime min="{{min}}" max="{{max}}" displayFormat="MM/DD/YYYY" [(ngModel)]="date2"></ion-datetime>
  </ion-item>
  <ion-item>
    {{date2}}
  </ion-item>
</ion-content>

有关 ionic-datepicker (http://ionicframework.com/docs/v2/api/components/datetime/DateTime/) 的更多详细信息，请参阅 API

随意寻找为 Angular 2 构建的第 3 方组件

【讨论】：