bootstrap的datetimepicker使用

最新推荐文章于 2024-08-09 08:20:44 发布

drawbackcc

最新推荐文章于 2024-08-09 08:20:44 发布

阅读量380

点赞数

文章标签： bootstrap html js

本文链接：https://blog.csdn.net/Gideon_me/article/details/104643727

版权

本文介绍了如何在Bootstrap中使用datetimepicker，从引入必要的CSS和JS文件，到编写HTML结构，再到配置JavaScript设置，详细展示了实现日期时间选择器的全过程，并最终呈现了使用效果。

摘要由CSDN通过智能技术生成

引用css

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">

引用js

<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>

html

 <label>起始日期：</label><input type="text" id="datetimepicker1">
 <label>终止日期：</label><input type="text" id="datetimepicker2">

js设置

   var date = new Date();
    date.setDate(date.getDate() - 1);//当前日期前一天
    var picker1 = $('#datetimepicker1').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,//周一开始
        minView : 2,//显示到月和日
        autoclose:true,//选完自动关闭
        language:'zh-CN',//语言中文，引入bootstrap-datetimepicker.zh-CN.js
        todayHighlight:true,//高亮当前日期
        startDate: date,//设置最小时间
        /*bootstrap datetimepicker有几个版本，部分属性的名称不一样。比如说之前用过一版设置开始时间属性是minDate，结束时间是maxDate。还有一版开始时间：startDate，结束时间endDate。现在大部分网上下载的应该都是后者。*/
    });
    var picker2 = $('#datetimepicker2').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        minView : 2,
        autoclose:true,
        language:'zh-CN',
        todayHighlight:true,
        startDate: date,
    });
    picker1.on('changeDate', function (e) {
        var date = new Date(e.date);
        date.setDate(date.getDate() + 1);
        $('#datetimepicker2').datetimepicker('setStartDate',date);//动态设置datetimepicker2的最小值， 不能小于等于datetimepicker1
    });
    picker2.on('changeDate', function (e) {
        var date = new Date(e.date);
        date.setDate(date.getDate() - 1);
        $('#datetimepicker1').datetimepicker('setEndDate',date);//动态设置datetimepicker1的最大值， 不能大于等于datetimepicker2
    });