Bootstrap datetimepicker 时间插件

最新推荐文章于 2025-06-04 16:58:18 发布

java_陈序猿

最新推荐文章于 2025-06-04 16:58:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端插件库文章标签： datetimepicker Bootstrap

本文链接：https://blog.youkuaiyun.com/maple980326/article/details/52032802

前端插件库专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Freemarker模板中集成Datetimepicker插件，实现日期选择功能。包括插件导入、JS代码配置及页面展示效果。

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

1、导入插件文件（文件资源在我的csdn下载里面）如图：

2、 Freemarker页面上引入js 代码如下：

<link rel="stylesheet" href="${base}/vender/datetimepicker/jquery.datetimepicker.css">
<script src="${base}/vender/datetimepicker/jquery.js"></script>
<script src="${base}/vender/datetimepicker/jquery.datetimepicker.js"></script>

3、Freemarker页面 html便签代码：

   发文日期 
<input type="text" class="input input-auto" id="start"  name="startTime"    >
   ~ <input type="text" class="input input-auto" id="end" name="endTime"    >
<input type="text" style="display:none" class="input input-auto" id="ss" value="${(lawCondition.startTime)!}"   >
<input type="text" style="display:none"class="input input-auto" id="ee" value="${(lawCondition.endTime)!}"   >

4、js 代码：

$(document).ready(function(){

$("#end").datetimepicker();
$("#start").datetimepicker();
alertWarn();
});

5、效果图：