bootstrap双日历

前提：下载bootstrap日历插件在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>bootstrap双日历</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
	<!--    日历插件-->
    <link href="./css/calendar/bootstrap.min.css" rel="stylesheet">
    <link href="./css/calendar/daterangepicker-bs3.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../css/calendar/font-awesome.min.css" />
    <!-- 日历插件 -->
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/calendar/moment.js"></script>
    <script type="text/javascript" src="./js/calendar/daterangepicker.js?v=2"></script>
</head>
<body>

<div id="wrap" style="">
<div style="position:fixed;right:10px;top:35px;z-index:22;margin-top:-18px;width:250px;">
    <form class="form-horizontal">
        <div class="control-group" style="border:0px !important;">
            <div class="controls">
                <div class="input-prepend input-group" style="border:1px solid #dde;">
               <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
               </span>
                    <input style="border:0px solid black !important;width:215px !important;color:black;height:31px;width:100px;background-color:#f1ecec00;" type="text" name="reservation" id="reservation" class="form-control" value="" />
                </div>
            </div>
        </div>
    </form>
</div>

</body>

<script type="text/javascript">
	//日历

$(document).ready(function() {//切换日期
    $('#reservation').daterangepicker(null, function(start, end, label) {
        var startTime = changeTimeFormat(new Date(start));
        var endTime = changeTimeFormat(new Date(end));
        console.log(startTime,endTime);
        fn(startTime,endTime)
    });
});
function changeTimeFormat(times){//处理
    var tarTime;
    if(typeof times == "number"){
        tarTime = new Date(times)
    }else{
        tarTime = times;
    }
    var y = tarTime.getFullYear();
    var m = tarTime.getMonth()+1;
    var d = tarTime.getDate();
    if(m<10){
        m = "0"+m;
    }
    if(d<10){
        d = "0"+d;
    }
    var timeStr = y+"-"+m+"-"+d;
    return timeStr;
}

function fn(sevenDay,today){//执行函数调用日期
	console.log(sevenDay);//2019-11-04
	console.log(today);//2019-11-11
}


(function (){//获取日期,初始化日期  放到js的末尾
    var date = new Date();
    console.log(date.getTime());
    var today = date.getTime();
    var seventime = 604800000;
    var sevenDay = today - seventime;
    today = changeTimeFormat(today);
    sevenDay = changeTimeFormat(sevenDay);
    $("#reservation").val(sevenDay+" - "+today);//七天前
    fn(sevenDay,today);
})();

</script>
</html>
滴滴咚咚咚
发布了43 篇原创文章 · 获赞 4 · 访问量 1万+
私信关注
猜你喜欢
