bootstrap datepicker是一款不错的日期插件,而且在国际化方面也有不错的支持。
在日常开发中使用的非常多,简单好用。
1,datepicker介绍
detepicker的效果:
官网的例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<!--调用JS,这里是url-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--写函数-->
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<!--调用id,id是唯一标识-->
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
2,使用及汉化
2.1 下载插件并引用
我的项目里对应的目录结构(把css和js分开放):
插件url:https://pan.baidu.com/s/1qBX_nPJDyhIx26NTBIVxiA 密码:j4ch
引用:
<1-- 注意:css在js前引用-->
<script src="${ctx}/static/css/bootstrap-datetimepicker.css/js/bootstrap-datetimepicker.min.css"></script>
<script src="${ctx}/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
2.2 写函数
<script>
$( function() {
$("#datepicker").datepicker
({
autoclose: true,
todayHighlight: true,
/*汉化*/
language: "zh-CN",
/*日期格式*/
format:"yyyy-mm-dd" });
})
</script>
2.3 调用
对应的表单加id
<p>Date: <input type="text" id="datepicker"></p>
参考:
datepicker官网
Github网址