前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >mydatepicker插件使用

mydatepicker插件使用

作者头像
用户5640963
发布2019-07-25 11:36:20
7860
发布2019-07-25 11:36:20
举报
文章被收录于专栏:卯金刀GG卯金刀GG

1、html页面定义

代码语言:javascript
复制
<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代码

引用

代码语言:javascript
复制
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;  
    }

然后,就可以根据日期查询了!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档