1、html页面定义
<div >
<my-date-picker name="mydate" [options]="myDatePickerOptions11" style="text-align: left;position: absolute;width:63%;border: 0px"
(dateChanged)="changestarttimexf($event)" height="30" readonly size="16"
id="starttimesxiaofei"></my-date-picker>
</div>
<div>至</div>
<div>
<my-date-picker name="mydate" [options]="myDatePickerOptions12" style="text-align: left;position: absolute;width:63%;border: 0px"
(dateChanged)="changeendtimexf($event)" height="30" readonly size="16"
id="endtimesxiaofei"></my-date-picker>
</div>
2、ts代码
引用
import { IMyOptions, IMyDateModel } from 'mydatepicker';
public startTime: any = null;
public endTime: any = null;
public startTimecz:any = null;
public endTimecz: any = null;
public changestarttimexf(e) {
this.myDatePickerOptions11 = {
showClearDateBtn: true
};
this.startTime = e.formatted;
}
public changeendtimexf(e){
this.myDatePickerOptions12 = {
showClearDateBtn: true
};
this.endTime = e.formatted;
}
public myDatePickerOptions11: IMyOptions = {
todayBtnTxt: '今天',
dateFormat: 'yyyy-mm-dd',
firstDayOfWeek: 'mo',
sunHighlight: true,
height: '30px',
inline: false,
editableDateField: false,
showClearDateBtn: true,
disableSince:{year: new Date().getFullYear(), month: new Date().getMonth()+1, day: new Date().getDate()+1},
disableUntil: {year: new Date().getFullYear(), month: new Date().getMonth() - 5, day: new Date().getDate() + 1 },
selectionTxtFontSize: '10px'
};
public myDatePickerOptions12: IMyOptions = {
todayBtnTxt: '今天',
dateFormat: 'yyyy-mm-dd',
firstDayOfWeek: 'mo',
sunHighlight: true,
height: '34px',
inline: false,
editableDateField: false,
showClearDateBtn: false,
disableSince:{year: new Date().getFullYear(), month: new Date().getMonth()+1, day: new Date().getDate()+1},
disableUntil: {year: new Date().getFullYear(), month: new Date().getMonth() - 5, day: new Date().getDate() + 1 },
selectionTxtFontSize: '10px'
};
隐藏日期选择按钮
this.myDatePickerOptions21 = {
showClearDateBtn: false
};
this.myDatePickerOptions22 = {
showClearDateBtn: false
};
//时间的限制
checkTime(startTime,endTime):boolean{
if(startTime==null||startTime==''||endTime==null||endTime==''){
this.http.showAlert("提示", "请选择时间进行数据筛选!", "确定", "", 0, false);
return false;
}else{
var startdate = new Date((startTime).replace(/-/g,"/"));
var enddate = new Date((endTime).replace(/-/g,"/"));
if(startdate>enddate){
this.http.showAlert("提示", "结束时间不能小于开始时间 ,请重新选择!", "确定", "", 0, false);
return false;
}
}
return true;
}
然后,就可以根据日期查询了!