zoukankan      html  css  js  c++  java
  • JQuery的datetimepicker插件,起始日期&结束日期相互约束

    bootstrap-datetimepicker 的链接地址

    一、html 部分

    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-6 ">
            <input type="text" class="form-control" id="dateFrom" placeholder="开始日期"  value="" />
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6 ">
            <input type="text" class="form-control" id="dateTo" placeholder="结束日期"  value="" />
        </div>
    </div>

    二、jquery 部分

    1、封装函数

    //起始日期和结束日期的对照判断
    function dateControl(objStart,objEnd){
        var starttime,endtime;
        objStart.datetimepicker({
            minView:2, //选择日期后,不会再跳转去选择时分秒
            format: 'yyyy-mm-dd', //日期格式
            language:'zh-CN', //汉化
            autoclose:true, //选择日期后自动关闭
            top:'top-left',
        }).on("changeDate",function(ev){
            starttime=objStart.val();
            objEnd.datetimepicker('setStartDate',starttime);  //end 的开始日期
            objStart.datetimepicker('hide');
        });
        objStart.datetimepicker('setEndDate',getLocalTime(new Date()));
        
        objEnd.datetimepicker({
            minView:2, //选择日期后,不会再跳转去选择时分秒
            format: 'yyyy-mm-dd', //日期格式
            language:'zh-CN', //汉化
            autoclose:true, //选择日期后自动关闭
            top:'top-left',
        }).on("changeDate",function(ev){
            starttime=objStart.val();
            endtime=objEnd.val();
            if(starttime!=""&&endtime!=""){
                if(starttime>endtime){
                    objEnd.val("");
                    swal("开始时间大于结束时间!");
                    return;
                }
            }
            objStart.datetimepicker('setEndDate',endtime);   //start 的结束日期
            objEnd.datetimepicker('hide');
        });
        objEnd.datetimepicker('setEndDate',getLocalTime(new Date()));
    }

    2、调用

    dateControl($('#dateFrom'),$("#dateTo"));

    三、备注

    上面日期对照函数中的 getLocalTime()函数是之前封装的转换日期格式的函数,如下:

    //可以将把时间戳转为普通格式
    function getLocalTime(now) {
        now = new Date(now);
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        if(month<10){
            month="0"+month;
        }
        return year + "-" + month + "-" + date ;
    }
  • 相关阅读:
    目录拷贝
    获取当前时间
    获取当前目录名称
    WPF 修改数据后更新UI
    外网访问FTP服务,解决只能以POST模式访问Filezilla的问题
    解决Postgresql服务启动又关闭的问题
    更换PostgreSql的data文件夹并重新服务器(此方法同样适用于系统崩溃后,找回数据的操作)
    C#一键显示及杀死占用端口号进程
    [WP8开发] WinJS中winControl或者itemDataSource值为null的解决方案
    [WP8开发] WebBrowser控件与后台代码.cs简单的交互
  • 原文地址:https://www.cnblogs.com/kangby/p/7940846.html
Copyright © 2011-2022 走看看