bootstrap日期插件的使用示例

本文介绍下bootstrap日期插件的使用。注意：从官网下载的demo可能由于浏览器问题不兼容，可以通过多个浏览器尝试。

1、在jsp文件中需要引入bootstrap-datetimepicker.min.css/bootstrap-datetimepicker.min.js/bootstrap-datetimepicker.zh-CN.js三个文件（当然需要先引入jquery/bootstrap相关的文件）

<script type="text/javascript"src="<%=request.getContextPath()%>/resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"src="<%=request.getContextPath()%>/resources/js/menu.js"></script>
<link rel="stylesheet"href="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript"src="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/js/bootstrap.min.js"></script><!-- 添加对日期空间的插件 -->
<link rel="stylesheet" charset="UTF-8" href="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/css/bootstrap-datetimepicker.min.css" >
<script type="text/javascript" charset="UTF-8" src="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/js/bootstrap-datetimepicker.zh-CN.js"></script>

2、编写日期标签：

<div class="row"><div class="form-group"><label for="birthday" class="col-xs-1 control-label">生日</label><div class="col-xs-8"><div class="input-group date form_date col-md-3" data-date="" data-date-format="yyyy年mm月dd日" data-link-field="dtp_input2" data-link-format="yyyy年mm月dd日" ><sf:input id="birthday" size="16" path="birthday" readonly="true"/><span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div><!-- <input type="hidden" id="dtp_input2" value="" /><br/> --></div><div class="col-xs-3"><sf:errors path="birthday"></sf:errors></div></div></div>

3、编写js脚本文件：

$('.form_date').datetimepicker({language:  'zh-CN',weekStart: 1,todayBtn:  1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0});

bootstrap日期插件的使用示例相关推荐

Bootstrap日期插件之Datetimepicker修改默认语言（附带源码）
在做这个插件的时候,一开始导入语言包报如下错误 bootstrap-datepicker.zh-CN.js:6 Uncaught TypeError: Cannot read property 'da ...
My97DatePicker-WdatePicker日历日期插件详细示例
插件下载地址: https://download.csdn.net/download/lianzhang861/10433412 此日期插件功能还可以,用着挺顺手目前的版本是:4.8 正式版 My9 ...
顶级的 Bootstrap 日期选择器和时间选择器插件（附免费下载链接）
顶级的 Bootstrap 日期选择器和时间选择器插件 Bootstrap的Datepicker元素是一种用户友好和直观的方式,可以轻松选择日期.它可用于移动端和PC端,还可以选择以 "从右 ...
[js插件]JqueryUI日期插件
引言之前使用jqueryUi中的弹出框做了一个可拖拽的弹出登录框,也顺便将里面的常用的日期插件和文本框智能提示插件,也学习了一下. 使用方法首先在项目中引入以下文件: 1 <!-- 日期插件 ...
Bootstrap 轮番插件Collapse 调用方式
调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...
jsp之bootstrap-datetimepicker日期插件
bootstrap-datetimepicker日期插件一.引入文件这里是我目录下的 ,因为是bootstrap前端框架的插件,所以jQuery.bootstrap和插件都需要引入对应文件 < ...
java jode_Java中joda日期格式化工具的使用示例
1.基本介绍 Java自带日期格式化工具DateFormat ,但是DateFormat 的所有实现,包括 SimpleDateFormat 都不是线程安全的,因此你不应该在多线程序中使用,除非是在对 ...
php获取laydate,解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
50个Bootstrap扩展插件
Bootstap这个框架本身已经包含了开发网页的众多要素,包括了常用的工具以及扩展组件,如果你在开发页面时觉得在某些方面还不够的话,不妨看看最新收集的50个Bootstrap扩展插件,这些插件在我们平 ...

bootstrap日期插件的使用示例

bootstrap日期插件的使用示例相关推荐

最新文章

热门文章