bootstrap-datetimepicker时间控件的使用
bootstrap-datetimepicker时间控件的使用
前端模板用的是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在官网首页里面
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文件下可以找到
官网上各种参数都有中文标示,所以不再描述

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-31
  • 2022-01-08
  • 2021-12-05
  • 2021-11-21
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-12-15
  • 2021-12-15
  • 2022-01-08
  • 2021-12-03
相关资源
相似解决方案