【Ionic】Ionic自动计算时间+时间验证(Datatime,readonly,toFixed,parse)

来源:互联网 发布:外贸邮箱软件 编辑:程序博客网 时间:2024/06/05 05:04

一、起因

因为要做一个请假,满足一下要求:
1、结束时间不能小于开始时间;
2、开始时间和结束时间可以调到过去的时间,考虑到补假;
3、如果请假天数小于0,则不让提交;
4、请假天数不允许编辑,是自动计算的;

二、解决办法

1、初始化(源代码)

  constructor(private navCtrl:NavController,              private navParams:NavParams,              private viewCtrl:ViewController,              public alertCtrl:AlertController,              private appService:AppService,              private toastCtrl: ToastController,              private leaveService: LeaveService,              private loadingCtrl:LoadingController){      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();//申请时间      this.newLeave.leaveKinds='事假';      this.newLeave.qjts=(Date.parse(this.newLeave.dateEnd)-Date.parse(this.newLeave.dateStart))/(1000*60+60*24)  }

2、截图

这里写图片描述

3、说明

3.1、时间类后面加了一个8*60*60*10000 这个是8小时的时区时差,我们东八区的时间比国际时间少了8个小时,要补上;
3.2、toISOString():是Ionic插件<ion-datetime></ion-datetime> 默认的显示时间格式;
3.3 Date.parse()方法是将ISOString类型的时间变成Date类型的时间;

4、时间验证

这里在开始时间和结束时间那里都加了一个时间变化验证:
4.1、html:
这里写图片描述

这里,请假天数是不允许编辑的,用了一个readonly=”true”属性;

4.2、TS逻辑:
这里写图片描述

这里用了一个toFixed()方法,四舍五入,保留1位小数;因为允许半天假,小时假;

欢迎关注我的公众号:
【幕桥社区】
这里写图片描述

原创粉丝点击