bootstrap datetimepicker 语言配置及使用

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

学习代表未来

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

阅读量2.1k

点赞数

文章标签： bootstrap datetimepicker 中文配置

本文详细介绍了如何在项目中引入并使用Bootstrap DateTimePicker组件。从下载包到引入必要的文件，再到配置日期时间选择器，包括语言设置、日期格式、高亮当前日期等功能，最后通过示例展示了如何监听日期变化。

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

1.先下载bootstrap datetimepicker 包，然后把相应的文件引进来即可

<head>
<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="bootstrap-datetimepicker/css/bootstrap.min.css" />
	<link rel="stylesheet" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />

     // 因为bootstrap基于jquery,所以必须引入jquery
	<script src="bootstrap-datetimepicker/js/jquery-3.3.1.min.js"></script>
	<script src="bootstrap-datetimepicker/js/bootstrap.min.js"></script>
	<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>

     // 引入你想使用的语言包
	<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>

2.使用配置

<input size="16" type="text" value="" readonly class="form_datetime">

<script>
	$(".form_datetime").datetimepicker({
		language:'zh-CN', //语言
		minView: "month",  //最精确的时间选择视图。
		format: 'yyyy-mm-dd',  //日期格式
		todayHighlight:true, //高亮当前日期
		autoclose:true //当选择一个日期之后是否立即关闭此日期时间选择器。
	}).on('changeDate',function(ev){  //当日期被改变时被触发。
		console.log(ev.date.valueOf());
	});

</script>