基于bootstrap的datetimepicker的使用

在做项目日期的时候，如果调用datepicker()方法只能选取到日期，无法精确到时分秒，这时候，我们就需要引用带有选取时分秒方法的datetimepicker插件。

  官方文档地址：http://www.bootcss.com/p/bootstrap-datetimepicker/

  我自己做的案例：

1.引入的文件：

<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
 <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<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.zh-CN.js" charset="UTF-8"></script>

2.使用基于bootstrap的日期选项框

<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <div class="form-group">
                <label class="control-label col-sm-4">开始时间:</label>
                <i class="fa"></i> <input
                    class="form-control form-control-inline input-medium date-picker"
                    id="messageStartTime" size="18"  name="startTime"
                    type="text" value=""
                    data-date-format="yyyy-mm-dd HH:ii:ss">
            </div>
        </fieldset>
    </form>
</div>

3.调用datetimepicker()方法

<script type="text/javascript">
    var date = new Date();
    $('#messageStartTime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        autoclose: 1,
        startDate: date,
	startView: 2,
	forceParse: 1,
        showMeridian: 1,
        initialDate: new Date()
    });
</script>

datetimepicker方法里的参数所代表的功能官方文档里面很清楚，不再赘述。

最终效果：