专栏首页卯金刀GGmydatepicker插件使用

mydatepicker插件使用

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【java设计模式】之 工厂模式

    使用场景:在任何需要生成复杂对象的地方,都可以使用工厂方法模式。 直接用new可以完成的不需要用工厂模式

    用户5640963
  • centos7的安装过程中出现的问题(二)

    3.1 问题一 [root@gansu ~]# yum -y install gcc

    用户5640963
  • 【java基础】zip压缩文件

    用户5640963
  • ASP.MVC时间类型json数据处理

          服务端返回DateTime属性如果用自带的json方法返回的数据如下: ? 有2种办法解决一种是采用服务端解决方案,一种是使用前端解决方案 1.前端...

    用户1055830
  • Java面试集合(二)

    4.简单说说String类和StringBuffer类之间的区别? 答:String类是不可变的类,字符串一旦被初始化就不可能改变;StringBuffer是...

    达达前端
  • 这一次搞懂SpringBoot核心原理(自动配置、事件驱动、Condition)

    SpringBoot是Spring的包装,通过自动配置使得SpringBoot可以做到开箱即用,上手成本非常低,但是学习其实现原理的成本大大增加,需要先了解熟悉...

    夜勿语
  • 漫谈可视化Prefuse(一)---从SQL Server数据库读取数据

      上篇《可视化工具solo show-----Prefuse自带例子GraphView讲解》主要介绍了整个Prefuse工具集具有的一些特征、框架的运行流程,...

    JackieZheng
  • 第十四节:窗体实验

    定义类继承JFrame 调用JFrame中的相关方法显示窗体 根据窗体中的组件为窗口添加成员变量并实例化每个组件。

    达达前端
  • Flutter中构建布局 顶

    然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。

    南郭先生
  • .Net Core系列教程(四)—— 基础身份认证

    在ASP.NET 4.5及之前的版本,可以使用FormsAuthenticationTicket来做基础身份认证,现在到了.Net Core中,发现原来的For...

    徐大嘴

扫码关注云+社区

领取腾讯云代金券