bootstrap-daterangepicker点击下载
需要引导跟jquery的支持。
实例代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;链接的href=" https://www.yisu.com/zixun/bootstrap/css/bootstrap.min.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt;链接rel="样式表" type=" text/css "媒体="所有" href=" https://www.yisu.com/zixun/daterangepicker/daterangepicker.css " rel=巴獠縩ofollow”/比;
& lt;/head>
& lt; body>
& lt;形式类=癴orm-inline”比;
& lt; div id=" divDateId " class=" pull-left dateRange”比;
& lt;输入类="表单控件" id=" searchDate祝辞& lt;/input>
& lt;我class=" glyphicon glyphicon-calendar fa fa-calendar”祝辞& lt;/i>
& lt;/div>
& lt;/form>
& lt;/body>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery/1.12.4/jquery.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/bootstrap/js/bootstrap.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/daterangepicker/moment.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/daterangepicker/daterangepicker.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞//默认三十天
$ (" # divDateId输入”).val (()。减去(‘天’,29).format (YYYY-MM-DD) +“-”+ () .format时刻(' YYYY-MM-DD '));
$ (' # divDateId ') .daterangepicker ({
minDate:“01/01/2015 ',//最小时间
maxDate:时刻()//最大时间
dateLimit: {
天:365 * 5
},//起止时间的最大间隔
showDropdowns:没错,
showWeekNumbers:假的,//是否显示第几周
timePicker:假的,//是否显示小时和分钟
timePickerIncrement: 60,//时间的增量,单位为分钟
timePicker12Hour:假的,//是否使用12个小时制来显示时间
范围:{//'最近1小时”:[时刻().subtract(“小时”,1),时刻()),
“今日”:[时刻().startOf(“天”),时刻()),
“昨日”:[时刻()。减去('天',1).startOf(“天”),()。减去('天',1).endOf(“天”),
“最近7日”:[时刻()。减去(‘天’,6),时刻()),
“最近30日:[时刻()。减去(‘天’,29),时刻())
},
打开:“正确”的,//日期选择框的弹出位置
buttonClasses:(“btn btn-default”),
applyClass:“btn-small btn-primary蓝”,
cancelClass:“btn-small”,
格式:' YYYY-MM-DD ',//控件中从和显示的日期格式
分隔符:““,
地区:{
applyLabel:“确定”,
cancelLabel:“取消”,
fromLabel:“起始时间”,
toLabel:“结束时间”,
customRangeLabel:“自定义”,
daysOfWeek:(“日”、“一”、“二”、“三”、“四”、“五”、“六”),
monthNames:['一月”、“二月”,“三月”、“四月”,“五月”、“六月”,
“七月”、“八月’,‘九月”,“十月”,“十一月”,“十二月”),
firstDay: 1
}//汉化日期控件
},函数(开始、结束标签){//格式化日期显示框
$ (' # searchDate ') .val (start.format (YYYY-MM-DD) +“-”+ end.format (' YYYY-MM-DD '));
}）;
& lt;/script>
& lt;/html>之前
实例图片:
参数说明:
“startDate可以”:(日期对象,时刻对象或字符串)起始时间
“endDate”:(日期对象,时刻对象或字符串)结束时间
“minDate”:(日期对象,时刻对象或字符串)可选最早时间
“maxDate”:(日期对象,时刻对象或字符串)可选最迟时间
“timePicker”:(布尔)是否显示时间选择
“timePickerIncrement”:(数字)时间选择递增数
“timePicker12Hour”:(布尔)是否12小时制
“打开”:(string:‘左’/返摹?显示在元素左边还是右边
“buttonClasses”:(数组)按钮样式
“applyClass”: (string)应用按钮样式
“cancelClass”: (string)取消按钮样式
“格式”(string):日期/时间格式
“分隔符”:(string)分隔符
“语言环境”(对象):本地设置
“singleDatePicker”:(布尔)是否是单个时间选择器
“parentEl”: (string)将控件放到哪个元素内,默认身体
其中有一个小需求调整,当我们直接使用源码选择时,为啦方便用户操作,控件在下拉选择月份时,自动帮我们刷新啦另一个控件上的日期,两个日期相差都在一个月,比如我选择1月到6月时,两个日期面板上显示不上一个月,一个六月,如图:
