bootstrap中daterangepicker组件的使用(一)

    这段时间接了一个需求,需要实现打开一个日期控件,需要选择一个日期范围:

需求是这样:

bootstrap中daterangepicker组件的使用(一)_第1张图片

如上图所示,点击上一周期,弹出上图的一个日期控件,默认是一个范围,并且这个范围的开始日期和结束日期和长度都要根据外界的两个条件进行动态变化.

我引入了bootstrap中的一个daterangepicker组件来实现这个功能,首先我写了一个demo,如下:

一.Demo如下:

首先我的项目结构如下所示:

bootstrap中daterangepicker组件的使用(一)_第2张图片

首先来看daterangerpicker01.html 这个页面:




    
    daterangerpicker小demo
    
    
    
    
    
    


    
我是一个DateRangePicker的小练习

首先引入了一些css和js 





按照html中的引入,还要用到jquery,因为这个组件是基于bootstrap的,所以要先引入bootstrap的css文件和js文件.

从上面html中可以看到,这个demo包含两块,一块是单个日期控件的使用,另外一个是区间范围的使用.
单个日期控件如下图所示:

bootstrap中daterangepicker组件的使用(一)_第3张图片

区间日期范围如下所示:

bootstrap中daterangepicker组件的使用(一)_第4张图片

他可以选择时间范围,也可以自定义,具体可以仔细看一下代码.这个demo还是很简单的,这个demo没有对源码做任何修改.

这个demo我先记到这里.

 

你可能感兴趣的:(前端)