https://blog.csdn.net/River_Continent/article/details/78480016
一、问题描述
我在做手机App的时候，用到了ion-datatime插件，但是该插件不能显示当前时间，只是一个空白；
<ion-item>
<ion-label>申请时间</ion-label>
<ion-datetime name="sqsj" displayFormat="YYYY/MM/DD HH:mm" [(ngModel)]="newLeave.sqsj" >
</ion-datetime>
</ion-item>
1
2
3
4
5
截图：
二、解决办法
在ts或者js里面的构造器contructor里面新建一个当前时间初始值即可；
constructor(private navCtrl:NavController,
private navParams:NavParams,
public alertCtrl:AlertController,
private toastCtrl: ToastController,
private leaveService: LeaveService,
private loadingCtrl:LoadingController){
//原来方法：this.newLeave.dateStart=new Date().toISOString();会误差8个小时，以下方法是个简单处理技巧，仅限中国地区使用
this.newLeave.dateStart=new Date(new Date().getTime()+8*60*60*1000).toISOString();//计划请假从
this.newLeave.dateEnd=new Date(new Date().getTime()+8*60*60*1000).toISOString();//计划请假至
this.newLeave.sqsj=new Date(new Date().getTime()+8*60*60*1000).toISOString();//申请时间
}
1
2
3
4
5
6
7
8
9
10
11
感谢純屬遊戲的评论；没有考虑到ISO时间比我们中国当地时间（即东八区）相差8个小时，后来更新上面的代码和下面的图片，更新后，可能全文的代码和图片不能串一起，不是一个完整的例子，而是割裂的例子，阅读起来有点别扭，见谅；
这样，每一个时间都有一个初始值；
三、知识点总结
<ion-item>
<ion-label>申请时间</ion-label>
<ion-datetime name="sqsj" displayFormat="YYYY/MM/DD HH:mm" [(ngModel)]="newLeave.sqsj" cancelText="取消" doneText="确认">
</ion-datetime>
</ion-item>
1
2
3
4
5
1、displayFormat
表示显示时间的格式，你可以自己定义，用斜杠或者其他符号都可以；
2、[(ngModel)]
表示绑定的模型；你可以绑定你js或ts里面的属性，也可以绑实体类；我这里绑定的是newLeave实体的具体成员变量sqsj（申请时间）；但是，我在ts中只声明了newLeave，没有声明这个成员变量；下面的this.newLeave.sqsj=new Date()里面应该修改为：
this.newLeave.sqsj=new Date(new Date().getTime()+8*60*60*1000).toISOString();
不要看错了！！！！！
但是Ionic也认；就是说[(ngModel)]=”newLeave.sqsj”表示把我这里的时间的值赋值给newLeave.sqsj；
3、cancelText=”取消” doneText=”确认”
表示打开插件之后，取消和确认是原来默认的英文，还是显示为中文“取消”和“确认”字样；如果不写这两句，默认是英文的：
添加cancelText=”取消” doneText=”确认”之后：
；
4、时间格式规则
这里，需要什么格式的，就按照例子写就可以了；
5、日期和时间
在中文里，时间和日期是很模糊的概念；时间是非常广义的意思；而日期相对来说就要小一些，表示年月日的叫日期；但是，在英文里，年月日叫Date，小时和分钟，秒叫Time；这里，我们也约定一下，并且推广一下，Date是年月日，Time是时分秒；
6、pickerFormat选择器里面的时间格式
<ion-item>
<ion-label>申请时间</ion-label>
<ion-datetime name="sqsj" displayFormat="YYYY/MM/DD HH:mm" pickerFormat="YYYY-MMMM-DD HH:mm" [(ngModel)]="newLeave.sqsj" >
</ion-datetime>
</ion-item>
1
2
3
4
5
这里我们选择的pickerFormat格式是“YYYY-MMMM-DD HH:mm”；注意，这里起作用的不是短横，而是MMMM，这里是英文全称，比如一月是Nov…，而不是11；
我们来对比下pickerFormat格式是“YYYY-MM-DD HH:mm”的：
;
对比很明显了，这里我们就知道pickerFormat的作用了，作用规则根据上面的规则例子表来参照；
---------------------
作者：陶洲川
来源：CSDN
原文：https://blog.csdn.net/River_Continent/article/details/78480016
版权声明：本文为博主原创文章，转载请附上博文链接！