Ionic 6日期时间选取器

erhoui1w  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(232)

我在使用带有新日期-时间选择器的ionic 6时遇到了一些问题。我从数据库中检索了我的值(通过一个嵌套服务)。在我的数据库中,日期是:“2022-06-30 13:11:54”当我检索它时,我有这个值:“2022-06- 30 T11:11:54.000Z”当我把它传递给我的html页面时,输入值是好的,但当我打开日期选择器时(日期是好的,但不是时间)
在我的.html文件中

<ion-item>
  <ion-label color="primary" position="stacked">{{ 'CHECK_IN.CALL_DATE' | translate }}</ion-label>
  <ion-buttons slot="end">
    <ion-button (click)="setNow('callDate')">
      <ion-icon name="calendar"></ion-icon>
    </ion-button>
    <ion-button (click)="setNull('callDate')">
      <ion-icon name="close-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <!-- </ion-item-divider> -->
  <!-- <ion-item> -->
  <!-- <ion-label color="primary" position="stacked">{{ 'OPERATION.VALID_TO' | translate }}</ion-label> -->
  <ion-input value="{{ formEdit.controls['callDate'].value | date: 'dd/MM/yyyy HH:mm'  }}" id="triggerCallDate"
    class="ion-text-end"></ion-input>
  <ion-popover id="popover-bottom" trigger="triggerCallDate" size="fixed">
    <ng-template>
      <ion-datetime 
      presentation="date-time" formControlName="callDate" locale="fr-FR" [showDefaultButtons]="true"
      doneText="{{ 'APPLICATION.OK' | translate }}" cancelText="{{ 'APPLICATION.CANCEL' | translate }}">
      </ion-datetime>
    </ng-template>
  </ion-popover>
</ion-item>

在我的.ts文件中

if (data.callDate == null) { this.formEdit.controls.callDate.setValue(null); }
  else { this.formEdit.controls.callDate.setValue((new Date(data.callDate)).toISOString());

我已经读过离子文档,但是我对日期格式有点困惑。如果任何人有一个现有的例子,这将是很好的。谢谢

7fhtutme

7fhtutme1#

谢谢你的回答我注意到我的nestjs服务在本地时区存储我的数据,当我检索它时,我的服务将其发送到UTC我用

autoLoadEntities: true,
entities: [],
synchronize: true,
timezone: 'UTC',

现在,当我更改日期时,我将其设置为UTC

this.userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;    
if (parameterToUpdate.callDate != null) {
       const utcCallDate = zonedTimeToUtc(new Date(this.formEdit.value.callDate), this.userTimeZone);
              parameterToUpdate.callDate = (new Date(utcCallDate)).toISOString();
            }

但问题仍然存在,当我检索我的值时。输入正确,但我的日期选择器小时不正确

let zonedDate = utcToZonedTime(data.callDate, this.userTimeZone);
if (data.callDate == null) { this.formEdit.controls.callDate.setValue(null); }
          else {
            this.formEdit.controls.callDate.setValue(zonedDate.toISOString());    
          }
2q5ifsrm

2q5ifsrm2#

我已使用解决问题

import { formatISO, parseISO } from 'date-fns';

我已经从后端删除了时区

synchronize: true,
//timezone: 'utc'

在我的前端,当我从数据库中检索值时

if (data.checkInStartDate == null) { this.formEdit.controls.checkInStartDate.setValue(null); }
 else { this.formEdit.controls.checkInStartDate.setValue(formatISO(new Date(data.checkInStartDate))); }

更新前端值时

setNow() {
    this.today = formatISO(new Date());
    this.formEdit.controls.checkInStartDate.setValue(this.today);
}

当我将值发送到后端服务时:

if (parameterToUpdate.checkInStartDate != null) {
          parameterToUpdate.checkInStartDate = formatISO(new Date(this.formEdit.value.checkInStartDate));
        }

我的离子html

<ion-item>
      <ion-label color="primary" position="stacked">{{ 'CHECK_IN.CHECK_IN_START_DATE' | translate }}</ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="setNow('checkInStartDate')">
          <ion-icon name="calendar"></ion-icon>
        </ion-button>
        <ion-button (click)="setNull('checkInStartDate')">
          <ion-icon name="close-circle"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-input 
        value="{{ formEdit.controls['checkInStartDate'].value | date: 'dd/MM/yyyy HH:mm' }}"
        id="triggercheckInStartDate" 
        class="ion-text-end">
      </ion-input>      
    </ion-item>

 <ion-modal trigger="triggercheckInStartDate">
      <ng-template>
        <ion-datetime 
            presentation="time-date" 
            [firstDayOfWeek]="1"
            formControlName="checkInStartDate" 
            locale="fr-FR" 
            [showDefaultButtons]="true"
            [showDefaultTitle]="true"
            doneText="{{ 'APPLICATION.OK' | translate }}" 
            cancelText="{{ 'APPLICATION.CANCEL' | translate }}">
          <span slot="title">{{ 'CHECK_IN.CHECK_IN_START_DATE' | translate }}</span>
          <span slot="time-label">{{ 'CHECK_IN.HOUR' | translate }}</span>
        </ion-datetime>
      </ng-template>
    </ion-modal>

相关问题