基于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>

转载于:https://www.cnblogs.com/moumou0213/p/6484409.html

基于bootstrap的时间选择插件daterangepicker以及汉化方法相关推荐

Pycharm的汉化方法（pycharm改为中文版）
很多开始接触python的朋友都会用到一款工具:pycharm,但默认是英文版的不知从何下手,本文介绍两种不同的pycharm汉化方法,将其变为中文版的界面.(对于windows电脑和mac电脑均有说 ...
spyder汉化方法
spyder汉化方法: 1.下载安装好Anaconda3:在此强调请安装Anaconda3,如果是anaconda2,汉化可能会遇到出错或者乱码问题. 2.spyder的版本至少在3.x以上.(查看方 ...
devexpress控件的2种汉化方法，官方想得很周到
devexpress控件库默认安装后,使用的本地资源为英文.但其实它都有本地化资源包,比如按钮属性,控件属性描述,菜单项,确认和错误的信息等等,所有这些资源字符串可以很容易地被翻译成各种语言.对于要求 ...
【汉化】DevExpress插件中RichEdit控件的自定义汉化方法
本文实现方法参考:http://blog.csdn.net/ljsql/article/details/5487460 DevExpress插件,官方提供的汉化包中关于RichEdit控件的汉化基本没 ...
WordPress插件 Buddypress完美汉化版社区插件
Buddypress 汉化版是一个wordpress社区插件,可以轻松使用wordpress打造出一个社区网站,只需要您的主题支持Buddypress即可,还可以搭配Buddypress 做出网站论坛 ...
基于CentOS-7.7下GitLab安装与汉化
文档目录一. 准备 1 1.1 环境 1 1.2 软件 1 二. GitLab安装 2 三. GitLab汉化 5 四. GitLab常用命令 7 五. GitLab目录说明 8 准备环境操作系 ...
Sublime的实用汉化方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/Andrelia20171760/art ...
github汉化方法
请先安装 Tampermonkey 插件,支持 Chrome, Opera Next 和 Safari 浏览器. 然后再点击这个链接 GitHub 汉化插件安装脚本即可. 刷新下页面,即可发现网站已 ...
仙境传说RO：npc汉化方法
仙境传说RO:npc汉化方法大家好我是艾西,在我们说了那么多期的教程中大家应该有发现游戏内很多都还是英文的,如果对于国内的玩家开展这个游戏可能有些不熟悉的小伙伴玩起来会有点难受,今天艾西跟大家分享下 ...

基于bootstrap的时间选择插件daterangepicker以及汉化方法

基于bootstrap的时间选择插件daterangepicker以及汉化方法相关推荐

最新文章

热门文章