daterangepicker时间插件控制起始和截至日期的选择范围

一、时间插件使用方式
1、daterangepicker.js依赖于 Bootstrap 、 jQuery 、 Moment.js 这三个库。页面中必需包含的脚本和样式文件有

<!-- 需要引用的依赖库 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /><!-- 引用 daterangepicker 相关文件-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

2、html代码如下

<input type="text" class="minDate" placeholder="请选择起始日期">
<input type="text" class="maxDate" placeholder="请选择结束日期">

3、js控制时间范围

<script>($(function () {/*** date时间往后延迟hour个小时和min分钟 的时间* @param {Object} min 分钟* @param {Object} hour 小时* @param {Object} date 日期*/function delay(min, hour, date) {var oldTime=date.getTime();oldTime += min * 60 * 1000;oldTime += hour *60 * 60 *1000;return new Date(oldTime);}var endPicker = null;//开始日期$('.minDate').daterangepicker({singleDatePicker: true,showDropdowns: true,autoUpdateInput: false,timePicker24Hour : true,timePicker : false,//minDate:startDate,maxDate: new Date(),//drops:"up","locale": {format: 'YYYY-MM-DD HH:mm',applyLabel: "确定",cancelLabel: "取消",resetLabel: "重置",daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]}}, function (start, end) {});//开始日期选择按钮的点击事件监听$('.minDate').on('apply.daterangepicker', function (ev, picker) {$('.minDate').val(picker.startDate.format('YYYY-MM-DD '));//初始化结束日期的空件if(!endPicker){$('.maxDate').daterangepicker({singleDatePicker: true,showDropdowns: true,autoUpdateInput: false,timePicker24Hour: true,timePicker: false,minDate: delay(0,24,new Date($('.minDate').val())),maxDate: new Date(),//drops:"up","locale": {format: 'YYYY-MM-DD HH:mm',applyLabel: "确定",cancelLabel: "取消",resetLabel: "重置",daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]}}, function (start, end, label) {});endPicker = $('.maxDate').data('daterangepicker')}else{$('.maxDate').val('');endPicker.setMinDate(delay(0, 24, new Date($('.minDate').val())));//console.log(delay(0, 24, new Date($('.minDate').val())));//console.log($('.minDate').val())// endPicker.setEndDate(delay(0, 24, new Date($('.minDate').val())));}});//结束日期的监听$('.maxDate').on('apply.daterangepicker', function (ev, picker) {//console.log("apply:"+picker.startDate.format('YYYY-MM-DD HH:mm'));$('.maxDate').val(picker.startDate.format('YYYY-MM-DD'));});//结束日期的限制$(".maxDate").click(function () {var start = $('.minDate').val();if (!start || start.length == 0) {alert("请先选择开始时间");return;}});}));
</script>

5、效果图如下

具体相关使用方法请访问网址 http://bsify.admui.com/daterangepicker/

daterangepicker时间插件控制起始和截至日期的选择范围相关推荐

My97时间插件使用、My97设置日期控件日期格式
My97设置日期控件日期格式需要什么格式的只需要修改dateFmt的值就可以了 <input type="text" id="d233" onclick ...
Vue学习笔记：Element时间控件设置某一个日期禁止选择
Vue学习笔记:Element时间控件添加一段时间禁止选择需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择文档: 代码实现:在时间控件上添加 :picker-options=&quo ...
java前端的日期插件_几个前端时间插件总结
几个前端时间插件总结总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
php 时间插件,PHP中Carbon日期时间处理利器详解
Carbon是PHP中很人性化的时间日期处理插件,本文主要和大家分享PHP中的日期时间处理利器(Carbon)实例,希望能帮助到大家. Carbon基本用法//1.基本应用 $now = Carbon ...
【若依(ruoyi)】datetimepicker日期和时间插件
目录前言官网控件绑定 `datetimepicker日期和时间插件` 前言若依(ruoyi) 4.2 thymeleaf 模板官网 https://github.com/smalot/boo ...
【bootstrap】使用支持bootstrap的时间插件daterangepicker
其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...
C语言：输入起始日期与截至日期，计算相距天数。
C语言:输入起始日期与截至日期,计算相距天数. #include <stdio.h> //输入两个日期,计算它们相隔的天数. //判断是不是闰年 int year(int year) {i ...
laydate日期时间插件年选择器和年月选择器实现不用点击确定
laydate日期时间插件只有是日期的时候才不用点确定,年选择器和年月选择器的时候必须点确定才能选中.用起来很不方便,这里在不改变源代码的情况实现不用点击确定. 1.年选择器实现 <input ...
jQuery日期和时间插件 datetimepicker
获取插件Demo文件方式: 关注微信公众号"快乐干饭人的外卖券",发送"日期时间插件"6个字给公众号,免费获取代码网盘链接.(注意文字不要写错哟!) date ...

daterangepicker时间插件控制起始和截至日期的选择范围

daterangepicker时间插件控制起始和截至日期的选择范围相关推荐

最新文章

热门文章