bootstrap-datetimepicker 日期控件

最新推荐文章于 2025-05-28 16:08:26 发布

miskss

最新推荐文章于 2025-05-28 16:08:26 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： bootstrap 控件

本文链接：https://blog.youkuaiyun.com/wanping321/article/details/78086219

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用 Bootstrap DateTimePicker 插件为网页表单提供日期和时间选择功能。包括基本配置、日期格式化及默认时间设置等关键信息。

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

官网地址：http://www.bootcss.com/p/bootstrap-datetimepicker/

官网给的基于bootstrap v3 的例子源代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>

<body>
<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 date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <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-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" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    $('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>

</body>
</html>

依赖：
css：bootstrap.css 和bootstrap-datetimepicker.min.css

js：jquery、bootstrap、bootstrap-datetimepicker.js和bootstrap-datetimepicker-master\js\locales文件夹下的zh-CN.js

注意事项：

1、修改成中文需要引入：bootstrap-datetimepicker.zh-CN.js 这个文件；参数language改为：language：’zh-CN’；
2、input框中的日期显示格式化：年、日、秒的表示方法和java保持一致；其中月和分钟表示有所不同，月：MM(中文月份) 和 mm（数字），分钟用 ii 表示
3、设置默认的开始和结束时间：setStartDate（String）、和setEndDate（String）方法。
开始日期：
$(‘#datetimepicker’).datetimepicker(‘setStartDate’, ‘2012-01-01’);

结束日期：
$(‘#datetimepicker’).datetimepicker(‘setEndDate’, ‘2012-01-01’);