我在用
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="someVar"></ion-datetime>.
但是如果我把今天的日期设置为变量,那么它将默认显示这个值。我只需要在选中它的时候显示日期。
zpf6vheq1#
xxx.html
<ion-datetime #changeTime displayFormat="YYYY-MM-DD" [(ngModel)]="changeDate" (ionChange)="handleChangeDate(changeDate)"</ion-datetime>
xxx.ts
@ViewChild('changeTime') changeDateTime: DateTime; changeDate = ''; constructor() { let datePipe = new DatePipe('en-US'); this.changeDate = datePipe.transform(new Date(), 'yyyy-MM-dd'); } ionViewDidLoad() { this.changeDateTime.updateText = () => {}; } handleChangeDate(changeDate: string) { this.changeDate = changeDate; this.changeDateTime._text = changeDate; }
lxkprmvk2#
标签:https://github.com/ionic-team/ionic/issues/9846如果您使用的是Ionic 3.7或更高版本,他们添加了一个功能,在ion-dateime元素上设置initialValue。(万岁!感谢mlynch)示例:
ion-dateime
initialValue
<ion-datetime displayFormat="MM/DD/YYYY" formControlName="someDateControl" (initialValue)="10/01/2017"></ion-datetime>
同样的方法也适用于ngModel模板驱动的表单。最好设置(initialValue)="someDateFunction()",而不是硬编码日期。在组件的.ts文件to return the current local date/time for your timezone (instead of default GMT)中,您可以有:
ngModel
(initialValue)="someDateFunction()"
someDateFunction() { let timezoneOffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds let localDateTime = (new Date(Date.now() - timezoneOffset)).toISOString().slice(0,-1); return localDateTime; }
这会根据用户的位置将ion-datetime的最小值默认为今天的日期,但在实际选择并提交日期之前,该字段为空。如果您想自动将其设置为1个月或类似的日期,则只需调整dateFunction。
ion-datetime
4szc88ey3#
不是一个正式的解决方案,但在您的情况下更好的解决方案。这里是工作Plunker。
HTML:
<ion-list> <ion-item> <ion-label color="primary">Select Date</ion-label> <ion-input placeholder="Text Input" [value]="dataInicial | date:'dd/MM/yyyy'" (click)="open()"></ion-input> </ion-item> <ion-item no-lines hidden="true"> <ion-datetime #datePicker displayFormat="DD/MM/YYYY" (ionCancel)="this.dataInicial = null" [(ngModel)]="dataInicial" doneText="Feito" cancelText="Cancelar" [max]="maxDate"> </ion-datetime> </ion-item> </ion-list>
TS:
import { Component, ViewChild } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'app/home.page.html' }) export class HomePage { appName = 'Ionic App'; dataInicial: Date; maxDate: string; constructor(public neavController: NavController) {} @ViewChild('datePicker') datePicker; open() { if (!this.dataInicial) { this.dataInicial = new Date().toJSON().split('T')[0]; setTimeout(() => { this.datePicker.open(); }, 50) } else { this.datePicker.open(); } } }
qgzx9mmu4#
2021年ionic 5仍然不是一个正式的解决方案,所以我会与周围的工作:在组件代码中声明一个变量,比如intialDate,并将其初始化为空字符串“”在模板标记中,将intialDate设置为[(ngModel)]并将事件处理程序添加到(tap)事件在(TAP)事件处理程序,将intialDate设置为希望datetime打开的日期(检查状态并相应地应用逻辑)自己处理ionCancel事件并根据状态和应用逻辑重置所有内容xxx.html<ion-datetime (tap)="dateFocus(intialDate)" (ionCancel)="intialDate.value = null" #inputRefDate2='ngModel' [(ngModel)]="intialDate" [name]="intialDate" displayFormat="DD-MMM-YYYY" pickerFormat="DD-MMM-YYYY"> </ion-datetime>xxx.tsdateFocus(obj) {if (!obj.value) {obj.value = new Date(this.currentDate).toISOString();}}
<ion-datetime (tap)="dateFocus(intialDate)" (ionCancel)="intialDate.value = null" #inputRefDate2='ngModel' [(ngModel)]="intialDate" [name]="intialDate" displayFormat="DD-MMM-YYYY" pickerFormat="DD-MMM-YYYY"> </ion-datetime>
dateFocus(obj) {if (!obj.value) {obj.value = new Date(this.currentDate).toISOString();}}
4条答案
按热度按时间zpf6vheq1#
xxx.html
xxx.ts
lxkprmvk2#
标签:https://github.com/ionic-team/ionic/issues/9846
如果您使用的是Ionic 3.7或更高版本,他们添加了一个功能,在
ion-dateime
元素上设置initialValue
。(万岁!感谢mlynch)示例:
同样的方法也适用于
ngModel
模板驱动的表单。最好设置
(initialValue)="someDateFunction()"
,而不是硬编码日期。在组件的.ts文件to return the current local date/time for your timezone (instead of default GMT)中,您可以有:
这会根据用户的位置将
ion-datetime
的最小值默认为今天的日期,但在实际选择并提交日期之前,该字段为空。如果您想自动将其设置为1个月或类似的日期,则只需调整dateFunction。4szc88ey3#
不是一个正式的解决方案,但在您的情况下更好的解决方案。
这里是工作Plunker。
HTML:
TS:
qgzx9mmu4#
2021年ionic 5
仍然不是一个正式的解决方案,所以我会与周围的工作:
在组件代码中声明一个变量,比如intialDate,并将其初始化为空字符串“”在模板标记中,将intialDate设置为[(ngModel)]并将事件处理程序添加到(tap)事件在(TAP)事件处理程序,将intialDate设置为希望datetime打开的日期(检查状态并相应地应用逻辑)自己处理ionCancel事件并根据状态和应用逻辑重置所有内容
xxx.html
<ion-datetime (tap)="dateFocus(intialDate)" (ionCancel)="intialDate.value = null" #inputRefDate2='ngModel' [(ngModel)]="intialDate" [name]="intialDate" displayFormat="DD-MMM-YYYY" pickerFormat="DD-MMM-YYYY"> </ion-datetime>
xxx.ts
dateFocus(obj) {if (!obj.value) {obj.value = new Date(this.currentDate).toISOString();}}