云南做网站哪家便宜,室内设计联盟官方网站入口,设计网站要多久,杭州网站建设优化今天主要是由于项目的需要#xff0c;做了一个daterangepicker双日历插件#xff0c;做出来的效果如下#xff1a; 个人感觉这个daterangepicker双日历插件很好用#xff0c;并且实现起来也不是很麻烦#xff0c;我是根据它的官方文档去写的#xff0c;并将Bootstrap也整… 今天主要是由于项目的需要做了一个daterangepicker双日历插件做出来的效果如下 个人感觉这个daterangepicker双日历插件很好用并且实现起来也不是很麻烦我是根据它的官方文档去写的并将Bootstrap也整合进去了daterangepicker.js下载 官方文档下载 下面就开始详细介绍我是怎么实现的吧。 1.在头部导入必要的js和css link relstylesheet typetext/css mediaall href${ctxStatic}/daterangepicker/daterangepicker.css / script src${ctxStatic}/daterangepicker/jquery-1.11.3.min.js/scriptscript src${ctxStatic}/daterangepicker/bootstrap.min.js/scriptscript src${ctxStatic}/daterangepicker/moment.js/scriptscript src${ctxStatic}/daterangepicker/daterangepicker.js/script 2.在body中写div div stylefloat:left//隐藏作用域用于将日历选中的开始时间和结束时间传到后台 input namedatetime[start] typehidden value${startTime} input namedatetime[end] typehidden value${endTime} /div div classbtn-group btn-group-sm stylepadding-right:0; button stylewidth:240px idconfig-demo classbtn btn-default daterange daterange-time typebuttonspan classdate-title下单时间/span/button//点击按钮显示时间插件并展示选中的时间段 button classbtn btn-default btn-sm typebutton οnclickclearTime(this) placeholder下单时间i classfa fa-remove/i/button//点击按钮清空选中的时间段 /div 3.编写js函数 script typetext/javascript $(document).ready(function() { $(.demo i).click(function() { $(this).parent().find(input).click(); }); updateConfig(); function updateConfig() { var options {}; options.timePicker true; options.timePicker24Hour true; options.ranges { 今天: [moment().startOf(day), moment()], 一周内: [moment().subtract(6, days), moment()], 两周内: [moment().subtract(13, days), moment()], 一月内: [moment().subtract(29, days), moment()], }; options.locale { direction: ltr, format: YYYY-MM-DD HH:mm, separator: 至 , applyLabel: 确定, cancelLabel: 取消, fromLabel: From, toLabel: To, customRangeLabel: 日期范围, daysOfWeek: [日, 一, 二, 三, 四, 五,六], monthNames: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月], firstDay: 1 }; options.linkedCalendars true; options.autoUpdateInput true; options.showCustomRangeLabel true; $(#config-demo).daterangepicker(options, function(start, end, label) { var elm $(#config-demo); var container $(elm).parent().prev(); // console.log(New date range selected: start.format(YYYY-MM-DD) to end.format(YYYY-MM-DD) (predefined range: label )); // alert(startc);// alert(end.format(YYYY-MM-DD HH:mm)); $(elm).find(.date-title).html(start.format(YYYY-MM-DD HH:mm) 至 end.format(YYYY-MM-DD HH:mm)); container.find(:input:first).val(start.format(YYYY-MM-DD HH:mm)); container.find(:input:last).val(end.format(YYYY-MM-DD HH:mm)); }); } }); function clearTime(obj){ $(obj).prev().html(span classdate-title $(obj).attr(placeholder) /span); $(obj).parent().prev().find(input).val(); } /script 这样写好了所有的配置以后就可以显示了你们要是遇到了什么不懂的地方就问我乐意解答转载于:https://www.cnblogs.com/gaopengfirst/p/8516539.html
