时间戳

首页 > 解决方案 > 在 ionic 4 中发出警报呈现默认日期

ionic-framework - 在 ionic 4 中发出警报呈现默认日期

问题描述

我正在使用 Ionic 4AlertController创建一个允许用户添加任务的警报。问题是，在用户点击日期输入之前，没有日期显示。我试过同时添加 amin和max。

代码如下

async addCustomTask() {
const alert = await this.alertController.create({
  header: 'Add custom task',
  inputs: [
    {
      name: 'task',
      type: 'text',
      placeholder: 'I would like to..'
    },
    {
      name: 'dueDate',
      type: 'date'
    }
  ],
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
      cssClass: 'secondary',
      handler: () => {
        return false;
      }
    }, {
      text: 'Ok',
      handler: (data) => {
        this.addTask(data.task, moment.tz(data.dueDate, this.account.timezone));
      }
    }
  ]
});
await alert.present();
};

加载时看起来像这样

第一张图片

单击它的那一刻，一切都开始按需要工作。它也以正确的格式作为日期提交。

第二张图片

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/Users/sam/.nvm/versions/node/v11.0.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.8.9
   @angular-devkit/schematics    : 0.8.9
   @angular/cli                  : 6.2.9
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.0, (and 11 other plugins)

System:

   NodeJS : v11.0.0 (/Users/sam/.nvm/versions/node/v11.0.0/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave
   Xcode  : Xcode 10.1 Build version 10B61

标签： ionic-frameworkionic4

解决方案

我当前的 Ionic 版本是 4.12.0，需要一个警报弹出窗口来获取用户 StartDate 和 EndDate 的输入以进行过滤。我学到的是它允许您添加“日期”类型但是，它只支持值和最大值的“字符串”。另外，请记住不要混合输入类型。以下是我的代码

private format_date(dt: any) {
    var today = new Date(dt);
    let dd: any = today.getDate();
    let mm: any = today.getMonth() + 1;
    const yyyy = today.getFullYear();
    if (dd < 10) {
        dd = `0${dd}`;
    }
    if (mm < 10) {
        mm = `0${mm}`;
    }
    return `${yyyy}-${mm}-${dd}`;
}
async presentPopover() {
    const dt = new Date();
    this.firstDate =   dt.getFullYear() + '-' + ((dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1) ) + '-01';
    this.maxDate = this.format_date(dt);
    this.lastDay = new Date(dt.getFullYear(), dt.getMonth() + 2, 0);
    this.lastDay = this.format_date(this.lastDay);

    if(new Date(this.lastDay) > dt) {
      this.lastDay = this.format_date(dt);
    }
    const alerts = await this.alertController.create({
      header: 'Filter',
      inputs: [
        {
          name: 'fromDt',
          type: 'date',
          value: this.firstDate,
          max: this.maxDate
        },
        {
          name: 'toDt',
          type: 'date',
          value: this.lastDay,
          max: this.maxDate
        }
      ],
      buttons: 
      [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, 
        {
          text: 'Ok',
          handler: () => {
              console.log('Confirm Ok');
              this.fetchData();
            }
          }
      ]
    });
    await alerts.present();    
}

推荐阅读