bootstrap中日期控件的使用以及乱码的解决方案

最新推荐文章于 2024-04-26 00:20:48 发布

weixin_38996229

最新推荐文章于 2024-04-26 00:20:48 发布

阅读量4.9k

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap 日期控件

本文链接：https://blog.csdn.net/weixin_38996229/article/details/80691888

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

整个页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<link href="css/bootstrap-3.1.1.min.css" rel='stylesheet' type='text/css' />

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" rel="external nofollow" >
<script src="js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>

//控件

<a class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id='nowdate' style="width: 150px; height: 30px;" readonly/>
<span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</a>
<script type="text/javascript">
//这其实是一个汉化的js中的内容（bootstrap-datetimepicker.zh-CN.js），但是导入后总是乱码显示，所以直接贴到前端了
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};

$('#datetimepicker1').datetimepicker({
format: 'yyyy-mm-dd', //显示格式可为yyyymm/yyyy-mm-dd/yyyy.mm.dd
language:'zh-CN',//中文汉化
weekStart: 1, //0-周日,6-周六。默认为0
autoclose: true,
//startView: 3, //打开时显示的视图。0-'hour' 1-'day' 2-'month' 3-'year' 4-'decade'
minView: 'month', //最小时间视图。默认0-'hour'
// maxView: 4, //最大时间视图。默认4-'decade'
todayBtn:true, //true时"今天"按钮仅仅将视图转到当天的日期。如果是'linked'，当天日期将会被选中。
todayHighlight:true,//默认值: false,如果为true, 高亮当前日期。
initialDate: new Date(),//初始化日期.默认new Date()当前日期
forceParse: false, //当输入非格式化日期时，强制格式化。默认true
bootcssVer:3//显示向左向右的箭头

});

</script>

</body>

</html>

效果图：

链接: https://pan.baidu.com/s/1QQb_DmORWuQmKKaXIoO0ug 密码: pp35

weixin_38996229

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap中日期控件的使用以及乱码的解决方案

整个页面代码如下：&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":&q
复制链接

扫一扫