脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap日期插件daterangepicker

bootstrap日期插件daterangepicker使用详解

 更新时间：2017年10月19日 09:39:25   作者：princeLuan  
这篇文章主要为大家详细介绍了bootstrap日期插件daterangepicker的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得：
插件开源地址：daterangepicker日期控件，
插件使用只要按照开源中的文档信息来就好先包括以下引用：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

包含对jquery，bootstrap框架的引用，以及日期处理用的moment.js,最后加载上这个插件的js和css文件
然后和大部分jq插件一样，该插件也是对$.fn的扩展所以进行以下的操作来使用这个控件

<script type="text/javascript">
$(document).ready(function() {
 $('input[name="daterange"]').daterangepicker();
});
</script>

用jq获取到你要插入的那个元素然后运行daterangepicker函数就能使用它默认的样式和属性了，
不过光有这个肯定是不行的，daterangepicker函数可以接受一个参数对象和一个回调函数，如下：

$('input[name="daterange"]').daterangepicker(
 { 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: '2013-12-31'
 },
 function(start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 }
);

回调函数会在日期更改之后触发有三个参数，开始时间，结束时间以及标签名，可以在这里执行你要进行的操作如ajax请求

以上就可以构建一个英文版的日期控件了


接下来着重介绍一下locale和ranges两个参数

首先是locale这个参数locale是构建本地语言应用的重要参数（github上说locale接受对象参数，不过并没有说明对象的属性）

以下是插件中locale默认属性

{ 
applyLabel: ‘Apply', 
cancelLabel: ‘Cancel', 
fromLabel: ‘From', 
toLabel: ‘To', 
weekLabel: ‘W', 
customRangeLabel: ‘Custom Range', 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

我们只有更改这些参数就能够使这个插件变成中文的插件

$('input[name=datetime]').daterangepicker({ 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: '确认',
      cancelLabel: '取消',
      fromLabel: '从',
      toLabel: '到',
      weekLabel: 'W',
      customRangeLabel: 'Custom Range',
      daysOfWeek:["日","一","二","三","四","五","六"],
      monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    }
  }, function (start, end, label) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });

效果如下：

当然你可能也许想实现github中的那个效果，想加个添加时间的快捷键：
Improvely.com
没问题可以使用range参数实现：
range参数也是对象参数{name:[start,end] name是快捷键的名称，接受一个数组分别是时间的开始和结束

$('input[name=datetime]').daterangepicker({ 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: '确认',
   cancelLabel: '取消',
   fromLabel: '从',
   toLabel: '到',
   weekLabel: 'W',
   customRangeLabel: '选择时间',
   daysOfWeek:["日","一","二","三","四","五","六"],
   monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
  range: {
   "近期": ['2015-04-12',new Date()]
  }
 }, function (start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 });

效果如下：

这样就有了一个中文的日期插件了，当然还有其他的参数可以使用包括添加自己的class用来敷写bootstrap的样式来实现自己想要的样式，也可以使用单选时间框函数来实现，具体的大家可以仔细查看官方的文档来构建自己需要的时间选取控件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    这篇文章主要介绍了使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条效果,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-01-01
  • Fetch超时设置与终止请求详解

    Fetch超时设置与终止请求详解

    这篇文章主要给大家介绍了关于Fetch超时设置与终止请求的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Fetch具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js下载文件并修改文件名

    js下载文件并修改文件名

    这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS实现数组去重,显示重复元素及个数的方法示例

    JS实现数组去重,显示重复元素及个数的方法示例

    这篇文章主要介绍了JS实现数组去重,显示重复元素及个数的方法,涉及javascript数组遍历、统计、计算等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 小程序如何构建骨架屏

    小程序如何构建骨架屏

    最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏"，下面我们来简单了解一下吧
    2019-05-05
  • JS实现图片居中悬浮效果

    JS实现图片居中悬浮效果

    这篇文章给大家分享的是通过JS实现图片垂直居中悬浮，不跟随滚动条飘动的效果，有兴趣的朋友跟着学习下吧。
    2017-12-12
  • Javacript中自定义的map.js 的方法

    Javacript中自定义的map.js 的方法

    以下map.js和map-util.js都是自定义的map，任选其一就可以。你可以用它来像java里new Map()和put()、remove()、get()等方法
    2017-11-11
  • JS实现二分查找的示例代码

    JS实现二分查找的示例代码

    二分查找也称折半查找,它是一种效率较高的查找方法,本文主要介绍了JS实现二分查找的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • JavaScript实现的超简单计算器功能示例

    JavaScript实现的超简单计算器功能示例

    这篇文章主要介绍了JavaScript实现的超简单计算器功能,可实现基本的四则运算并带有验证功能,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
    2017-12-12
  • javascript内置对象Math案例总结分析

    javascript内置对象Math案例总结分析

    今天总结一下javascript 内置对象Math中的函数用法，顺带写一下常见的案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
    2022-03-03

最新评论