mydatepicker插件使用

2019独角兽企业重金招聘Python工程师标准>>>

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;  
    }

然后，就可以根据日期查询了！

转载于:https://my.oschina.net/maojindaoGG/blog/1613309