Bootstrap基础日期控件使用

最新推荐文章于 2024-04-02 13:23:25 发布

最骚的猪

最新推荐文章于 2024-04-02 13:23:25 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap 控件日期控件

本文链接：https://blog.youkuaiyun.com/qq_34639724/article/details/76695154

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文档介绍了如何在项目中使用Bootstrap的基础日期控件，包括需要下载的资源、引入步骤及测试源码的说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先你先要下载以下的资源

bootstrap.min.css
bootstrap-datetimepicker.css”
bootstrap-datetimepicker.min.css
jquery-1.8.3.min.js
bootstrap.min.js
bootstrap-datetimepicker.js
bootstrap-datetimepicker.zh-CN.js
bootstrap-datetimepicker.min.js

下载地址：http://download.youkuaiyun.com/download/tomcat_2014/9279299

2.下载文件引入自己项目

<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8">
<script src="js/bootstrap-datetimepicker.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

这个文件的路径是相对你的项目路径，需要根据自己文件js、css文件进行引入。

以下我的文档目录

这里写图片描述

3.测试源码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html >
<head runat="server">
    <title></title>


<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">

<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

</head>
<body>
<span class="glyphicon glyphicon-search">123123</span>

   <div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group " >
                    <input class="form-control" id='input1' size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>



<script type="text/javascript">
    $('#input1').datetimepicker({
        language:  'zh',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });



    $('.form_date').datetimepicker({
        language:  'zh',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        language:  'zh',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>


</body>
</html>