基于bootstrap的双日历插件 daterangepicker
程序员文章站
2022-07-08 07:51:32
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围在今天及今天之后 3.结束日期在开始日期之后,根据开始日期变化 4.需要在选择好开始日期之后自动调起 ......
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下:
1.两个单日期格式分别为开始日期和结束日期
2.开始日期可选择范围在今天及今天之后
3.结束日期在开始日期之后,根据开始日期变化
4.需要在选择好开始日期之后自动调起结束日期选择框进行选择。
下面贴代码:
html:
<div class="col-sm-2 mb-2"> <input type="text" name="daterange1" id="startdate" class="form-control ks-daterange text-center" placeholder="入住时间"> </div> <div class="col-sm-2 mb-2"> <input type="text" name="daterange2" id="enddate" class="form-control ks-daterange text-center" placeholder="退房时间"> </div>
js:
var day_length = 1; //初始化今天距离结束日期的长度 $('#startdate').daterangepicker({ singleDatePicker: true, format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式 separator : 'to', // startDate:moment().startOf('day'), // endDate: moment().add(1, "days"), minDate:moment(), locale : { format: "YYYY/MM/DD", applyLabel : "确定", cancelLabel : "取消", fromLabel : "起始时间", // toLabel : "结束时间", customRangeLabel : "自定义", daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay : 1 }, }).on('hide.daterangepicker', function() { //计算长度 var s1 = $('#startdate').val(); s1 = new Date(s1.replace(/-/g, "/")); var s2 = new Date(); var days = s1.getTime() - s2.getTime(); var time = parseInt(days / (1000 * 60 * 60 * 24)); if(s1.getTime() - s2.getTime() < 0){ day_length = time + parseInt(1) } else { day_length = time + parseInt(2) } useLast() //初始化结束日期选择框,更新day_length $('#enddate').focus() //调起日期选择弹框 }) useLast() //初始化结束日期选择框,避免先选择结束日期的情况 //结束日期必须要封装成方法,不然无法更新day_length function useLast(){ $('#enddate').daterangepicker({ singleDatePicker: true, format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式 separator : 'to', // startDate:moment().startOf(1,'day'), // endDate: moment().add(1, "days"), minDate:moment().add(day_length, "days"), locale : { format: "YYYY/MM/DD", applyLabel : "确定", cancelLabel : "取消", // fromLabel : "起始时间", toLabel : "结束时间", customRangeLabel : "自定义", daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay : 1 } }) }
运行结果如下:
最后,介绍下这个时间插件的几个事件:
$('#reportrange').on('show.daterangepicker', function() { // console.log("show event fired"); }); $('#reportrange').on('hide.daterangepicker', function() { // console.log("hide event fired"); }); $('#reportrange').on('cancel.daterangepicker', function(ev, picker) { // console.log("cancel event fired"); });
我在上面的例子中,由于要动态改变day_length的值,就用到了hide.daterangepicker
最重要的,一定要引入:
1.bootstrap.min.css
2.daterangepicker.min.css
3.bootstrap.min.js
4.daterangepicker.min.js
5.jquery.min.js
版本自选
上一篇: CentOS安装redis.tar.gz
下一篇: 对于手机APP偷窥个人隐私,你怎么看
推荐阅读
-
bootstrap中日历范围选择插件daterangepicker的使用详解
-
基于daterangepicker日历插件使用参数注意的问题
-
基于bootstrap的选择框插件icheck
-
基于bootstrap风格的弹框插件
-
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
-
bootstrap中日历范围选择插件daterangepicker的使用详解
-
EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
-
基于bootstrap的双日历插件 daterangepicker
-
基于bootstrap按钮式下拉菜单组件的搜索建议插件
-
一款好基于JQuery的日历插件