使用方法如下,html里面加上日期输入框,需要引入jquery跟bootstrap的相关js,大概代码如下
<form class="form">
<div class="floor date-floor clearfix">
<br/><br/><br/>
<div class="fl-title pull-left">日期:</div>
<div class="date-box pull-left">
<input id="start" class="date-input form_date" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd" type="text" placeholder="开始日期"> -
<input id="end" class="date-input form_date" data-date-format="yyyy-mm-dd" data-link-format="yyyyy-mm-dd" type="text" placeholder="结束日期">
</div>
</div>
</form>
$(function () {
/*日期插件*/
$('.form_date').datetimepicker({
language: 'zh-CN',//语言,
weekStart: 1,
todayBtn: 1,
//todayBtn: "linked",
autoclose: true,//日期选择完成后是否关闭选择框
todayHighlight: 1,
startView: 2,//1为日视图 2为月份视图 3为12个月的概述
minView:3,//表示日期选择的最小范围,默认是hour */
forceParse: 0,
format: 'yyyy-mm-dd',//日期的格式
bootcssVer:3,//显示向左向右的箭头
endDate:new Date() //控制最大可选时间为今天,去掉就是不限制时间选择范围
});
/*自定义时间*/
$(".date-input").on('changeDate',function(){
if($("#start").val()!=''&&$("#end").val()!=''){
if($("#start").val()>$("#end").val()){
alert('搜索开始时间不能大于结束时间');
$("#start").val('');
}else{
$('.date-list li').removeClass('active');
}
}
});
});
页面看到的效果如下,使用还不错,比较简洁
整个演示的demo我已经上传CSDN,下载需要5积分,下载地址