https://www.cnblogs.com/dazhangli/p/9002329.html
引入文件的说明
相关的事件的写法
首先使用日期控件（默认前提引入了Bootstrap框架的js和css）
-
引入css文件
<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datetimepicker.min.css">
- 引入js文件
<#--bootstrap日期控件-->
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>
- html页面
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_start">时间区间</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type="text" class="form-control" name="start" id="search_start" placeholder="开始时间"/>
<span class="input-group-addon">到</span>
<input type="text" class="form-control" name="end" id="search_end" placeholder="结束时间"/>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary" id="search">查询</button>
<button type="button" class="btn btn-default" id="reset">重置</button>
</div>
</div>
</div>
</form>
<script>
$(function() {
$("#search_start").datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
todayHighlight: true,
autoclose: true
}).on('changeDate', function (e) {
var startTime = e.date;
$("#search_end").datepicker('setStartDate', startTime);
});
$("#search_end").datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
todayHighlight: true,
autoclose: true
}).on('changeDate', function (e) {
var endTime = e.date;
$("#search_start").datepicker('setEndDate', endTime);
});
$('.input-date').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
todayHighlight: true,
autoclose: true
}).on('hide', function (e) {
e.stopPropagation();
});
$('.end-date').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
startDate: new Date(),
todayHighlight: true,
autoclose: true
}).on('hide', function (e) {
e.stopPropagation();
});
});
</script>
目录转载地址具体写法转载地址https://www.cnblogs.com/dazhangli/p/9002329.html引入文件的说明相关的事件的写法具体写法首先使用日期控件（默认前提引入了Bootstrap框架的js和css）引入css文件 <!-- Bootstrap --> <link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstra
CmsNewsList.prototype.initDataPicker = function(){
var startPicker = $('#start-picker');
var endPicker = $('#end-picker');
var todayDate = new Date();
在AdminLTE3 form的示例中，没有找到用日期控件只选一个日期或时间的例子，都是选择日期范围的例子（当然也可能是我没找到例子）
不过，这根本不算问题，因为AdminLTE引用的dateRangePicker插件，本身就可以只选一个日期，而不是日期范围。
$(function () {
$('#publishTime').daterangepicker({
timePicker: tr...
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
推荐开源项目：DateTimePicker - 简约而强大的日期时间选择器
项目地址:https://gitcode.com/nehakadam/DateTimePicker
在前端开发中，选择日期和时间的功能是必不可少的一部分。今天，我们向您推荐一个高效且易于使用的开源组件——DateTimePicker。这个项目由 Neha Kadam 创建，旨在为 Web 应用提供一款直观、灵活的日期和时间...
