首页 > 代码库 > 基于bootstrap的时间选择插件daterangepicker以及汉化方法
基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件:
可以设定多个时间段选项;也可以自定义时间段;由用户自己选择起始时间和终止时间;时间段的最大跨度可以在程序里设定。
支持浏览器:谷歌,火狐,safari,ie8+
效果:
需要引入的css和js
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/> <link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet"> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
html代码
<div class="input-group"> <button type="button" class="btn btn-default pull-right" id="daterange-btn"> <i class="fa fa-calendar"></i> <span>时间</span> <i class="fa fa-caret-down"></i> </button> </div>
使用js调用daterangepicker
<script> function init() { //定义locale汉化插件 var locale = { "format": ‘YYYY-MM-DD‘, "separator": " -222 ", "applyLabel": "确定", "cancelLabel": "取消", "fromLabel": "起始时间", "toLabel": "结束时间‘", "customRangeLabel": "自定义", "weekLabel": "W", "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"], "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], "firstDay": 1 }; //初始化显示当前时间 $(‘#daterange-btn span‘).html(moment().subtract(‘hours‘, 1).format(‘YYYY-MM-DD‘) + ‘ - ‘ + moment().format(‘YYYY-MM-DD‘)); //日期控件初始化 $(‘#daterange-btn‘).daterangepicker( { ‘locale‘: locale, //汉化按钮部分 ranges: { ‘今日‘: [moment(), moment()], ‘昨日‘: [moment().subtract(1, ‘days‘), moment().subtract(1, ‘days‘)], ‘最近7日‘: [moment().subtract(6, ‘days‘), moment()], ‘最近30日‘: [moment().subtract(29, ‘days‘), moment()], ‘本月‘: [moment().startOf(‘month‘), moment().endOf(‘month‘)], ‘上月‘: [moment().subtract(1, ‘month‘).startOf(‘month‘), moment().subtract(1, ‘month‘).endOf(‘month‘)] }, startDate: moment().subtract(29, ‘days‘), endDate: moment() }, function (start, end) { $(‘#daterange-btn span‘).html(start.format(‘YYYY-MM-DD‘) + ‘ - ‘ + end.format(‘YYYY-MM-DD‘)); } ); }; $(document).ready(function() { init(); }); </script>
基于bootstrap的时间选择插件daterangepicker以及汉化方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。