专栏首页编程微刊jeDate日期控件在项目中实际应用

jeDate日期控件在项目中实际应用

需求: 1:可提供日期不超过当前日期或者(验证选中日期是否超过今天) 2:日期验证 3:input表格里面获取当前系统默认日期 4:选着日期点击选中后点确定按钮才关闭 5:验证结束日期大于开始日期

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title> </title>
        <link type="text/css" rel="stylesheet" href="jeDate-gh-pages/test/jeDate-test.css">
        <link type="text/css" rel="stylesheet" href="jeDate-gh-pages/skin/jedate.css">
        <script type="text/javascript" src="jeDate-gh-pages/src/jedate.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" class="form-control input-medium" placeholder="开始时间" id="startTime" />
        <input type="text" class="form-control input-medium" placeholder="结束时间" id="endTime" />
        <button type="submit" id="btnsearch">搜索</button>
    </body>
    <script type="text/javascript">
        //可提供日期不超过当前日期
            Date.prototype.format = function(format) {
            var o = {
                "M+" : this.getMonth() + 1, // month
                "d+" : this.getDate(), // day
                "h+" : this.getHours(), // hour
                "m+" : this.getMinutes(), // minute
                "s+" : this.getSeconds(), // second
                "q+" : Math.floor((this.getMonth() + 3) / 3), // quarter
                "S" : this.getMilliseconds()
            // millisecond
            };
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (this.getFullYear() + "")
                        .substr(4 - RegExp.$1.length));
            }
            for ( var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1,
                            RegExp.$1.length == 1 ? o[k] : ("00" + o[k])
                                    .substr(("" + o[k]).length));
                }
            }
            return format;
        };
        var nowt = new Date().format("yyyy-MM-dd");

        //选中后点确定按钮才关闭
        jeDate("#startTime", {
            onClose : true,
            theme : {
                bgcolor : "#00A1CB",
                color : "#ffffff",
                pnColor : "#00CCFF"
            },
            format : 'YYYY-MM-DD hh:mm:ss',
            maxDate : nowt
        });
        jeDate("#endTime", {
            onClose : true,
            theme : {
                bgcolor : "#00A1CB",
                color : "#ffffff",
                pnColor : "#00CCFF"
            },
            format : 'YYYY-MM-DD hh:mm:ss',
            maxDate : nowt
        });

        //默认input是系统当前时间选择
        var mydateInput = document.getElementById("startTime");
        var date = new Date();
        /*  date.setMonth(date.getMonth()-1); */
        var dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
                + date.getDate() + "  " + "8:00:00";
        mydateInput.value = dateString;

        var mydateInputs = document.getElementById("endTime");
        var dates = new Date();
        var dateStrings = dates.getFullYear() + "-" + (dates.getMonth() + 1)
                + "-" + dates.getDate() + "  " + "18:00:00";
        mydateInputs.value = dateStrings;
        
        
        
        

        // 点击事件
        $("#btnsearch").click(function() {
            if(validate()) {
                return;
            }
        })
        // 验证年月
        function validate(numb) {
            if($("#startTime").val() == '') {
                alert("开始日期不可为空");

                return true;
            }
            if(diffDate($("#startTime").val()) == 0) {
                alert("开始日期不能超过当前日期");

                return true;
            }
            if($("#endTime").val() == '') {
                alert("结束日期不可为空");

                return true;
            }
            if(diffDate($("#endTime").val()) == 0) {
                alert("结束日期不能超过当前日期");

                return true;
            }
            if(validateDate($("#startTime").val(), $("#endTime").val())) {
                alert('结束日期不得小于开始日期')

                return true;
            }
            return false;
        }

        // 验证选中日期是否超过今天(和可提供日期不超过当前日期查不多需求)
        function diffDate(evalue) {
            var date = new Date(Date.parse(evalue.replace(/-/g, "/")));
            if(new Date() >= date) {
                return 1;
            }
            return 0;
        }

        // 验证结束日期大于开始日期
        function validateDate(beginTime, endTime) {
            var bd = new Date(Date.parse(beginTime));
            var ed = new Date(Date.parse(endTime));
            return bd > ed;
        }
    </script>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

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

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券