BootStrap中的日期时间组件datetimepicker

 使用BootStrap中的日期时间组件需要引入以下三个文件： 

<!--日期控件-->
<link rel="stylesheet" th:href="@{/components/datetime/bootstrap-datetimepicker.min.css}"/>
<script th:src="@{/components/datetime/moment-with-locales.js}"></script>
<script th:src="@{/components/datetime/bootstrap-datetimepicker.min.js}"></script>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker({
            //设置日期时间的格式
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-cn')
        });
   });
</script>

<div class='input-group date' id='datetimepicker'>
    <input id="endTime" type='text' class="form-control"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

这是一个简单好看的日期时间组件，有一点需要注意的是：在点击日期时间图标时，我们既可以通过BootStrap提供的组件进行选择日期和时间，也可以在电脑的键盘上直接输入符合其格式要求的日期和时间，对输入的不符合要求的日期时间会自动过滤掉，这一点还是很人性化的。但是在移动端(例如：手机)，我们在点击日期时间图标时，在出现日期时间组件同时会唤醒软键盘，从界面上来看可能稍微有点不美观，这个因人而异，但是从功能上看，我们可以直接通过软键盘快速来输入符合要求的时间，也方便了使用者，移动端中BootStrap对于不符合要求的日期时间也会自动过滤掉。