bootstrap-datetimepicker时间控件的使用

最新推荐文章于 2024-08-08 07:45:19 发布

叫我小帅

最新推荐文章于 2024-08-08 07:45:19 发布

阅读量863

点赞数

分类专栏： spring boot

spring boot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

前端模板用的是thymeleaf,首先引用bootstrap的css和js

<link th:href="@{/css/bootstrap-datetimepicker.css}" rel="stylesheet" />
<link th:href="@{/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript"
	th:src="@{/js/bootstrap-datetimepicker.js}"></script>
	<script type="text/javascript"
	th:src="@{/js/bootstrap-datetimepicker.min.js}"></script>
<script type="text/javascript"
	th:src="@{/js/bootstrap-datetimepicker.zh-CN.js}"  charset="UTF-8"></script>

基本样式可以去官网上找，bootstrap-datetimepicker在官网首页里面
在这里插入图片描述
datetimepicker控件路径
直接用git下载就行
然后就是代码：

<input type="text" class="form_datetime " th:id="starttime" />

<script type="text/javascript" th:inline="javascript">
$(function() {
	$("#starttime").datetimepicker({
		autoclose : true,
		todayHighlight : true,
		/*汉化*/
		language : "zh-CN",
		/*日期格式*/
		format : "yyyy-mm-dd hh:ii",
		minView: 1,
		maxView: 1,	
		
	});
}),

如果要汉化，需要多引用一个datetimepicker.zh-CN.js的文件，在控件下载的bootstrap-datetimepicker\js\locales文件下可以找到
官网上各种参数都有中文标示，所以不再描述